Vue 组件
Vue 中的组件可以将我们的网页分解成易于处理的小块。
我们可以独立于网页的其余部分来使用 Vue 组件，组件拥有自己的内容和逻辑。
一个网页通常由许多 Vue 组件组成。
什么是组件？
组件是可重用的、自包含的代码块，它们封装了用户界面的特定部分，因此我们可以构建可扩展且易于维护的 Vue 应用程序。
我们可以自己创建 Vue 组件，也可以使用稍后会学到的内置组件，例如 <Teleport> 或 <KeepAlive>。在这里，我们将专注于我们自己创建的组件。
创建组件
Vue 的组件是一个非常强大的工具，因为它能让我们的网页更具可扩展性，并且使大型项目更容易处理。
让我们创建一个组件并将其添加到我们的项目中。
在
src文件夹内创建一个名为components的新文件夹。在
components文件夹内，创建一个名为FoodItem.vue的新文件。组件通常以 PascalCase 命名约定命名，不带空格，其中每个新单词都以大写字母开头，包括第一个单词。确保
FoodItem.vue文件如下所示：
FoodItem.vue 组件内的代码
<template>
<div>
<h2>{{ name }}</h2>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Apples',
message: 'I like apples'
}
}
};
</script>
<style></style>如上例所示，组件也像我们的主 App.vue 文件一样，由 <template>、<script> 和 <style> 标签组成。
添加组件
请注意，上面示例中的 <script> 标签以 export default 开头。这意味着包含数据属性的对象可以在另一个文件中接收或导入。我们将使用此功能，通过在 main.js 文件中导入 FoodItem.vue 组件来将其集成到我们现有的项目中。
首先，在您的原始 main.js 文件中将最后一行重写为两行：
main.js:
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
现在，通过在 main.js 文件中插入第 4 行和第 7 行来添加 FoodItem.vue 组件：
main.js:
import { createApp } from 'vue'
import App from './App.vue'
import FoodItem from './components/FoodItem.vue'
const app = createApp(App)
app.component('food-item', FoodItem)
app.mount('#app')
在第 7 行，添加了该组件，以便我们可以在 App.vue 文件的 <template> 标签中使用它，作为自定义标签 <food-item/>，如下所示：
App.vue:
<template>
<h1>Food</h1>
<food-item/>
<food-item/>
<food-item/>
</template>
<script></script>
<style></style>另外，让我们在 App.vue 文件的 <style> 标签中添加一些样式。确保开发服务器正在运行，并查看结果。
示例
App.vue:
<template>
<h1>Food</h1>
<food-item/>
<food-item/>
<food-item/>
</template>
<script></script>
<style>
#app > div {
border: dashed black 1px;
display: inline-block;
margin: 10px;
padding: 10px;
background-color: lightgreen;
}
</style>开发模式：在处理 Vue 项目时，通过在终端中运行以下命令，始终将项目置于开发模式非常有用：
npm run dev
单独的组件
Vue 中处理组件时一个非常有用且强大的属性是，我们可以让它们独立工作，而无需像使用纯 JavaScript 那样标记具有唯一 ID 的元素。Vue 会自动处理，将每个组件视为独立的。
让我们让 <div> 元素在被点击时进行计数。
我们添加到主应用程序文件 App.vue 的唯一内容是 CSS，以便在悬停时将光标显示为指向的手形，暗示存在某种点击功能。
添加到 App.vue 中 <style> 标签的 CSS 代码：
#app > div:hover {
cursor: pointer;
}
在我们的组件文件 FoodItem.vue 中，我们必须添加一个名为 count 的数据属性，为 <div> 元素添加一个点击监听器，添加一个在点击时运行以增加计数器的函数，以及使用文本插值 {{}} 来显示计数。
示例
FoodItem.vue:
<template>
<div v-on:click="countClicks">
<h2>{{ name }}</h2>
<p>{{ message }}</p>
<p id="red">You have clicked me {{ clicks }} times.</p>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Apples',
message: 'I like apples',
clicks: 0
}
},
methods: {
countClicks() {
this.clicks++;
}
}
}
</script>
<style>
#red {
font-weight: bold ;
color: rgb(144, 12, 12);
}
</style>我们不必定义唯一的 ID 或执行任何额外工作，Vue 就会自动为每个 <div> 元素独立处理计数，Vue 就会自动完成。
但是，除了不同的计数器值之外，<div> 元素的内容仍然相同。在下一页中，我们将了解更多关于组件的知识，以便以更有意义的方式使用组件。例如，在每个 <div> 元素中显示不同种类的食物会更有意义。
