Vue学习笔记---Vue单文件组件（SFC）规范

.vue文件用于表示一个单一组件，其内使用类html语法，顶级标签有template,script,style和自定义的标签，一个完整简单的vue单文件如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
    <div class="example">{{msg}}</div>
</template>

<script>
export default {
    data(){
        return{
            msg:"hello world"
        }
    }
}
</script>

<style>
.example{
    
}
</style>

<custom-label>自定义标签</custom-label>

模板<template>

  • template里面包含该组件的html结构，可以在该组件内使用其他组件，需要在script中导入并写在components里面
  • 每个.vue文件只能有一个template标签
  • <template>标签下的根标签只能有一个，多于一个时在编译时会报错
  • <template>标签内的内容将被提取并传递给 vue-template-compiler 为字符串，预处理为 JavaScript 渲染函数，并最终注入到从<script> 导出的组件中

    脚本<script>

  • 每个.vue文件只会包含一个<script>
  • 该脚本会作为一个ES Module来执行，通过export显示指定输出，再通过import输入，在这里其他组件就是通过使用import导入，再在export default中的components中输出
  • 在webpack中对.js配置的规则都会用于该标签上
  • 脚本默认导出一个Vue.js的组件选项对象，也可以由Vue.extend()创建的扩展对象

    样式<style>

  • 一个.vue文件可以有多个<style>标签，由此我们就可以通过使用不同的lang属性，在同一个vue组件中同时使用less和sass（虽然一般不会这么做）
  • 可以在同一个组件中混用scoped和module属性
  • webpack中配置css文件的配置会应用在该标签上，如果设置了lang属性，为less时配置less标签的配置会应用在该标签上，sass也一样

    自定义块

  • 自定义块可以通过在webpack中配置，用一个loader来编译对应的自定义块，在rules中使用resourceQuery来配置对应的自定义块
    配置<custom>标签
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
      module: {
        rules: [
          {
            resourceQuery: /blockType=custom/,
            loader: 'loader-to-use'
          }
        ]
      }
    }
  • 如果找到自定义块的匹配规则，则会被对应的loader处理，否则会被忽略

参考文档：Vue单文件组件规范
vue-loader文档