文本
數據綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值:
無論何時,綁定的數據對象上 msg 屬性發生了改變,插值處的內容都會更新。
通過使用 v-once 指令,你也能執行一次性地插值,當數據改變時,插值處的內容不會更新。
效果:
輸出html
雙大括號會將數據解釋為純文本,而非 HTML 。為了輸出真正的 HTML ,你需要使用 v-html 指令:
效果:
屬性
雙大括號不能在 HTML 屬性中使用,該使用 v-bind 指令:
效果:
這對布爾值的屬性也有效 —— 如果條件被求值為 false 的話該屬性會被移除
使用 JavaScript 表達式
有個限制就是,每個綁定都只能包含單個表達式,所以下面的例子都不會生效。
過濾器
Vue.js 允許你自定義過濾器,被用作一些常見的文本格式化。過濾器應該被添加在雙大括號插值的尾部,由“管道符”指示:
如下過濾器代碼實現大寫首字母:
過濾器可以串聯:
過濾器是 JavaScript 函數,因此可以接受參數:
這裡,字符串 ‘arg1’ 將傳給過濾器作為第二個參數, arg2 表達式的值將被求值然後傳給過濾器作為第三個參數。
指令
指令 (Directives) 是帶有 v- 前綴的特殊特性。指令特性的值預期是單個 JavaScript 表達式 (v-for 是例外情況,稍後我們再討論)。指令的職責是,當表達式的值改變時,將其產生的連帶影響,響應式地作用於 DOM。回顧我們在vue.js初入門二中看到的例子:
這裡,v-if 指令將根據表達式 seen 的值的真假來插入/移除
元素。
一些指令能夠接收一個“參數”,在指令名稱之後以冒號表示。例如,v-bind 指令可以用於響應式地更新 HTML 特性:
在這裡 href 是參數,告知 v-bind 指令將該元素的 href 特性與表達式 url 的值綁定。
另一個例子是 v-on 指令,它用於監聽 DOM 事件:
v-bind和v-on,詳見vue.js初入門二。
縮寫
v-bind 縮寫
v-on 縮寫
修飾符
修飾符(Modifiers)是以半角句號 . 指明的特殊後綴,用於指出一個指定應該以特殊方式綁定。例如,.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault():