如何利用vue的自定义指令，控制元素是否获取焦点

vue中的指令包括有：v-if,v-show，v-model等等，除此之外vue也支持自定义指令。拥有自定义指令，就有了更多的可能。自定义指令一般用于：对DOM元素进行底层操作时。

一、自定义指令的基础

5个生命周期钩子：

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

生命周期钩子函数的参数：

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

2. binding：一个对象，包含以下 property：

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

3. vnode：Vue 编译生成的虚拟节点。

4. oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。 以上参考：vue官方文档

二、自定义指令，控制元素获取焦点

• 自定义指令一般有两种方式注册，一是在全局注册自定义指令，二是在组件内部注册

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

• main.js 文件中

import Vue from "vue"
Vue.directives("focus",{  // focus是给这个指令的命名
   update: function (el, { value }) {  // 在组件更新时调用
      if (value) el.focus()
    },
})

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

• children.vue 组件文件中

directives: {
  focus: {
    update: function (el, { value }) {
      if (value) {
        el.focus();
      }
    },
  },
}

测试--在组件内部使用：

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