书接上文，上一回咱们讲到了 Vue 的黑魔法 —— 模板语法，但是咱们只是解释了什么是模板语法。关于 Vue 的模板语法要怎么使用，具体又包含哪些内容，咱们现在是一概不知。那么接下来，就让咱们慢慢走进 Vue 的模板语法，首先要来讲的就是模板语法的第一式 —— 插值。
什么是插值
那么问题来了，什么是插值啊？每次遇到一个新的概念，心都好累！关键是 Vue 官方并没有给出解释，而是直接给了具体的用法而已。
上一回咱们讲到模板语法的时候，说了模板语法通过 Vue 框架就可以绑定到对应 Vue 实例的数据内容。换句话讲，模板语法就是把 Vue 实例的数据展示在 HTML 网页中。而现在咱们说的插值，就是把这些数据展示文本内容、浏览器解析后的结果、HTML 标签属性之类的。
比如下面这段代码示例，就是把数据展示成文本内容的：
<div id="app">
<h2>{{ message }}</h2>
</div>
<script src="scripts/vue.js"></script>
<script>
// 创建Vue的实例对象
var app = new Vue({
el: '#app',
data: {
// 存储在Vue的实例对象中
message: '前端课湛'
}
});
</script>
复制代码上面这段代码中的 {{ message }} 就是插值了。
Vue 模板语法的插值有几种用法呢？一共是四种：
- 文本插值
- HTML 插值
- v-bind 指令
- 表达式
接下来，咱们分别地来说一说吧。
文本插值
说到这文本插值啊，它可是 Vue 实现数据绑定中最常见的一种形式。不仅如此，文本插值还有一个名字，叫做“Mustache”语法。又是个新概念，心太累了！说白了，就是一对花括号的写法，就像 {{ message }} 这种就是文本插值了。其实很简单吧？！
<div id="app">
<h2>{{ message }}</h2>
</div>
<script src="scripts/vue.js"></script>
<script>
// 创建Vue的实例对象
var app = new Vue({
el: '#app',
data: {
// 存储在Vue的实例对象中
message: '前端课湛'
}
});
</script>
复制代码刚刚用到的这段代码就是文本插值的示例代码啦。不过，这块需要注意一下哈！就是 Vue 实例中的 message 的值变化的时候，对应插值处也会跟着更新。比如，上面这段代码运行之后，咱们在浏览器的控制台来改变 message 的值，插值处也会改变的。
如果想要插值处不跟着数据变化而变化的话，咱们也是有办法的。Vue 提供了 v-once 指令，这个指令就可以不让插值处跟着数据变化二变化了。
这时候你可能会吐槽了，心真尼玛累！咋又来个新概念，啥是指令啊？简单来说，指令就是 Vue 提供的 HTML 标签的自定义属性，你可以先这么理解。
闲言少叙，书归正传。
上面那段代码示例，咱们只需要在对应的标签中定义 v-once 指令就行了。就像下面这样示儿的：
<div id="app">
<h2 v-once>{{ message }}</h2>
</div>
<script src="scripts/vue.js"></script>
<script>
// 创建Vue的实例对象
var app = new Vue({
el: '#app',
data: {
// 存储在Vue的实例对象中
message: '前端课湛'
}
});
</script>
复制代码上面这段代码有兴趣你自己运行去吧，自己看看效果。
HTML 插值
文本插值说明白了之后，咱们来看看 HTML 插值吧。说到这个 HTML 插值吧，我是觉得就是增强版的文本插值。为啥这么说呢？因为文本插值只能把文本展示在插值处，但是如果数据本身就是一段 HTML 代码呢？文本插值就会原封不动地把这段 HTML 代码展示出来。不信？咱来试试：
<div id="app">
{{ message }}
</div>
<script src="scripts/vue.js"></script>
<script>
// 创建Vue的实例对象
var app = new Vue({
el: '#app',
data: {
// 存储在Vue的实例对象中
message: '<span style="color: lightcoral">前端课湛</span>'
}
});
</script>
复制代码上面这段代码示例中的数据就是 <span style="color: lightcoral">前端课湛</span> 这样一段 HTML 代码，文本插值会把这段 HTML 代码原封不动地展示出来。
这个时候，要想浏览器去解析这段 HTML 代码的话，就需要使用 Vue 提供的 HTML 插值了。这个 HTML 插值其实就是 v-html 指令。
<div id="app">
<span v-html=message></span>
</div>
<script src="scripts/vue.js"></script>
<script>
// 创建Vue的实例对象
var app = new Vue({
el: '#app',
data: {
// 存储在Vue的实例对象中
message: '<span style="color: lightcoral">前端课湛</span>'
}
});
</script>
复制代码这样修改代码之后，运行的时候浏览器就会解析这段 HTML 代码了。
HTML 插值在使用的时候也需要注意一个问题，就是 HTML 插值可能会引起 XSS 攻击。啥？这一回心真真尼玛累啊！XSS 攻击咱就不解释了，好奇的话自行百度吧。
所以，啥意思呢？就是要告诉你啊，如果你要用 HTML 插值的话，那这个数据是不能交给用户提供的。不然，就很危险了！
v-bind 指令
讲到这儿啊，你是不是觉得 Vue 的模板语法还是挺强大的？可是还不够呢！HTML 标签还有属性呢，这个能不能也同样实现绑定到 Vue 实例的数据呢？答案是肯定的。不是肯定的咱说它干啥，真是的。
那具体怎么来实现呢？这就需要用到 Vue 的 v-bind 指令啦。废话不多说，咱们来看一段示例代码吧。
<div id="app">
<span v-bind:title="message"></span>
</div>
<script src="scripts/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'this is message.'
}
});
</script>
复制代码上面这段代码运行之后，就会把数据绑定到 v-bind 指令的 title 属性上。
牛掰吧？！现在文本内容、HTML 代码解析，还有 HTML 标签的属性都有了。
表达式
不仅如此呢！Vue 还允许使用 JavaScript 表达式呢。关于啥是 JavaScript 的表达式，如果你知不道的话，那你为啥要学 Vue 呢？！拉出去枪毙五分钟，再重新去补 JavaScript 基础去！
比如下面这些都是 JavaScript 表达式：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
复制代码这里还要说一个需要注意的地方，Vue 支持表达式是有个限制的，就是每个数据的绑定只能支持单个表达式。换句话讲，多个表达式或者语句啥的都不支持呢！
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
复制代码好吧！一下子说了这么多，这下你也该满意了吧？！
转载于:https://juejin.im/post/5cf7cd86e51d4558936aa040