简介

我们可以自己写一个自定义指令去操作DOM元素，以达到代码复用的目的。注意，在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

全局注册指令：

  1. Vue.directive('focus', {/** */})

局部注册指令

  1. const vm = new Vue({
  2.   el: '#app',
  3.   directives: {
  4.     focus: {/** */}
  5.   }
  6. })

使用：

  1. <input v-focus></input>

例如，写一个自动聚焦的输入框：

  1. Vue.directive('focus', {
  2.   // 当被绑定的元素插入到DOM时执行
  3.   inserted: function (el) {
  4.     el.focus();
  5.   }
  6. })

此时，在input元素上使用 v-focus 指令就可以实现自动聚焦了。

钩子函数

自定义指令对象提供了钩子函数供我们使用，这些钩子函数都为可选。

bind

只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted

被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中)。

update

所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。

componentUpdated

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

unbind

只调用一次，指令与元素解绑时调用(被绑定的Dom元素被Vue移除)。

钩子函数参数

  • el: 指令所绑定的元素，可以用来直接操作DOM。
  • binding：对象，包含以下属性：
    • 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 }。
  • vnode：Vue 编译生成的虚拟节点。
  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

练习

模拟 v-show

  1. // 绑定的值为false，display为none，值为true，display为""
  2. Vue.directive('myshow', {
  3.   bind (el, binding, vnode, oldVnode) {
  4.     var display = binding.value ? '' : 'none';
  5.     el.style.display = display;
  6.   },
  7.   update (el, binding, vnode, oldVnode) {
  8.     var display = binding.value ? '' : 'none';
  9.     el.style.display = display;
  10.   }
  11. })

模拟 v-model

  1. // 1. 通过绑定的数据，给元素设置value
  2. // 2. 当触发input事件时，去更改数据的值
  3. // 3. 更改数据后，同步input的value值
  4. Vue.directive('mymodel', {
  5.   bind (el, binding, vnode) {
  6.     const vm = vnode.context;
  7.     const { value, expression } = binding;
  8.     el.value = value;
  10.     el.oninput = function (e) {
  11.       const inputVal = el.value;
  12.       vm[expression] = inputVal;
  13.     }
  14.   },
  15.   update (el, binding) {
  16.     const { value } = binding;
  17.     el.value = value;
  18.   },
  19. })

写一个 v-slice（截取文本框）

  1. Vue.directive('slice', {
  2.   bind (el, binding, vnode) {
  3.     const vm = vnode.context;
  4.     let { value, expression, arg, modifiers } = binding;
  6.     if(modifiers.number) {
  7.       value = value.replace(/[^0-9]/g, '');
  8.     }
  11.     el.value = value.slice(0, arg);
  12.     vm[expression] = value.slice(0, arg);
  14.     el.oninput = function (e) {
  15.       let inputVal = el.value;
  17.       if(modifiers.number) {
  18.         inputVal = inputVal.replace(/[^0-9]/g, '');
  19.       }
  21.       el.value = inputVal.slice(0, arg);
  22.       vm[expression] = inputVal.slice(0, arg);
  23.     }
  24.   },
  25.   update (el, binding, vnode) {
  26.     const vm = vnode.context;
  27.     let { value, arg, expression, modifiers } = binding;
  29.     if(modifiers.number) {
  30.       value = value.replace(/[^0-9]/g, '');
  31.     }
  33.     el.value = value.slice(0, arg);
  34.     vm[expression] = value.slice(0, arg);
  35.   },
  36. })

动态指令参数

指令的参数可以是动态的。如：v-directive:[arguments]="value，argument参数可以根据组件实例数据进行更新。

重写 v-slice

  1. Vue.directive('slice', {
  2.   bind (el, binding, vnode) {
  3.     const vm = vnode.context;
  4.     let { value, expression, arg, modifiers } = binding;
  6.     if(modifiers.number) {
  7.       value = value.replace(/[^0-9]/g, '');
  8.     }
  11.     el.value = value.slice(0, arg);
  12.     vm[expression] = value.slice(0, arg);
  14.     el.oninput = function (e) {
  15.       let inputVal = el.value;
  17.       if(modifiers.number) {
  18.         inputVal = inputVal.replace(/[^0-9]/g, '');
  19.       }
  21.       el.value = inputVal.slice(0, arg);
  22.       vm[expression] = inputVal.slice(0, arg);
  23.     }
  24.   },
  25.   update (el, binding, vnode) {
  26.     const vm = vnode.context;
  27.     let { value, arg, expression, modifiers } = binding;
  29.     if(modifiers.number) {
  30.       value = value.replace(/[^0-9]/g, '');
  31.     }
  33.     el.value = value.slice(0, arg);
  34.     vm[expression] = value.slice(0, arg);
  36.     el.oninput = function (e) {
  37.       let inputVal = el.value;
  39.       if(modifiers.number) {
  40.         inputVal = inputVal.replace(/[^0-9]/g, '');
  41.       }
  43.       el.value = inputVal.slice(0, arg);
  44.       vm[expression] = inputVal.slice(0, arg);
  45.     }
  46.   },
  47. })

函数简写

当想在 bind 和 update 中触发相同行为，而不关心其他钩子时，可以写成函数的形式：

  1. Vue.directive('myshow', (el, binding) => {
  2.   const { value } = binding;
  3.   const display = value ? '' : 'none';
  4.   el.style.display = display;
  5. })
  1. Vue.directive('slice', (el, binding, vnode) => {
  2.   const vm = vnode.context;
  3.   let { value, expression, arg, modifiers } = binding;
  5.   if(modifiers.number) {
  6.     value = value.replace(/[^0-9]/g, '');
  7.   }
  10.   el.value = value.slice(0, arg);
  11.   vm[expression] = value.slice(0, arg);
  13.   el.oninput = function (e) {
  14.     let inputVal = el.value;
  16.     if(modifiers.number) {
  17.       inputVal = inputVal.replace(/[^0-9]/g, '');
  18.     }
  20.     el.value = inputVal.slice(0, arg);
  21.     vm[expression] = inputVal.slice(0, arg);
  22.   }
  23. })

对象字面量

如果自定义指令需要多个值，可以传入一个 JS 对象字面量。指令函数能够接受所有合法的 JS 表达式。

  1. <div v-demo="{ color: 'white', text: 'hello!' }"></div>
  1. Vue.directive('demo', function (el, binding) {
  2.   console.log(binding.value.color) // => "white"
  3.   console.log(binding.value.text)  // => "hello!"
  4. })