2.1.1　模板插值

首先，我们创建一个名为tempText.html的文件，在其中编写HTML文档的常规代码。之后在body标签中添加一个元素供我们测试使用，代码如下：

如果在浏览器中运行上面的HTML代码，你会看到网页中渲染出了一个标题和一个按钮，但是单击按钮并没有任何效果（截至目前，我们并没有写什么逻辑代码）。现在，让我们为这个网页增加一些动态功能，很简单：单击按钮，改变数值。引入Vue框架，并通过Vue组件来实现这个计数器功能，完整的示例代码如下：

在浏览器中运行上面的代码，单击页面中的按钮。可以看到页面中标题的文本也在不断变化。如以上代码所示，在HTML的标签中使用“{{}}”可以进行变量插值，这是Vue中基础的模板语法，其可以将当前组件中定义的变量的值插入指定位置，并且这种插值会默认实现绑定的效果，即当我们修改了变量的值时，其可以同步地反馈到页面的渲染上。

某些情况下，某些组件的渲染是由变量控制的，但是我们想让它一旦渲染后就不能够再被修改，这时可以使用模板中的v-once指令实现，被这个指令设置的组件在进行变量插值时只会插值一次，例如：

     <h1 v-once>这里是模板的内容:{{count}}次点击</h1>

在浏览器中再次实验，可以发现网页中指定的插值位置被替换成了文本“0”后，无论我们再怎么单击按钮，标题也不会再改变。

还有一点需要注意，如果要插值的文本为一段HTML代码，则直接使用双括号就不太好使了，双括号会将其内的变量解析成纯文本。例如，定义Vue组件App中的数据如下：

如果使用双括号插值的方式将HTML代码插入，最终的效果会将其以文本的方式渲染出来，代码如下：

     <h1 v-once>这里是模板的内容:{{countHTML}}次点击</h1>

运行效果如图2-1所示。

图2-1　使用双括号进行HTML插值

这种效果明显不符合我们的预期，对于HTML代码插值，我们需要使用v-html指令来完成，示例代码如下：

     <h1 v-once>这里是模板的内容:<span v-html="countHTML"></span>次点击</h1>

V-html指令可以指定一个Vue变量数据，其会通过HTML解析的方式将原始HTML替换到其指定的标签位置，如以上代码运行后的效果如图2-2所示。

图2-2　使用v-html进行HTML插值

前面介绍了如何在标签内部进行内容的插值，我们知道，标签除了其内部的内容外，本身的属性设置也是非常重要的，例如我们可能需要动态改变标签的style属性，从而实现元素渲染样式的修改。在Vue中，我们可以使用属性插值的方式做到标签属性与变量的绑定。

对于标签属性的插值，Vue中不再使用双括号的方式，而是使用v-bind指令，示例代码如下：

     <h1 v-bind:id="id1">这里是模板的内容:{{count}}次点击</h1>

定义一个简单的CSS样式如下：

再添加一个名为id1的Vue组件属性，代码如下：

运行代码，可以看到我们已经将id属性动态地绑定到了指定的标签中，当Vue组件中id1属性的值发生变化时，其也会动态地反映到h1标签上，我们通过这种动态绑定的方式灵活地更改标签的样式表。v-bind指令同样适用于其他HTML属性，只需要在其中使用冒号加属性名的方式指定即可。

其实，无论是双括号方式的标签内容插值还是v-bind方式的标签属性插值，除了可以直接将变量插值外，也可以使用基本的JavaScript表达式，例如：

     <h1 v-bind:id="id1">这里是模板的内容:{{count + 10}}次点击</h1>

上面的代码运行后，页面上渲染的数值是count属性增加10之后的结果。有一点需要注意，所有插值的地方如果使用表达式，则只能使用单个表达式，否则会产生异常。