vue2自定义指令

• 全局自定义指令

  • autofocus.js文件
    
    import Vue from 'vue'
    Vue.directive('autoFocus', {
      inserted(el) {
        el.focus()
      }
    })
    

  • main.js
    
    import '@/directives/autofocus.js'
    

  • xxx.vue
    
    <input type="text" v-autoFocus />
    

• 局部指令

  • autofocus.js文件
    
    export default {
    	inserted: function (el) {
          el.focus()
        }
    }
    

  • xxx.vue
    
    import autoFocus from '@/directives/autofocus.js'
    export default {
    	directives: {
        	autoFocus
    	},
    }
    
    <input type="text" v-autoFocus />
    

export default {
  // 只调用一次，指令第一次绑定到元素时调用；
  // 进行初始化设置
  bind(el, binding, vnode) {},

  // 被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入到文档中）
  inserted(el, binding, vnode) {},

  // 所在组件的VNode更新时调用
  update(el, binding, vnode) {},

  // 指令所在组件的 VNode及其子VNode全部更新后调用
  componentUpdated(el, binding, vnode) {},

  // 只调用一次，指令与元素解绑时调用
  unbind(el, binding, vnode) {}

  // 钩子函数的参数：
  //   el:
  //     指令所绑定的元素，可以用来直接操作dom

  //   binding:
  //     一个对象，包含：
  //       name:指令名;  permission
  //       value:指令的绑定值; 如：v-permission="1+1" 绑定值为 2
  //       oldValue:指令绑定的前一个值；仅在update和componentUpdated钩子中可用;
  //       expression:字符串形式的指令表达式; 如：v-permission="1+1" 指令表达式为 "1+1"
  //       arg:传给指令的参数；如：v-permission:foo="1+1" 参数为foo
  //       modifiers:一个包含修饰符的对象；如：v-permission.foo.bar 修饰符对象为{foo:true,bar:true}

  //   vnode:
  //     虚拟节点

  //   oldVnode:
  //     上一个虚拟节点，仅在update和componentUpdated钩子中可用
}