网店代运营怎么收费_咨询公司有哪些_可以发外链的论坛有哪些_网易企业邮箱

在上一节中，我们做了一个小项目用于了解Vue.js是如何工作的，这一节我们详细讲解一下核心代码的具体细节。

1.编辑 HelloWorld.vue 来显示一个简单的列表。

---

<template> 部分 

<template><div class="hello"><h1>{{ msg }}</h1><ul><li v-for="item in items" :key="item">{{ item }}</li></ul></div>
</template>

1. <div class="hello">:
   • 定义一个 div 容器，设置了类名为 hello，用于样式绑定。
2. <h1>{{ msg }}</h1>:
   • 渲染一个标题元素 <h1>。
   • 使用 Vue 的插值语法 {{ }} 动态绑定 msg 数据。
   • msg 是定义在 data 中的一个变量，稍后会解析其值。
3. <ul> 和 <li>:
   • 定义一个无序列表 <ul>，其中包含多个列表项 <li>。
   • 使用 Vue 的 v-for 指令循环渲染 items 数组中的每一项。
     • v-for="item in items": 遍历 items 数组，每次循环将当前元素赋值给 item。
     • :key="item": 为每个列表项设置唯一的 key 属性，用于优化 Vue 的虚拟 DOM 渲染性能。
       • 这里的 key 设置为 item，即当前项的值（虽然实际开发中更推荐用唯一标识符，比如 id）。
   • {{ item }}: 使用插值语法，将 item 的值渲染到 <li> 元素中。

---

<script> 部分 

<script>
export default {name: 'HelloWorld',data() {return {msg: 'My Item List',items: ['Item 1', 'Item 2', 'Item 3'],};},
};
</script>

1. export default:
   • 定义并导出一个 Vue 组件对象，供其他地方引入和使用。
2. name: 'HelloWorld':
   • 设置组件的名称为 HelloWorld，方便调试或作为子组件引用时识别。
3. data():
   • 定义组件的响应式数据。
   • 返回一个对象，其中包含两个属性：
     • msg: 字符串 'My Item List'，用于标题显示。
     • items: 数组 ['Item 1', 'Item 2', 'Item 3']，用于列表渲染。

---

<style scoped> 部分 （CSS）

<style scoped>
h1 {color: #42b983;
}
ul {list-style-type: none;padding: 0;
}
li {margin: 10px 0;
}
</style>

1. <style scoped>:
   • 使用 scoped 修饰符，表示这些样式只作用于当前组件的 DOM 元素，避免污染全局样式。
2. h1:
   • 设置标题的字体颜色为 #42b983（一种绿色）。
3. ul:
   • 设置无序列表的样式：
     • list-style-type: none;: 去掉默认的圆点样式。
     • padding: 0;: 去掉内边距。
4. li:
   • 设置列表项的样式：
     • margin: 10px 0;: 上下间距为 10px，左右间距为 0。

---

总结

• 模板部分 (<template>):
  • 定义了组件的 HTML 结构，包括标题和动态渲染的列表。
• 脚本部分 (<script>):
  • 定义了组件的逻辑和数据，包括标题内容 msg 和列表数据 items。
• 样式部分 (<style scoped>):
  • 定义了组件的局部样式，使标题和列表具有特定的外观。

---

 2.在 src/App.vue 中使用组件

<template> 部分

<template><div id="app"><HelloWorld /></div>
</template>

1. <div id="app">:
   • 定义一个根容器，id 设置为 app。
   • 这是 Vue 应用的挂载点，Vue 会将渲染的内容插入到这个 div 中。
2. <HelloWorld />:
   • 引入并使用一个名为 HelloWorld 的子组件。
   • 这是 Vue 的组件标签形式，表示在当前模板中嵌套了 HelloWorld 组件的内容。
   • HelloWorld 组件需要提前定义或从其他文件中导入。

---

<script> 部分

<script>
import HelloWorld from './components/HelloWorld.vue';export default {name: 'App',components: {HelloWorld,},
};
</script>

1. import HelloWorld from './components/HelloWorld.vue';:
   • 从相对路径 ./components/HelloWorld.vue 导入一个名为 HelloWorld 的 Vue 组件。
   • 假设 HelloWorld.vue 是一个已定义的 Vue 单文件组件（SFC）。
2. export default:
   • 定义并导出一个 Vue 组件对象，作为当前组件的配置。
3. name: 'App':
   • 设置当前组件的名称为 App。
   • 这是组件的标识，用于调试或作为子组件引用时识别。
4. components: { HelloWorld }:
   • 注册 HelloWorld 组件，使其可以在当前组件的模板中使用。
   • 注册后，HelloWorld 就可以通过 <HelloWorld /> 的形式在模板中调用。

---

<style> 部分（CSS） 

<style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

1. #app:
   • 为根容器（id="app"）设置样式。
   • 样式规则包括：
     • font-family: 设置字体为 Avenir, Helvetica, Arial, sans-serif，依次优先使用前面的字体。
     • -webkit-font-smoothing 和 -moz-osx-font-smoothing: 优化字体渲染效果，使其更平滑。
     • text-align: center: 设置文本内容水平居中。
     • color: #2c3e50: 设置文本颜色为深蓝色。
     • margin-top: 60px: 设置顶部的外边距为 60px。

---

代码运行结果

1. 页面上会显示一个居中的容器，容器中嵌套了 HelloWorld 组件的内容。
2. HelloWorld 组件的具体内容由 HelloWorld.vue 文件定义。

---

总结

• 模板部分 (<template>):
  • 定义了应用的根容器，并嵌套了子组件 HelloWorld。
• 脚本部分 (<script>):
  • 定义了当前组件的逻辑，包括导入和注册 HelloWorld 子组件。
• 样式部分 (<style>):
  • 为根容器设置了全局样式，包括字体、颜色、文本对齐方式和外边距。

这段代码展示了一个典型的 Vue 应用结构：

• 根组件 App 嵌套了子组件 HelloWorld。
• 子组件的内容和逻辑是独立的，通过模块化方式导入到根组件中使用。