Vue 组件
创建组件
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>正如您在上面的示例中看到的，组件也由 <template>, <script> 和 <style> 标签组成，就像我们的主 App.vue 文件一样。
添加组件
请注意，上例中的 <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 中使光标在悬停期间看起来像一只手指，以暗示存在某种单击功能。
CSS 代码添加到 App.vue 中的 <style> 标签:
#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> 元素中显示不同种类的食物会更有意义。
