Vue 模板语法——Vue 学习笔记（三）

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

插值：

（1）文本：

数据绑定最常见的形式就是使用双大括号（{{}}）的文本插值：

{{msg}} 将会被替换为对应数据对象上 msg 的值。无论何时，绑定的数据对象上 msg 发生了改变，插值处的内容都会更新：

通过使用 v-once 指令，可以执行一次性插值，当数据改变时，插值内的值不会改变（对该节点上所有数据生效）：

（2）原始 HTML：

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，可以使用 v-html 指令：

在网站上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。

（3）Attribute：

双大括号语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：

在上面的例子中，如果 id 的值为 null、undefined、false，则 id attribute 甚至不会包含在渲染出来的 <span> 元素中：

（4）使用 JavaScript 表达式：

对于所有的数据绑定，Vue 都提供了完全的 JavaScript 表达式支持

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式

指令：

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

这里，v-if 指令将根据表达式 state 的值的真假来插入/移除 <p> 元素。

Vue 为 v-bind 和 v-on 指令提供了缩写：

等价于：

等价于：