通過使用 v-once 指令,你也能執行一次性地插值,當數據改變時,插值處的內容不會更新。但請留心這會影響到該節點上的其它數據綁定:
|
指令是帶有 v- 前綴的特殊屬性。
指令用於在表達式的值改變時,將某些行爲應用到 DOM 上。
數據綁定最常見的形式就是使用 {{...}}(雙大括號)的文本插值
使用 v-html 指令用於輸出 html 代碼
HTML 屬性中的值應使用 v-bind 指令。
v-if 指令將根據表達式 seen 的值(true 或 false )來決定是否插入元素。
修飾符是以半角句號 . 指明的特殊後綴,用於指出一個指令應該以特殊方式綁定。
v-model 指令用來在 input、select、text、checkbox、radio 等表單控件元素上創建雙向數據綁定,根據表單上的值,自動更新綁定的元素的值。
按鈕的事件我們可以使用 v-on 監聽事件,並對用戶的輸入進行響應。
v-for 指令需要以 site in sites 形式的特殊語法, sites 是源數據數組並且 site 是數組元素迭代的別名。
我們可以使用 methods 來替代 computed,效果上兩個都是一樣的,但是 computed 是基於它的依賴緩存,只有相關依賴發生改變時纔會重新取值。而使用 methods ,在重新渲染的時候,函數總會重新調用執行。
事件修飾符
Vue.js 爲 v-on 提供了事件修飾符來處理 DOM 事件細節,如:event.preventDefault() 或 event.stopPropagation()。
Vue.js通過由點(.)表示的指令後綴來調用修飾符。
.stop
.prevent
.capture
.self
.once
<!-- 阻止單擊事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form> <!-- 添加事件偵聽器時使用事件捕獲模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只當事件在該元素本身(而不是子元素)觸發時觸發回調 --> <div v-on:click.self="doThat">...</div> <!-- click 事件只能點擊一次,2.1.4版本新增 --> <a v-on:click.once="doThis"></a>
自定義事件
父組件是使用 props 傳遞數據給子組件,但如果子組件要把數據傳遞回去,就需要使用自定義事件!
我們可以使用 v-on 綁定自定義事件, 每個 Vue 實例都實現了事件接口(Events interface),即:
- 使用
$on(eventName)
監聽事件 - 使用
$emit(eventName)
觸發事件
另外,父組件可以在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件。
鉤子
鉤子函數
指令定義函數提供了幾個鉤子函數(可選):
-
bind
: 只調用一次,指令第一次綁定到元素時調用,用這個鉤子函數可以定義一個在綁定時執行一次的初始化動作。 -
inserted
: 被綁定元素插入父節點時調用(父節點存在即可調用,不必存在於 document 中)。 -
update
: 被綁定元素所在的模板更新時調用,而不論綁定值是否變化。通過比較更新前後的綁定值,可以忽略不必要的模板更新(詳細的鉤子函數參數見下)。 -
componentUpdated
: 被綁定元素所在模板完成一次更新週期時調用。 -
unbind
: 只調用一次, 指令與元素解綁時調用。
鉤子函數參數
鉤子函數的參數有:
- el: 指令所綁定的元素,可以用來直接操作 DOM 。
- binding: 一個對象,包含以下屬性:
- name: 指令名,不包括
v-
前綴。 - value: 指令的綁定值, 例如:
v-my-directive="1 + 1"
, value 的值是2
。 - oldValue: 指令綁定的前一個值,僅在
update
和componentUpdated
鉤子中可用。無論值是否改變都可用。 - expression: 綁定值的表達式或變量名。 例如
v-my-directive="1 + 1"
, expression 的值是"1 + 1"
。 - arg: 傳給指令的參數。例如
v-my-directive:foo
, arg 的值是"foo"
。 - modifiers: 一個包含修飾符的對象。 例如:
v-my-directive.foo.bar
, 修飾符對象 modifiers 的值是{ foo: true, bar: true }
。
- name: 指令名,不包括
- vnode: Vue 編譯生成的虛擬節點。
- oldVnode: 上一個虛擬節點,僅在
update
和componentUpdated
鉤子中可用。