書接上文，上一回我們們講到了 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 } }}
複製程式碼好吧！一下子說了這麼多，這下你也該滿意了吧？！