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。關注並回復 「1024」領取程序員大禮包