自定义指令使文本框自动获取焦点

directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.querySelector("input").focus();
      },
    },
  },

<el-input v-focus></el-input>

Vue 提供了自定义指令的5个钩子函数：

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

• inserted：被绑定的元素，插入到父节点的 DOM 中时调用（仅保证父节点存在）。

• update：组件更新时调用。

• componentUpdated：组件与子组件更新时调用。

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

注意：

1. 除 update 与 componentUpdated 钩子函数之外，每个钩子函数都含有 el、binding、vnode 这三个参数

2. 在每个函数中，第一个参数永远是 el， 表示被绑定了指令的那个 dom 元素，这个el 参数，是一个原生的 JS 对象，所以 Vue 自定义指令可以用来直接和 DOM 打交道

3. binding 是一个对象，它包含以下属性：name、value、oldValue、expression、arg、modifiers

4. oldVnode 只有在 update 与 componentUpdated 钩子中生效

5. 除了 el 之外，binding、vnode 属性都是只读的