Vue.js每天必學之資料雙向綁定

Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML，且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板，请记住这点。

插值

文本

数据绑定最基础的形式是文本插值，使用 “Mustache” 语法（双大括号）：

45a2772a6b6107b401db3c9b82c049c2Message: {{ msg }}54bdf357c58b8a65c66d7c19c8e4d114

Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。

你也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：

45a2772a6b6107b401db3c9b82c049c2This will never change: {{* msg }}54bdf357c58b8a65c66d7c19c8e4d114

原始的 HTML

双 Mustache 标签将数据解析为纯文本而不是 HTML。为了输出真的 HTML 字符串，需要用三 Mustache 标签：

dc6dce4a544fdca2df29d5ac0ea9906b{{{ raw_html }}}16b28748ea4df4d9c2150843fecfba68

内容以 HTML 字符串插入——数据绑定将被忽略。如果需要复用模板片断，应当使用 partials。

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。记住，只对可信内容使用 HTML 插值，**永不**用于用户提交的内容。

HTML 特性

Mustache 标签也可以用在 HTML 特性 (Attributes) 内：

02d2b8f69afd719d73188be9022421d916b28748ea4df4d9c2150843fecfba68

注意在 Vue.js 指令和特殊特性內不能用插值。不必擔心，如果 Mustache 標籤用錯了地方 Vue.js 會給予警告。

綁定表達式

放在 Mustache 標籤內的文字稱為綁定表達式。在 Vue.js 中，一段綁定表達式由一個簡單的 JavaScript 表達式和可選的一個或多個過濾器構成。

JavaScript 表達式

到目前為止，我們的模板只綁定到簡單的屬性鍵。不過實際上Vue.js 在資料綁定內支援全功能的JavaScript 運算式：

{{ number + 1 }}

{{{sp ? 'YES' : 'NO' }}

{{ message.split ok ('').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 }}

{{ message | filterA 'arg1' arg2 }}

函式值作為第一個參數。帶引號的參數視為字串，而不帶引號的參數是按表達式計算。這裡，字串 'arg1' 將傳給過濾器作為第二個參數，表達式 arg2 的值在計算出來之後作為第三個參數。

指令

指令 (Directives) 是特殊的帶有前綴 v- 的特性。指令的值限定為綁定表達式，因此上述的 JavaScript 表達式及過濾器規則在這裡也適用。指令的職責就是當其表達式的值改變時把某些特殊的行為應用到 DOM 上。我們來回頭看下「概述」裡的例子：

Hello!

這裡v-if 指令將根據表達式greeting 值的真假刪除/插入 元素。

參數

有些指​​令可以在其名稱後面帶一個「參數」 (Argument)，中間放一個冒號隔開。例如，v-bind 指令用於回應地更新HTML 特性：

這裡href 是參數，它告訴v-bind 指令將元素的href 特性跟表達式url 的值綁定。也許你已經注意到可以用特性插值{% raw %}href="{{url}}"{% endraw %} 得到同樣的結果：這樣沒錯，並且實際上在內部特性插值會轉為v-bind綁定。

另一個例子是 v-on 指令，它用於監聽 DOM 事件：

這裡參數是被監聽的事件的名字。我們也會詳細說明事件綁定。

修飾符

修飾符 (Modifiers) 是以半角句號 . 開始的特殊後綴，用於表示指令應以特殊方式綁定。例如.literal 修飾詞告訴指令將它的值解析為一個字面字串而不是一個表達式：

當然，這似乎沒有意義，因為我們只需要使用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 支援的瀏覽器中都能被正確地解析，並且不會出現在最終渲染的標記中。縮寫語法完全是可選的，不過隨著一步步學習的深入，你會很高興擁有它們。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持PHP中文網。

更多Vue.js每天必學之資料雙向綁定相關文章請關注PHP中文網！ 🎜