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

站在用戶的角度思考問題，與客戶深入溝通，找到肅南裕固族自治網(wǎng)站設(shè)計與肅南裕固族自治網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設(shè)計制作、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、主機域名、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋肅南裕固族自治地區(qū)。

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

插值

文本

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

Message: {{ msg }}

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

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

This will never change: {{* msg }}

原始的 HTML

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

{{{ raw_html }}}

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

在網(wǎng)站上動態(tài)渲染任意 HTML 是非常危險的，因為容易導(dǎo)致 XSS 攻擊。記住，只對可信內(nèi)容使用 HTML 插值，永不用于用戶提交的內(nèi)容。

HTML 特性

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

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

綁定表達(dá)式

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

JavaScript 表達(dá)式

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

{{ number + 1 }}

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

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

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

{{ var a = 1 }}


{{ if (ok) { return message } }}

過濾器

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

{{ message | capitalize }}

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

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

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

{{ message | filterA | filterB }}

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

{{ message | filterA 'arg1' arg2 }}

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

指令

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

Hello!

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

元素。

參數(shù)

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

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

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

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

修飾符

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

當(dāng)然，這似乎沒有意義，因為我們只需要使用 href="/a/b/c" rel="external nofollow" 而不必使用一個指令。這個例子只是為了演示語法。后面我們將看到修飾符更多的實踐用法。

縮寫

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

v-bind 縮寫

Button


Button

v-on 縮寫

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。