數(shù)據(jù)綁定語(yǔ)法

Vue.js 的模板是基于 DOM 實(shí)現(xiàn)的。這意味著所有的 Vue.js 模板都是可解析的有效的 HTML，且通過(guò)一些特殊的特性做了增強(qiáng)。Vue 模板因而從根本上不同于基于字符串的模板，請(qǐng)記住這點(diǎn)。

插值

文本

數(shù)據(jù)綁定最基礎(chǔ)的形式是文本插值，使用 “Mustache” 語(yǔ)法（雙大括號(hào)）：

<span>Message: {{ msg }}</span>

Mustache 標(biāo)簽會(huì)被相應(yīng)數(shù)據(jù)對(duì)象的 msg 屬性的值替換。每當(dāng)這個(gè)屬性變化時(shí)它也會(huì)更新。

你也可以只處理單次插值，今后的數(shù)據(jù)變化就不會(huì)再引起插值更新了：

<span>This will never change: {{* msg }}</span>

原始的 HTML

雙 Mustache 標(biāo)簽將數(shù)據(jù)解析為純文本而不是 HTML。為了輸出真的 HTML 字符串，需要用三 Mustache 標(biāo)簽：

<div>{{{ raw_html }}}</div>

內(nèi)容以 HTML 字符串插入——數(shù)據(jù)綁定將被忽略。如果需要復(fù)用模板片斷，應(yīng)當(dāng)使用partials。

在網(wǎng)站上動(dòng)態(tài)渲染任意 HTML 是非常危險(xiǎn)的，因?yàn)槿菀讓?dǎo)致 XSS 攻擊。記住，只對(duì)可信內(nèi)容使用 HTML 插值，永不用于用戶(hù)提交的內(nèi)容。

HTML 特性

Mustache 標(biāo)簽也可以用在 HTML 特性 (Attributes) 內(nèi)：

<div id="item-{{ id }}"></div>

注意在 Vue.js 指令和特殊特性?xún)?nèi)不能用插值。不必?fù)?dān)心，如果 Mustache 標(biāo)簽用錯(cuò)了地方 Vue.js 會(huì)給出警告。

綁定表達(dá)式

放在 Mustache 標(biāo)簽內(nèi)的文本稱(chēng)為綁定表達(dá)式。在 Vue.js 中，一段綁定表達(dá)式由一個(gè)簡(jiǎn)單的 JavaScript 表達(dá)式和可選的一個(gè)或多個(gè)過(guò)濾器構(gòu)成。

JavaScript 表達(dá)式

到目前為止，我們的模板只綁定到簡(jiǎn)單的屬性鍵。不過(guò)實(shí)際上 Vue.js 在數(shù)據(jù)綁定內(nèi)支持全功能的 JavaScript 表達(dá)式：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

這些表達(dá)式將在所屬的 Vue 實(shí)例的作用域內(nèi)計(jì)算。一個(gè)限制是每個(gè)綁定只能包含單個(gè)表達(dá)式，因此下面的語(yǔ)句是無(wú)效的：

<!-- 這是一個(gè)語(yǔ)句，不是一個(gè)表達(dá)式： -->
{{ var a = 1 }}

<!-- 流程控制也不可以，可改用三元表達(dá)式 -->
{{ if (ok) { return message } }}

過(guò)濾器

Vue.js 允許在表達(dá)式后添加可選的“過(guò)濾器 (Filter) ”，以“管道符”指示：

{{ message | capitalize }}

這里我們將表達(dá)式 message 的值“管輸（pipe）”到內(nèi)置的 capitalize 過(guò)濾器，這個(gè)過(guò)濾器其實(shí)只是一個(gè) JavaScript 函數(shù)，返回大寫(xiě)化的值。Vue.js 提供數(shù)個(gè)內(nèi)置過(guò)濾器，在后面我們會(huì)談到如何開(kāi)發(fā)自己的過(guò)濾器。

注意管道語(yǔ)法不是 JavaScript 語(yǔ)法，因此不能在表達(dá)式內(nèi)使用過(guò)濾器，只能添加到表達(dá)式的后面。

過(guò)濾器可以串聯(lián)：

{{ message | filterA | filterB }}

過(guò)濾器也可以接受參數(shù)：

{{ message | filterA 'arg1' arg2 }}

過(guò)濾器函數(shù)始終以表達(dá)式的值作為第一個(gè)參數(shù)。帶引號(hào)的參數(shù)視為字符串，而不帶引號(hào)的參數(shù)按表達(dá)式計(jì)算。這里，字符串 'arg1' 將傳給過(guò)濾器作為第二個(gè)參數(shù)，表達(dá)式 arg2 的值在計(jì)算出來(lái)之后作為第三個(gè)參數(shù)。

指令

指令 (Directives) 是特殊的帶有前綴 v- 的特性。指令的值限定為綁定表達(dá)式，因此上面提到的 JavaScript 表達(dá)式及過(guò)濾器規(guī)則在這里也適用。指令的職責(zé)就是當(dāng)其表達(dá)式的值改變時(shí)把某些特殊的行為應(yīng)用到 DOM 上。我們來(lái)回頭看下“概述”里的例子：

<p v-if="greeting">Hello!</p>

這里 v-if 指令將根據(jù)表達(dá)式 greeting 值的真假刪除/插入 <p> 元素。

參數(shù)

有些指令可以在其名稱(chēng)后面帶一個(gè)“參數(shù)” (Argument)，中間放一個(gè)冒號(hào)隔開(kāi)。例如，v-bind 指令用于響應(yīng)地更新 HTML 特性：

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

這里 href 是參數(shù)，它告訴 v-bind 指令將元素的 href 特性跟表達(dá)式 url 的值綁定?？赡苣阋炎⒁獾娇梢杂锰匦圆逯?href="{{url}}" rel="external nofollow" 獲得同樣的結(jié)果：這樣沒(méi)錯(cuò)，并且實(shí)際上在內(nèi)部特性插值會(huì)轉(zhuǎn)為 v-bind 綁定。

另一個(gè)例子是 v-on 指令，它用于監(jiān)聽(tīng) DOM 事件：

<a v-on:click="doSomething">

這里參數(shù)是被監(jiān)聽(tīng)的事件的名字。我們也會(huì)詳細(xì)說(shuō)明事件綁定。

修飾符

修飾符 (Modifiers) 是以半角句號(hào) . 開(kāi)始的特殊后綴，用于表示指令應(yīng)當(dāng)以特殊方式綁定。例如 .literal 修飾符告訴指令將它的值解析為一個(gè)字面字符串而不是一個(gè)表達(dá)式：

<a v-bind:href.literal="/a/b/c"></a>

當(dāng)然，這似乎沒(méi)有意義，因?yàn)槲覀冎恍枰褂?href="/a/b/c" rel="external nofollow" 而不必使用一個(gè)指令。這個(gè)例子只是為了演示語(yǔ)法。后面我們將看到修飾符更多的實(shí)踐用法。

縮寫(xiě)

v- 前綴是一種標(biāo)識(shí)模板中特定的 Vue 特性的視覺(jué)暗示。當(dāng)你需要在一些現(xiàn)有的 HTML 代碼中添加動(dòng)態(tài)行為時(shí)，這些前綴可以起到很好的區(qū)分效果。但你在使用一些常用指令的時(shí)候，你會(huì)感覺(jué)一直這么寫(xiě)實(shí)在是啰嗦。而且在構(gòu)建單頁(yè)應(yīng)用（SPA ）時(shí)，Vue.js 會(huì)管理所有的模板，此時(shí) v- 前綴也沒(méi)那么重要了。因此Vue.js 為兩個(gè)最常用的指令 v-bind 和v-on 提供特別的縮寫(xiě)：

v-bind 縮寫(xiě)

<!-- 完整語(yǔ)法 -->
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>

<!-- 縮寫(xiě) -->
<a :href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>

<!-- 完整語(yǔ)法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>

<!-- 縮寫(xiě) -->
<button :disabled="someDynamicCondition">Button</button>

v-on 縮寫(xiě)

<!-- 完整語(yǔ)法 -->
<a v-on:click="doSomething"></a>

<!-- 縮寫(xiě) -->
<a @click="doSomething"></a>

它們看起來(lái)跟“合法”的 HTML 有點(diǎn)不同，但是它們?cè)谒?Vue.js 支持的瀏覽器中都能被正確地解析，并且不會(huì)出現(xiàn)在最終渲染的標(biāo)記中。縮寫(xiě)語(yǔ)法完全是可選的，不過(guò)隨著一步步學(xué)習(xí)的深入，你會(huì)慶幸擁有它們。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論