Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应性系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

疑问：

  1. 以 publick中的 html 代码 为模板时，展示时html中的代码会消失吗？
  2. 以 中的模板为语法，是否可用？
  3. 以 .vue为模板 有什么差异？

Vue 在模板上就支持两种，一种 插值{{}} ，另外一种就是指令了。

插值

  1. {{ test }}
  2. {{ number + 1 }}
  4. {{ ok ? 'YES' : 'NO' }}
  6. {{ message.split('').reverse().join('') }}

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

  1. <a v-bind:href="url"> ... </a>

也可以在指令参数中使用 JavaScript 表达式（动态参数），方法是用方括号括起来：

  1. <!--
  2. 注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
  3. -->
  4. <a v-bind:[attributeName]="url"> ... </a>

对动态参数值约定

动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

对动态参数表达式约定

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：

  1. <!-- 这会触发一个编译警告 -->
  2. <a v-bind:['foo' + bar]="value"> ... </a>

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：

  1. <!--
  2. 在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
  3. 除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
  4. -->
  5. <a v-bind:[someAttr]="value"> ... </a>

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

缩写

v-bind 缩写

  1. <!-- 完整语法 -->
  2. <a v-bind:href="url"> ... </a>
  4. <!-- 缩写 -->
  5. <a :href="url"> ... </a>
  7. <!-- 动态参数的缩写 -->
  8. <a :[key]="url"> ... </a>

v-on 缩写

  1. <!-- 完整语法 -->
  2. <a v-on:click="doSomething"> ... </a>
  4. <!-- 缩写 -->
  5. <a @click="doSomething"> ... </a>
  7. <!-- 动态参数的缩写 (2.6.0+) -->
  8. <a @[event]="doSomething"> ... </a>

自定义指令

除了核心功能默认内置的指令 (例如 v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

  • created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加须要在普通的 v-on 事件监听器前调用的事件监听器时，这很有用。
  • beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。
  • mounted：在绑定元素的父组件被挂载后调用。
  • beforeUpdate：在更新包含组件的 VNode 之前调用。
  • updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
  • beforeUnmount：在卸载绑定元素的父组件之前调用
  • unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

插槽

参考

插槽作用域

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
模板 - 图1