vue自定义指令

除了核心功能默认内置的指令（v-model和v-show），也可以注册自定义指令。

//注册一个全局自定义指令'v-focus'
Vue.directive('focus', {
//当被绑定的元素插入到DOM中时
   inserted: function(el) {
       //聚焦元素
       el.focus()  
    }         
})

如果想注册局部指令，组件也接受一个directives的选项：

directives: {
  focus:{
    //指令的定义
    inserted: function(el){
       el.focus()
       }          
    }  
}

 

一个指令定义对象可以提供如下几个钩子函数：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入到文档中）
• update：所在组件的VNode更新时调用，但是可能发生在子VNode更新之前。指令的值可能发生了改变，也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新
• componentUpdated：指令所在组件的VNode及其子VNode全部更新后调用
• unbind：只调用一次，指令与元素解绑时调用

钩子函数参数：

指令钩子函数会被传入以下参数：

• el：指令所绑定的元素，可以用来直接操作DOM
• binding：一个对象，包含以下属性：
  • name：指令名，不包含v-前缀
  • value：指令的绑定值
  • oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子函数中可用。
  • expression：字符串形式的指令表达式。
  • arg：传给指令的参数，可选。例如v-my-directive：foo中，参数为“foo”
  • modifiers：一个包含修饰符的对象。例如v-my-directive.foo.bar中，修饰符对象为{foo：true，bar：true}
• vnode：Vue编译生成的虚拟节点
• oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。