自定义指令


除了默认设置的核心指令(如:v-model,v-for),Vue.js也允许注册自定义指令,自定义指令提供一种机制将数据的变化映射为DOM行为


Vue.js用 Vue.directive(id, definition)方法注册一个全局自定义指令,它接收两个参数:指令ID和定义对象。也可以用组建的directives选项注册一个局部自定义指令


例如:聚焦一个 input 元素


    


当页面加载时,元素将获得焦点。事实上,你访问后还没点击任何内容,input 就获得了焦点。


也可以注册局部指令,组件中接受一个 directives 的选项:

directives: {
    focus: {
        // 指令的定义---
    }
}


钩子函数

Vue.js提供了几个钩子函数(都是可选的,相互之间没有制约关系):

bind  --  只调用一次,指令第一次绑定到元素上时使用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作


inserted  --  被绑定元素插入父节点时调用(父节点存在即可调用,不必存在document中)


update  --  被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新


componentUpdated  --  被绑定元素所在的模板完成一次更新周期时调用 


unbind  --  只调用一次,指令与元素解绑时调用


Vue.directive('my-directive',{
    bind:function(){
        //准备工作
        //例如,添加事件处理器或只需要运行一次的高耗任务
    },
    update:function(newValue, oldValue){
        //值更新时的工作
        //也会以初始值为参数调用一次
    },
    unbind:function(){
        //清理工作
        //例如,删除bind()添加的事件监听器
    }
})


在注册之后,便可以在Vue.js模板中这样用(记着添加前缀 v-):