Vue2.5筆記：Vue中的模版

我們在上一篇說到如何把 Vue 實例中的數據顯示到視圖中，就會需要用到我們的模版，我們只是簡單的使用了一些，模版其實還有很多其他的特性。今天我們就來看看模版的其他特性。

模版語法

Vue 中的模版是基於 HTML 的模版語法，所有的 Vue 模版都是合法的 HTML ，所以能被遵循規範的瀏覽器和 HTML 解析器解析。這也非常符合 Vue 的易用的特點減少開發者的學習成本。

在底層實現上，Vue 將模版編譯成虛擬 DOM 渲染函數，結合響應式系統，Vue 能夠智能地計算出最少需要重新渲染多少組件，並把 DOM 操作次數減到最少。

但是如果你是 React 的開發者或者你熟悉虛擬 DOM 並且偏愛原生 Javascript，你完全可以不使用模版，而是直接使用渲染函數（render）或者使用 JSX 語法。

<div id="root">
    <h1>超帥的 {{name}}</h1>
</div>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            name: 'Modeng'
        }
    });
</script>

可以看到我們想要的效果顯示出來了，在這裡我們用到了模版最常見的數據綁定形式 “Mustache”語法 (雙大括弧) 語法，Mustache 標簽將會被數據中相對應的屬性替換，並且綁定的對象的屬性發生了改變，差值處的內容也會響應的改變。

開心一刻：Mustache 的中文意思是鬍子，但是我怎麼看 {{ }} 這個也不像鬍子啊，不知道老外怎麼起的這個名字。

有人可能會想到 Mustache 語法是不是也可以綁定 HTML 元素的屬性呢？

<h1 id="{{id}}"></h1>

其實這裡是不能這麼做的，Mustache 語法不能用來綁定 HTML 元素的屬性，那如果我們需要綁定元素的屬性 Vue 給我們提供了一個指令方法 v-bind利用這個我們可以進行元素屬性的綁定。

上面說到只要修改我們綁定的數據差值綁定的內容也會跟著替換，不過 Vue 中給我們提供了一個指令可以改變這一特性，我們可以通過使用 v-once 指令當數據改變時我們的內容也不會被替換。

表達式

模版中不僅僅可以進行簡單的數據綁定操作，我們還可以在模版中進行簡單的 Javascript 表達式。

<div id="root">
    <h1>超帥的 {{name}} 僅僅只有 {{age + 1}} 歲</h1>
</div>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            name: 'Modeng',
            age: 14
        }
    });
</script>

這裡支持＋、－、＊、／四個運算方法；除了運算方法之外，我們還可以使用 三元表達式 我們來看看一個例子

<div id="root">
    <h1>超帥的 {{name}} {{ realAge > 18 ? '不是' : '是' }} 未成年 </h1>

    <h1>超帥的 {{name}} {{ fakeAge > 18 ? '不是' : '是' }} 未成年 </h1>
</div>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            name: 'Modeng',
            realAge: 14,
            fakeAge: 20
        }
    });
</script>

既然我們用到了三元表達式 我們肯定會想到 if 語句，但是 Vue 只提供我們在模版中使用比較簡單的表達式（單個表達式），如果你的邏輯比較複雜，你不應該在模版中進行，而且應該在我們的實例的方法內進行。

下麵我們繼續看一個例子，我們如何利用它進行字元的反轉效果。

<div id="root">
    <h1>{{ name }} </h1>
    <h1>{{ name.split("").reverse().join("") }} </h1>
</div>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            name: 'Modeng'
        }
    });
</script>

我們可以看到 Mustache 語法非常的強大，上面的表達式我們只是使用了一個方面，我們還可以進行很多方面的應用。

Vue 中除了使用 Mustache 語法（ {{ }} ）將數據插入到模版中，我們還可以使用兩個指令 v-text 和 v-html 進行數據到插入。

我們在使用模版的時候不僅僅只有數據的插入有時候我們也會根據一定的條件進行模版渲染，這時候我們就可以用 v-if 和 v-show，不僅如此我們還會經常進行列表和模版的迴圈我們會用到 v-for 指令。這些在後續的章節中我們會一一說到。

模版的渲染

在文章的一開始我們已經提到，Vue 的模版是基於 HTML 的，我們也可以使用虛擬 DOM 和 JSX 語法。

從上面的圖中我們看到 Vue 的整個模版的渲染過程，首先我們的模版編譯為AST（抽象語法樹），再由 AST 生成渲染函數，由渲染函數結合數據生成 Virtual DOM 樹，之後對Virtual DOM 進行 diff 和 path之後生成新的 UI

總結

本文主要進行來模版語法的介紹，我們不僅僅可以使用它將數據插入在模版中，還可以進行簡單的表達式的計算。我們也簡單的敘述了模版編譯的整個流程。當然了模版渲染的過程中還有很多的細節我們沒有說明，但是一點也不影響我們對於項目的開發與使用 Vue 如果你對整個渲染的細節非常感興趣也可以自信查閱資料進行瞭解。

本文原創文章發佈於微信公眾號：Modeng。關註並回覆 「前端書籍」百本經典技術書籍免費領取，你懂的！