Vue 數據綁定語法

數據綁定語法

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 攻擊。記住，只對可信內容使用 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 的值綁定。可能你已注意到能夠用特性插值 href="{{url}}" 得到一樣的結果：這樣沒錯，而且實際上在內部特性插值會轉爲 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 支持的瀏覽器中都能被正確地解析，而且不會出如今最終渲染的標記中。縮寫語法徹底是可選的，不過隨着一步步學習的深刻，你會慶幸擁有它們。