一、自定义指令的基础

5个生命周期钩子：

  1. bind：只会调用一次，指令与元素首次绑定时执行。
  2. unbind：只会调用一次，指令与元素解绑时执行。
  3. inserted：元素被插入到DOM时执行。
  4. update：所在组件的VNode 更新时调用，可能发生在其子VNode更新之前

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

    参数：

  6. el：指令所绑定的元素，可以用来直接操作 DOM。

  7. 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 }。
  8. vnode：Vue 编译生成的虚拟节点。
  9. oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

    二、自定义焦点获取指令

    方式一：全局注册自定义指令：

  • main.js

    1. import Vue from "vue"
    2. Vue.directives("focus",{
    3.  update: function (el, { value }) {
    4.     if (value) el.focus()
    5.   },
    6. })

    方式二：组件内部自定义指令：

  • children.vue

    1. directives: {
    2. focus: {
    3.   update: function (el, { value }) {
    4.     if (value) {
    5.       el.focus();
    6.     }
    7.   },
    8. },
    9. }

    在组件内部使用：

    1. <input v-focus="var"/>  var是布尔值，控制input框是否获取焦点