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>，还允许添加可选的自定义块。

<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>