Vue 模板語法第一式 —— 插值

上一回：Vue 的初階黑魔法 —— 模板語法

書接上文，上一回我們講到了 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 模板語法的插值有幾種用法呢？一共是四種：

1. 文本插值
2. HTML 插值
3. v-bind 指令
4. 表達式

接下來，我們分別地來講一說吧。

文本插值

說到這文本插值啊，它但是 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 } }}
複製代碼

好吧！一會兒說了這麼多，這下你也該滿意了吧？！