1.3　Vue模板语法

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

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

1.3.1　插值

插值的语法有以下3种：

1．文本

数据绑定最常见的形式就是使用Mustache语法（双大括号）的文本插值，代码如下：

Mustache标签将会被替代为对应数据对象上property的值。无论何时，只要绑定的数据对象上property发生了改变，插值处的内容都会更新。

通过使用v-once指令，也能一次性地插值，但当数据改变时，插值处的内容却不会更新。需要留心，这会影响到该节点上的其他数据绑定，代码如下：

在下面的示例中，向标题动态插入值，插值的内容可以根据需要进行修改，代码如下：

在浏览器中运行的效果如图1.5所示。

2．原始HTML

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

如果想要在页面中输出一个超链接，我们先在data属性中声明一个值，其含有<a>标签的字符串属性，然后使用v-html指令绑定到对应的HTML元素上，代码如下：

在浏览器中运行的效果如图1.6所示。

在浏览器的控制台中可以看到，使用v-html指令的<p>标签输出了<a>标签，并且在单击页面中的“Vue.js官网”链接后，浏览器页面跳转到了对应的页面。

3．使用JavaScript表达式

在前面的Vue.js示例代码中，一直只绑定简单的property键值，但实际上，对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持，代码如下：

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制需要注意，每个绑定都只能包含单个表达式，所以下面的例子不会生效，代码如下：

1.3.2　指令

指令（directives）是带有“v-”前缀的特殊属性，指令设计的初衷是用于表示单个的JavaScript表达式（v-for为例外情况）。指令的作用是当表达式的值发生改变时，可以动态地将结果响应式作用在DOM元素上，代码如下：

在上面的代码中，v-if指令将根据表达式seen的值的真假动态插入或移除<p>元素。

1．参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind指令可以用于响应式地更新HTMLattribute，代码如下：

这里的href是参数，告知v-bind指令将该元素的href attribute与表达式URL的值绑定。

2．修饰符

修饰符（modifier）是由半角句号“.”指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault（），代码如下：

1.3.3　缩写

“v-”前缀作为一种视觉提示，用来识别模板中Vue特定的属性。在使用Vue.js为现 有标签添加动态行为时，v-前缀很有帮助。然而，对于一些频繁用到的指令，这样使用会令人觉得烦琐。同时，在构建由Vue管理所有模板的单页面应用程序（Single Page Application，SPA）时，v-前缀也变得没那么重要了。因此，Vue为v-bind和v-on这两个最常用的指令提供了特定简写。

1．v-bind缩写

代码如下：

2．v-on缩写

代码如下：

它们看起来可能与普通的HTML略有不同，但“：”与“@”对于属性名来说都是合法字符，在所有支持Vue的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。