本章節將詳細介紹 Vue.js 模板語法，如果對 HTML +Css +JavaScript 有一定的了解，學習起來將信手拈來。

Vue.js 使用了基於 HTML 的模版語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。在底層的實現上， Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，在應用狀態改變時， Vue 能夠智能地計算出重新渲染組件的最小代價並應用到 DOM 操作上。

插值

文本

文本插值是最常見的一種數據綁定方式，語法是使用雙括號（Mustache）將變量包含。

實例

<div id="app">
    <p>{{ message }}</p>
</div>

<script>
    var app = new Vue({
        el: ‘#app‘,
        data: {
            message: ‘Hello World! Vue‘
        }
    })
</script>
 

上述 HTML 代碼中的 message 與 script 中 data 的 message 屬性綁定，兩者數據同步，當我們更新data中對應的屬性值時，無需操作 HTML，頁面會自動更新數據。

我們也可以使用 v-once 指令，表示只執行一次插值，後面如果數據有改變，插值將不會更新。

實例

<div id="app">
    <p v-once>{{ message }}</p>
</div>

<script>
    var app = new Vue({
        el: ‘#app‘,
        data: {
            message: ‘Hello World! Vue‘
        }
    })
</script>
 

HTML

輸出 HTML 代碼，可以使用 v-html 指令。

實例

<div id="app">
    <p v-once>{{ message }}</p>
    <p v-html="html"></p>
</div>

<script>
    var app = new Vue({
        el: ‘#app‘,
        data: {
            message: ‘Hello World! 歡迎學習Vue‘,
            html:‘<font color="red">這是我的標題</font>‘
        }
    })
</script>
 

上述代碼會將 message 中的值作為 HTML 元素插入 <p></p> 中

註意：在頁面上動態的渲染html是一件很危險的事情，因為它很容易導致 XSS 攻擊 (跨站腳本攻擊)。 在vue的官方文檔也有說明這一點

屬性

要給 HTML 元素綁定屬性，不能直接使用文本插值，vue 有特定的指令 【v-bind】進行屬性的綁定。

實例

<div id="app">
    <h2 v-bind:class="value">v-bind</h2>
</div>

<script>
var app = new Vue({
    el: "#app",
    data: {
        value: "bind"
    }
})
</script>

上述代碼中，我們為 h2 標簽添加了一個 class=“bind” 的屬性。

屬性的插值使用比較頻繁，所以vue也提供了該指令的簡寫【:】，一個冒號，效果跟使用【v-bind:】一樣。

實例

<div id="app">
    <h2 v-bind:id="id" :class="v_class" :title="v_title">vue 多屬性綁定</h2>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            id:"test_id",
            v_class: "v_class",
            v_title:"vue 的v-bind多屬性綁定"
        }
    })
</script>

JavaScript 表達式

上述介紹的幾種插值方式都是簡單的鍵值綁定，但在實際開發中，部分值要根據一些規則進行處理，這時候可以使用 JavaScript 表達式來實現。

實例

<div id="app">
    <h2 v-bind:id="id" :class="v_class" :title="v_title">vue 多屬性綁定</h2>
    <!-- toLowerCase(),將字母轉換為小寫 -->
    <h2>{{name.toLowerCase()}}</h2>  <!--這裏返回為pzkloveyou -->
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            id:"test_id",
            v_class: "v_class",
            v_title:"vue 的v-bind多屬性綁定",
            name:‘PZKLOVEYOU‘
        }
    })
</script>

上述代碼在輸出時把大寫的 PZKLOVEYOU 轉換成了小寫的 pzkloveyou。

註意：使用 JavaScript 表達式進行運算時，只能使用單個表達式或者鏈式調用，不能使用語句。

指令

指令指的是帶有【v-】前綴的特殊屬性，在插值中，我們已經使用了【v-html】和【v-bind】這兩個指令。可以看出，指令的職責是當表達式的值改變時，響應式地作用於 DOM。

參數

<a v-bind:href="url"></a>

上述代碼中 href 就是【v-bind】指令的參數，告知【v-bind】指令將 href 屬性和 url 的值綁定在一起。

修飾符

修飾符（Modifiers）是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。

<form v-on:submit.prevent="onSubmit"></form>

上述代碼中，.prevent 是一個修飾符，告訴【v-on】指令對於觸發的事件調用 event.preventDefault()。

更多關於修飾符的知識我們將在後續章節學習。

過濾器

對於一些要經過復雜計算才顯示的插值，簡單的表達式可能無法滿足，這時可以使用vue的過濾器進行處理。 過濾器在插值和【v-bind】指令中使用，格式如下：

<!-- 在兩個大括號中 -->
{{ name | myfilters }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

實例

<div id="app">
    <h2>{{name | myfilter}}</h2>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            name: "pzk"
        },
        filters: {
            myfilter(value) {
                return value.split(‘‘).reverse().join(‘‘);   //函數返回的是kzp
            }
        }
    })
</script>

上述代碼中定義了一個myfilters的過濾器，功能是將插值進行反轉後輸出。

多個過濾器可以串聯使用，下面實例是在一個插值中使用了兩個過濾器：

實例

<div id="app">
    <p>{{name | myfilter}}</p>
    <p>{{name | myfilter1 | touppercase}}</p>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            name: "pzk"
        },
        filters: {
            myfilter(value) {
                return value.split(‘‘).reverse().join(‘‘);   //函數返回的是kzp
            },
            myfilter1(value) {
                return value.split(‘‘).reverse().join(‘‘); //函數返回的是kzp 同上，在這裏只是做一個小小的區別
            },
            touppercase(value) {
                return value.toUpperCase(); //函數返回的是KZP   字母變成大寫
            }
        }
    })
</script>

上述代碼中過濾器從左到右依次執行，先將插值反轉，然後再轉換成大寫輸出。

縮寫

對於【v-on】和【v-bind】這兩個最常使用的指令，vue提供了簡寫。

v-bind
<!-- 完整語法 -->
<a v-bind:href="url"></a>

<!-- 縮寫 -->
<a :href="url"></a>
v-on
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>

<!-- 縮寫 -->
<a @click="doSomething"></a>

本章完，都是一些比較簡單的知識分享，敬請下次的分享。

Vue.js 模板語法