1、总览
一个 Vue 单文件组件 (SFC) Single File Components,通常使用 **
*.vue
** 作为文件扩展名,它是一种使用了类似 HTML 语法的自定义文件格式,用于定义 Vue 组件。一个 Vue 单文件组件在语法上是兼容 HTML 的。
每一个**
*.vue
文件都由三种顶层语言块构成:
<template>
、
<script>
** 和 **
<style>
**,以及一些其他的自定义块:
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
<custom1>
This could be e.g. documentation for the component.
</custom1>
2、相应语言块
**
<template>
**
- 每个 **
*.vue
**文件最多可以包含一个顶层<template>
块。 - 语块包裹的内容将会被提取、传递给 **
@vue/compiler-dom
**,预编译为 JavaScript 渲染函数,并附在导出的组件上作为其render
选项。
<script>
- 每个**
*.vue
** 文件最多可以包含一个**<script>
**块。(使用 的情况除外) - 这个脚本代码块将作为 ES 模块执行。
- 默认导出应该是 Vue 的组件选项对象,可以是一个对象字面量或是 defineComponent 函数的返回值。
<script setup>
- 每个**
*.vue
文件最多可以包含一个<script setup>
**。(不包括一般的<script>
) - 这个脚本块将被预处理为组件的
setup()
函数,这意味着它将为每一个组件实例都执行。**<script setup>
** 中的顶层绑定都将自动暴露给模板。要了解更多细节,请看 的专门文档。
<style>
- 每个**
*.vue
**文件可以包含多个<style>
标签。 - 一个**
<style>
** 标签可以使用scoped
或module
attribute (查看 SFC 样式功能了解更多细节) 来帮助封装当前组件的样式。使用了不同封装模式的多个<style>
标签可以被混合入同一个组件。
自定义块
请参见相关工具链指南获取更多细节。
3、自动名称推导
SFC 在以下场景中会根据文件名自动推导其组件名:
- 开发警告信息中需要格式化组件名时;
- DevTools 中观察组件时;
- 递归组件自引用时。例如一个名为
FooBar.vue
的组件可以在模板中通过**<FooBar/>
**引用自己。(同名情况下) 这比明确注册/导入的组件优先级低。
4、预处理器
代码块可以使用 **
lang
**这个 **attribute 来声明预处理器语言,最常见的用例就在
<script>
** 中使用 TypeScript:
<script lang="ts">
// use TypeScript
</script>
**lang**
** **在任意块上都能使用,比如我们可以在 **
<style>
** 标签中使用 SASS 是 **
<template>
** 中使用 Pug:
<template lang="pug">
p {{ msg }}
</template>
<style lang="scss">
$primary-color: #333;
body {
color: $primary-color;
}
</style>
注意对不同预处理器的集成会根据你所使用的工具链而有所不同,具体细节请查看相应的工具链文档来确认:
- Vite
- Vue CLI
- webpack + vue-loader
5、Src 导入
如果你更喜欢将 **
*.vue
**组件分散到多个文件中,可以为一个语块使用 **
src
**这个 **attribute **来导入一个外部文件:
<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>
请注意 **
src
**导入和 JS 模块导入遵循相同的路径解析规则,这意味着:
- 相对路径需要以
./
开头 - 你也可以从 npm 依赖中导入资源
<!-- 从所安装的 "todomvc-app-css" npm 包中导入一个文件 -->
<style src="todomvc-app-css/index.css" />
**
src
**导入对自定义语块也同样适用:
<unit-test src="./unit-test.js">
</unit-test>
6、注释
在每一个语块中你都可以按照相应语言 (HTML、CSS、JavaScript 和 Pug 等等) 的语法书写注释。对于顶层注释,请使用 HTML 的注释语法 **
<!-- comment contents here -->
**
版权归原作者 爱怪笑的小杰杰 所有, 如有侵权,请联系我们删除。