一步步教你用Vue.js创建一个组件(附代码示例)

前言

Vue.js是一个渐进式框架，旨在以一种非常简单、直接的方式构建用户界面。它被设计成易于使用，并且足够灵活，可以处理各种各样的应用。

在本教程中，我们将向你展示如何用Vue.js创建一个简单的组件。我们还将介绍一些在使用组件时需要知道的基本概念。

我们将介绍在Vue中创建一个组件的基本语法，以及一些关于组件用途的理论。在这篇文章的最后，你应该对Vue.js的基础知识有一个扎实的了解。

到底什么是组件？

在一个传统的Web应用程序中，你有很多HTML模板在服务器上渲染。每个模板负责页面的一个特定部分，如页眉、页脚或内容区。

使用Vue.js，每一块UI都是一个单独的组件。这使得你的代码更加模块化，更容易推理。它也使得在你的应用程序的其他部分重复使用组件变得更加容易。

为什么你一定要使用组件

组件是保持你的代码有条理的一个好方法。它们还可以使你的应用程序的其他部分更容易重复使用代码。

使用组件的另一个好处是，它们可以帮助你减少你要写的代码量。例如，如果你有一个你想在你的网络应用程序的每一页上使用的页眉和页脚，你可以创建一个页眉 和页脚 组件。然后，你所要做的就是在你所有的其他模板中包含这些文件。

在Vue中创建一个组件

现在我们已经了解了什么是组件，以及为什么你应该使用它们，让我们来看看如何在Vue中实际创建一个组件。

有了这个框架，这个过程实际上是非常容易的。如果你使用Vue CLI，你需要做的就是创建一个.vue文件，并把它分成三个部分，组成这个框架的组件：模板、脚本和样式。

下面是一个简单组件的例子：

<template>
  <h1>Hello, {{name}}</h1>
</template>

<script>
export default {
  data() {
    return {
      name: 'John'
    }
  }
</script>

<style>
  h1 {
    color: red;
  }
</style>

这个例子将渲染一个H1，里面有一个变量 "name"。但它究竟是如何工作的呢？让我们来看看这些部分分别做什么。

模板部分

当使用Vue时，模板是你放置HTML代码的地方。这一部分将决定你的组件看起来是什么样子。

<template>
  <h1>Hello, {{name}}</h1>
</template>

在上面的例子中，我们有一个非常简单的模板，只是渲染了一个H1标签。

通过选择使用Vue，我们的HTML可以使用一些工具，如单向和双向绑定，这使我们能够以更直接的方式与我们的JavaScript代码沟通应用程序的这一面，与vanilla JS应用程序相比。

这就是我们看到的 "小胡子 "语法：H1将渲染存储在我们JavaScript代码中的数据。这将我们引向...

脚本部分

脚本部分是你要放置你的JavaScript代码的地方。这是你的代码的一部分，它将允许你控制你的组件的行为方式：

<script>
export default {
  data() {
    return {
      name: 'John'
    }
  }
</script>

在我们的例子中，我们有一个非常简单的脚本，只是定义了一个数据对象。这个数据对象将在我们的模板中使用，并且可以以许多不同的方式与我们的HTML相结合。

截至目前，Vue.js正沉浸在一个相当巨大的转型中，这实际上意味着我们有两种完全不同的方式来用Vue.js编写我们的JavaScript代码。让我们来简单看看它们各自的情况。

选项API：旧的方式

Options API是Vue.js过去处理组件的方式。它在V2和V3中仍然被支持，但它不再是推荐的方式了。然而，很多生产应用仍然在使用这种语法，所以学习如何使用它仍然是一个好主意。

放弃Options API的原因是它会变得非常冗长和重复，这会使你的代码难以阅读和维护。

顺便说一下，Options API是我们在以前的例子中使用的版本。

正如你所看到的，Options API是相当啰嗦的。你必须以一种非常特殊的方式来构造你的组件，以便它们能够工作。这可能很快就会让人不知所措，特别是当你在一个有大量数据的大项目上工作时。

合成API：现在和未来

为了简化我们编写组件的方式，Vue团队想出了Composition API。这是一种新的编写组件的方式，更加灵活和容易理解。让我们来看看我们如何使用Composition API重写我们之前的例子。

<script setup>
import {ref} from 'vue';

const name = ref('John');
</script>

乍一看，我们用Composition API编写脚本代码的方式比Options版本更类似于vanilla JS。我们可以用let和const来声明我们的变量，尽管我们确实需要使用一个叫做ref的工具，它与React的useState非常相似。

风格部分

样式部分是你将放置你的CSS代码的地方。这一部分将决定你的组件看起来如何。

这里你可以看到一个非常简单的样式部分，它只是对我们的H1标签应用了一些基本的样式。

<style>
  h1 {
    color: red;
  }
</style>

需要注意的是，在Vue中，除非你使用 "范围 "装饰器，否则你的样式会应用到每一个组件。

正如你所看到的，在Vue中创建一个组件的过程是非常简单的。你所需要做的就是创建一个.vue文件，并把它分成三个部分：模板、脚本和样式。

这就是它的全部内容!通过遵循这些简单的步骤，你应该不难用Vue创建你自己的自定义组件

总结