Vue 组件

Components 在 Vue 中，我们可以将网页分解为易于使用的更小的部分。

我们可以使用与网页其余部分隔离的 Vue 组件，并拥有自己的内容和逻辑。

一个网页通常由许多 Vue 组件组成。

什么是组件？

组件是可重用且独立的代码片段，封装了用户界面的特定部分，这样我们就可以制作可扩展且更易于维护的 Vue 应用程序。

我们可以自己在Vue中制作组件，或者使用稍后将要学习的内置组件，例如<Teleport>或者<KeepAlive>。在这里，我们将重点关注我们自己制造的组件。

创建组件

Vue 中的组件是一个非常强大的工具，因为它让我们的网页变得更具可扩展性，并且更大的项目变得更容易处理。

让我们创建一个组件并将其添加到我们的项目中。

新建一个文件夹components在 - 的里面src文件夹。
在 - 的里面components文件夹，新建一个文件FoodItem.vue。通常使用 PascalCase 命名约定来命名组件，不带空格，并且所有新单词都以大写字母（也是第一个单词）开头。
确保FoodItem.vue文件看起来像这样：

里面的代码FoodItem.vueComponents ：

<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。这意味着可以在另一个文件中接收或导入包含数据属性的对象。我们将用它来实现FoodItem.vue通过使用以下命令将其导入到我们现有的项目中main.js文件。

首先，将原始文件中的最后一行重写为两行main.js文件：

main.js:

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)
app.mount('#app')

现在，添加FoodItem.vue通过将第 4 行和第 7 行插入到您的组件中main.js文件：

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 行，添加了该组件，以便我们可以将其用作自定义标签<food-item/>在 - 的里面<template>标签在我们的App.vue像这样的文件：

App.vue:

<template>
  <h1>Food</h1>
  <food-item/>
  <food-item/>
  <food-item/>
</template>

<script></script>

<style></style>

并且，让我们在里面添加一些样式<style>标签在App.vue文件。确保开发服务器正在运行，并检查结果。

示例

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 代码添加到<style>标记在App.vue:

#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 做任何额外的工作来单独处理每个 ID 的计数<div>element，Vue 会自动执行此操作。

但除了计数器值不同外，计数器的内容<div>元素还是一样的。在下一页中，我们将了解有关组件的更多信息，以便我们能够以更有意义的方式使用组件。例如，在每个区域展示不同种类的食物会更有意义。<div>元素。

码农教程 - 一技在手,衣食无忧!

Vue 组件

什么是组件？

创建组件

添加组件

示例

单独的组件

示例

Vue练习

通过练习测试一下

练习: