上一篇

下一步

Vue 组件入门

已完成

根据定义，组件是“一个较大整体中的一个部分或元素”。考虑创建应用程序时，你通常是使用较小的部分，然后将它们组合成一个较大的整体：应用程序。 Vue 使你能创建可用于创建完整应用程序的组件。

Vue 组件

虽然可以使用 JavaScript 文件创建组件，但更常见的方法是使用 .vue 文件中的 Vue 语法创建单文件组件。 单文件组件拥有更清晰的结构以及更独立的设置。 你甚至能通过这些组件使用各种预处理器，例如 Pug 或 Stylus。

创建组件时，你实际上是创建可在应用程序中使用的新标记，方式类似于创建普通 HTML 标记。 这种形式的语义标记指明了页面上显示的内容。 像 <booking-form></booking-form> 这样的标记可能会显示一个用于创建预订的窗体，而 <booking-list></booking-list> 可能会显示一个预订列表。

Vue 组件结构

Vue 组件包含三个主要部分：style、script 和 template。

style

style 部分可以包含任何有效的 CSS 或你可能使用的任何预处理器的语法。

你还可以使用 scoped 特性将 CSS 的范围设定为该特定组件。 样式只会仅应用于该组件，因此你可以创建类和其他设置，而无需担心会意外修改页面的其他部分。

<style>
.demo {
    font-family: Verdana
}
</style>

脚本

script 部分存储用于组件的脚本。 和 Vue JavaScript 组件一样，你可以导出各种 Vue 属性和方法，例如 data()、methods 和 components。

<script>
export default {
    data() {
        return {
            product: {
                name: 'Cruise to the moon',
                description: 'A cool cruise to the moon!'
            }
        }
    }
}
</script>

template

template 部分包含要用于显示信息并使用户能与数据交互的 HTML 模板。 使用基于 JavaScript 的组件时，template 通常位于 .html 文件中，或者它是 JavaScript 文件中的字符串字面量。

template 中使用的 HTML 语法与基于 JavaScript 的组件中的语法相同，这包括使用 handlebars ({{}}) 来显示数据。

<template>
  <div id="product">
    <div>{{ product.name }}</div>
    <div>{{ product.description }}</div>
  </div>
</template>

注意

模板需要有一个根元素。 也就是说，将 product 作为 id 的 div 元素不能拥有任何同级元素。 它只能拥有子元素，如前面的代码所示。

加载和组件

如前文所述，保存单文件组件所用的扩展名是 .vue。 你可以使用 import 语句以类似的方式将这些组件加载到其他模块。 可以使用 components 属性注册它们。 组件注册后，可用作 template 内的标记。

注意

使用 import 导入库时，标准做法是使用帕斯卡命名法为这些标记命名，其中每个单词的首字母大写（例如 PascalCase）。 但在 HTML 中，标记名的约定是使用短横线隔开式命名法：每个单词均小写，单词之间加一个短横线 -。 Vue 自动管理这两种不同的约定。

<template>
<product-display></product-display>
</template>
<script>
import ProductDisplay from './ProductDisplay.vue'
export default {
    components: {
        ProductDisplay
    }
}

在前面的代码中，导入了 ProductDisplay 组件，并已将它添加到 components 属性。 于是，在模板中使用 ProductDisplay 时，Vue 的编译器可以判断需要分析的是此组件，而不是常规的 HTML 元素。

分离关注点

将 HTML、CSS 和 JavaScript 融入一个文件中似乎背离了为每个类型创建独立的文件的最佳做法。 实际上，在这些文件之间切换可能会导致开发速度缓慢，因为它们之间相互依赖。 此外，还有一个认知负载与不得不在文件之间切换有关联。

借助单文件组件，你能使用 src 特性为 script 和 style 部分创建独立的文件。

<template>
    <div>Hello, world</div>
</template>
<script src="./hello.js"></script>
<style src="./style.css"></style>

继续