1)Vue.directive(名字',{
? ? ? ? ? ? inserted:function(el){? /*這個元素插入父元素的時候執(zhí)行的操作*/
? ? ? ? ? ? ? ? el.focus();
? ? ? ? ? ? }
})
2)
directives:{
? ? ? ? ? ? ? ? ? 'focus':{
? ? ? ? ? ? ? ? ? ? ? ? inserted:function(el){? /*這個元素插入父元素的時候執(zhí)行*/
? ? ? ? ? ? ? ? ? ? ? ? ? ? el.focus();
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
鉤子函數(shù)
bind: 只調(diào)用一次谤饭,指令第一次綁定到元素時調(diào)用,用這個鉤子函數(shù)可以定義一個在綁定時執(zhí)行一次的初始化動作剪撬。
inserted: 被綁定元素插入父節(jié)點時調(diào)用蝶俱。(bind與該生命周期鉤子函數(shù)作用十分類似)
update: 被綁定元素所在的模板更新時調(diào)用勇蝙,而不論綁定值是否變化壶辜。通過比較更新前后的綁定值泞坦,可以忽略不必要的模板更新肮蛹。
componentUpdated: 被綁定元素所在模板完成一次更新周期時調(diào)用刻帚。
簡寫形式
1)
Vue.directive('bgcolor',function(el,binding){
? ? ? ? ? ? el.style.background=binding.value;
})
2)directives:{
? ? ? ? ? ? ? /*簡寫 表示bind 和update的時候都會執(zhí)行*/
? ? ? ? ? ? ? ? ? ? 'color':function(el,binding){?
? ? ? ? ? ? ? ? ? ? ? ? el.style.color=binding.value;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? }