1. 程式人生 > >vue 1.0相關特性(2)

vue 1.0相關特性(2)

非同步更新佇列

vue.js預設非同步更新DOM,每當觀察到資料變化時,Vue就開始一個佇列,將同一事件迴圈內所有資料的變化快取起來。如果一個watcher被多次觸發,只會推入一次到佇列中,等到下一次事件迴圈,Vue將清空佇列,只進行必要的DOM更新。

如果想要在更新資料之後完成Vue.js完成更新DOM,可以在資料變化之後使用vue.nextTick(callback) 回撥在DOM更新完成後呼叫

自定義指令

基礎

可自定義全域性指令和區域性指令

Vue.directive(id,definition) //註冊全域性指令

鉤子函式

  • bind
    :只調用一次,在指令第一次繫結到元素上呼叫
  • update:在bind之後立即以初始值為引數第一次呼叫,之後每次當繫結值發生變化時呼叫,引數為新值和舊值。
  • unbind:只調用一次,在指令從元素上解綁時呼叫。
Vue.directive('my-directive',{
	bind: function () {
	// 準備工作,和只需要執行一次的高耗任務
	},
	update: function (newValue,oldValue) {
	//值更新時呼叫
	},
	unbind: function () {
	//清理工作
	}
})
//呼叫
<div v-my-directive=""></div>

指令例項屬性

所有的鉤子函式將被複制到實際的指令物件中,鉤子內的this指向這個指令物件,這個物件暴露了一些有用的屬性:

  • el: 指令繫結的元素
  • vm: 擁有該指令的上下文ViewModel
  • expression 指令的表示式
  • arg 指令的引數
  • name 指令的名字
  • modifiers 一個物件,包含指令的修飾符
  • descriptor 一個物件,包含指令的解析結果