Vue 单文件组件 (SFC) 规范

模板
每个 .vue 文件最多包含一个 <template> 块。

脚本
每个 .vue 文件最多包含一个 <script> 块。
任何匹配 .js 文件 (或通过它的 lang 特性指定的扩展名) 的 webpack 规则都将会运用到这个 <script> 块的内容中。

样式
一个 .vue 文件可以包含多个 <style> 标签。
默认匹配：/.css$/。
<style> 标签可以有 scoped 或者 module 属性以帮助你将样式封装到当前组件。具有不同封装模式的多个 <style> 标签可以在同一个组件中混合使用。
任何匹配 .css 文件 (或通过它的 lang 特性指定的扩展名) 的 webpack 规则都将会运用到这个 <style> 块的内容中。

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

1. <template>
   
2.   <div class="example">{{ msg }}</div>
   
3. </template>
   
4. 
   
5. <script>
   
6. export default {
   
7.   data () {
   
8.     return {
   
9.       msg: 'Hello world!'
   
10.     }
    
11.   }
    
12. }
    
13. </script>
    
14. 
    
15. <style>
    
16. .example {
    
17.   color: red;
    
18. }
    
19. </style>
    
20. 
    
21. <custom1>
    
22.   This could be e.g. documentation for the component.
    
23. </custom1>

复制代码