说起vue指令,我们经常用的v-if,v-show,v-for,v-bind.....,不过这些都是尤大大提前注册好的,我们才用起来那么方便快捷,类似扩展jquery,原生js给对象追加方法,vue的指令也是可以自定义注册的。

Vue.directive注册自定义指令-Qui-Note

Vue.directive

vue注册自定义指令是通过Vue.directive实现,组件里面用directives: { } 实现自定义指令注册。

官方教程:https://cn.vuejs.org/v2/guide/custom-directive.html

官方提供了一个 页面输入框自动对焦的 注册指令案例:

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

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

html使用指令

<input v-focus>

我们刷新一看 ,看效果如下:

Vue.directive注册自定义指令-Qui-Note

自定义指令钩子函数

  • bind:只调用一次,指令第一次绑定到元素时调用
  • inserted:被绑定元素插入父节点时调用 
  • update:所在组件的 VNode 更新时调用
  • unbind:只调用一次,指令与元素解绑时调用
  • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

钩子函数参数

  1. el:指令所绑定的元素,可以用来直接操作 DOM。
  2. binding:一个对象,包含以下 property:

       name:指令名,不包括 v- 前缀。
       value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。
       oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
       expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。
       arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"。
       modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。

  1. vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
  2. oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

举例:

Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    el.style.top = binding.value + 'px'
  }
})

函数可以简写
注意:在 bind 和 update 时触发相同行为,而不关心其它的钩子的时候 可以简写!!!

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

文章内容,摘自vue.js中文教程《自定义指令》- https://cn.vuejs.org/v2/guide/custom-directive.html