Vue单文件组件(SFC)规范

Vue 单文件组件 (SFC) 规范

文件地址:Vue单文件组件规范

简介

.vue 文件是一个自定义的文件类型,用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template><script><style>,还允许添加可选的自定义块:

html 复制代码
<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>

vue-loader 会解析文件,提取每个语言块,如有必要会通过其它 loader 处理,最后将他们组装成一个 ES Module,它的默认导出是一个 Vue.js 组件选项的对象。

vue-loader 支持使用非默认语言,比如 CSS 预处理器,预编译的 HTML 模版语言,通过设置语言块的 lang 属性。例如,你可以像下面这样使用 Sass 语法编写样式:

html 复制代码
<style lang="sass">
  /* write Sass! */
</style>

更多使用细节在使用预处理器中找到

语言块

模板

  • 每个 .vue 文件最多包含一个 <template> 块。
  • 内容将被提取并传递给 vue-template-compiler 为字符串,预处理为 JavaScript 渲染函数,并最终注入到从 <script> 导出的组件中。

脚本

  • 每个 .vue 文件最多包含一个 <script> 块。
  • 这个脚本会作为一个 ES Module 来执行。
  • 它的默认导出 应该是一个 Vue.js 的组件选项对象。也可以导出由 Vue.extend() 创建的扩展对象,但是普通对象是更好的选择。
  • 任何匹配 .js 文件 (或通过它的 lang 特性指定的扩展名) 的 webpack 规则都将会运用到这个 <script> 块的内容中。

样式

  • 默认匹配:/\.css$/
  • 一个 .vue 文件可以包含多个 <style> 标签。

自定义块

可以在 .vue 文件中添加额外的自定义块来实现项目的特定需求,例如 <docs> 块。vue-loader 将会使用标签名来查找对应的 webpack loader 来应用在对应的块上。webpack loader 需要在 vue-loader 的选项 loaders 中指定。

更多细节,查看自定义块

Src 导入

如果喜欢把 .vue 文件分隔到多个文件中,你可以通过 src 属性导入外部文件:

html 复制代码
<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

需要注意的是 src 导入遵循和 webpack 模块请求相同的路径解析规则,这意味着:

  • 相对路径需要以 ./ 开始
  • 你可以从 NPM 依赖中导入资源:
html 复制代码
<!-- import a file from the installed "todomvc-app-css" npm package -->
<style src="todomvc-app-css/index.css">

在自定义块上同样支持 src 导入,例如:

html 复制代码
<unit-test src="./unit-test.js">
</unit-test>

语法高亮 / IDE 支持

目前有下列 IDE/编辑器 支持语法高亮:

非常感谢其他编辑器/IDE 所做的贡献!如果在 Vue 组件中没有使用任何预处理器,你可以把 .vue 文件当作 HTML 对待。

注释

在语言块中使用该语言块对应的注释语法 (HTML、CSS、JavaScript、Jade 等)。顶层注释使用 HTML 注释语法:<!-- comment contents here -->

相关推荐
__不想说话__12 分钟前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
番茄比较犟16 分钟前
Combine知识点switchToLatest
前端
北京_宏哥16 分钟前
🔥《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理
前端·面试·charles
随笔记19 分钟前
vite构建工具和webpack构建工具有什么共同点和不同处
vue.js·react.js·webpack
Process19 分钟前
前端图片技术深度解析:格式选择、渲染原理与性能优化
前端·面试·性能优化
大松鼠君20 分钟前
轿车3D展示
前端·webgl·three.js
却尘21 分钟前
URL参数传递的两种方式:查询参数与路径参数详解
前端
下辈子再也不写代码了23 分钟前
分片下载、断点续传与实时速度显示的实现方法
前端·后端·github
婷婷婷婷24 分钟前
AntV X6 常用方法
前端
LucianaiB32 分钟前
拿到Offer,租房怎么办?看我用高德MCP+腾讯云MCP,帮你分分钟搞定!
前端·后端·cursor