Vue.js 的模板是基於DOM 實現的。這意味著所有的Vue.js 模板都是可解析的有效的HTML，且通過一些特殊的特性做了增強。 Vue 模板因而從根本上不同於基於字符串的模板，請記住這點。
插值
文字
數據綁定最基礎的形式是文本插值，使用“Mustache” 語法（雙大括號）：
<span>Message: {{ msg }}</span>
Mustache 標籤會被相應數據對象的msg 屬性的值替換。每當這個屬性變化時它也會更新。
你也可以只處理單次插值，今後的數據變化就不會再引起插值更新了：
<span>This will never change: {{* msg }}</span>
原始的HTML
雙Mustache 標籤將數據解析為純文本而不是HTML。為了輸出真的HTML 字符串，需要用三Mustache 標籤：
<div>{{{ raw_html }}}</div>
內容以HTML 字符串插入――數據綁定將被忽略。如果需要復用模板片斷，應當使用partials。
在網站上動態渲染任意HTML 是非常危險的，因為容易導致[XSS 攻擊](https://en.wikipedia.org/wiki/Cross-site_scripting)。記住，只對可信內容使用HTML 插值，**永不**用於用戶提交的內容。
HTML 特性
Mustache 標籤也可以用在HTML 特性(Attributes) 內：
<div id="item-{{ id }}"></div>
注意在Vue.js 指令和特殊特性內不能用插值。不必擔心，如果Mustache 標籤用錯了地方Vue.js 會給出警告。
綁定表達式
放在Mustache 標籤內的文本稱為綁定表達式。在Vue.js 中，一段綁定表達式由一個簡單的JavaScript 表達式和可選的一個或多個過濾器構成。
JavaScript 表達式
到目前為止，我們的模板只綁定到簡單的屬性鍵。不過實際上Vue.js 在數據綁定內支持全功能的JavaScript 表達式：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
這些表達式將在所屬的Vue 實例的作用域內計算。一個限制是每個綁定只能包含單個表達式，因此下面的語句是無效的：
<!-- 這是一個語句，不是一個表達式： -->
{{ var a = 1 }}
<!-- 流程控制也不可以，可改用三元表達式-->
{{ if (ok) { return message } }}
過濾器
Vue.js 允許在表達式後添加可選的“過濾器(Filter) ”，以“管道符”指示：
{{ message | capitalize }}
這裡我們將表達式message 的值“管輸（pipe）”到內置的capitalize 過濾器，這個過濾器其實只是一個JavaScript 函數，返回大寫化的值。 Vue.js 提供數個內置過濾器，在後面我們會談到如何開發自己的過濾器。
注意管道語法不是JavaScript 語法，因此不能在表達式內使用過濾器，只能添加到表達式的後面。
過濾器可以串聯：
{{ message | filterA | filterB }}
過濾器也可以接受參數：
{{ message | filterA 'arg1' arg2 }}
過濾器函數始終以表達式的值作為第一個參數。帶引號的參數視為字符串，而不帶引號的參數按表達式計算。這裡，字符串'arg1' 將傳給過濾器作為第二個參數，表達式arg2 的值在計算出來之後作為第三個參數。
指令
指令(Directives) 是特殊的帶有前綴v- 的特性。指令的值限定為綁定表達式，因此上面提到的JavaScript 表達式及過濾器規則在這裡也適用。指令的職責就是當其表達式的值改變時把某些特殊的行為應用到DOM 上。我們來回頭看下“概述”裡的例子：
<p v-if="greeting">Hello!</p>
這裡v-if 指令將根據表達式greeting 值的真假刪除/插入<p> 元素。
參數
有些指令可以在其名稱後面帶一個“參數” (Argument)，中間放一個冒號隔開。例如，v-bind 指令用於響應地更新HTML 特性：
<a v-bind:href="url"></a>
這裡href 是參數，它告訴v-bind 指令將元素的href 特性跟表達式url 的值綁定。可能你已註意到可以用特性插值{% raw %}href="{{url}}"{% endraw %} 獲得同樣的結果：這樣沒錯，並且實際上在內部特性插值會轉為v-bind 綁定。
另一個例子是v-on 指令，它用於監聽DOM 事件：
<a v-on:click="doSomething">
這裡參數是被監聽的事件的名字。我們也會詳細說明事件綁定。
修飾符
修飾符(Modifiers) 是以半角句號. 開始的特殊後綴，用於表示指令應當以特殊方式綁定。例如.literal 修飾符告訴指令將它的值解析為一個字面字符串而不是一個表達式：
<a v-bind:href.literal="/a/b/c"></a>
當然，這似乎沒有意義，因為我們只需要使用href="/a/b/c" 而不必使用一個指令。這個例子只是為了演示語法。後面我們將看到修飾符更多的實踐用法。
縮寫
v- 前綴是一種標識模板中特定的Vue 特性的視覺暗示。當你需要在一些現有的HTML 代碼中添加動態行為時，這些前綴可以起到很好的區分效果。但你在使用一些常用指令的時候，你會感覺一直這麼寫實在是嗦。而且在構建單頁應用（SPA ）時，Vue.js 會管理所有的模板，此時v- 前綴也沒那麼重要了。因此Vue.js 為兩個最常用的指令v-bind 和v-on 提供特別的縮寫：
v-bind 縮寫
<!-- 完整語法--><a v-bind:href="url"></a><!-- 縮寫--><a :href="url"></a><!-- 完整語法--><button v-bind:disabled="someDynamicCondition">Button</button><!-- 縮寫--><button :disabled="someDynamicCondition">Button</button>
v-on 縮寫
<!-- 完整語法--><a v-on:click="doSomething"></a><!-- 縮寫--><a @click="doSomething"></a>
它們看起來跟“合法”的HTML 有點不同，但是它們在所有Vue.js 支持的瀏覽器中都能被正確地解析，並且不會出現在最終渲染的標記中。縮寫語法完全是可選的，不過隨著一步步學習的深入，你會慶幸擁有它們。
本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。