如何自定义指令 (16)

一.注册一个全局的指令

在Main.js中通过Vue.directive进行指令的全局注册, 使用通过v-自定义的名字来进行使用。

    <input type="text" v-focus />

1.代码：

Vue.directive('focus', {
  // 当绑定是元
  inserted: function (el) {
    el.focus()
  }
})

配置项目中有两项,第一项自定义指令的名字,第二项是生命周期的钩子,

  钩子有:bind 一开始就触发      获取不到父级

             inserted：被绑定元素插入父节点时调用，能够获取到父级

             update：所在组件的 VNode 更新时

             componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用

             unbind：只调用一次，指令与元素解绑时调用 

2.生命周期钩子里面的参数

el：指令所绑定的元素，可以用来直接操作 DOM。
binding： 里面包含事件信息
vnode：Vue 编译生成的虚拟节点

二.局部指定义指令

 directives: {
    focus: {
      inserted: function (el) {
        el.focus()
      }
    }
  }

对象下写一个指令的名字,在写对象，在写生命周期的钩子函数。不像全局注册一样,Vue. directives（'指令的名字',{ 生命周期的钩子})。作用的范围只能在当前的组件里面进行使用。