directives自定义指令的使用

自定义指令，经常用于组件的复用和抽象，还有的情况是对普通 DOM 元素进行底层操作。例如：聚焦输入框
常用钩子函数：

• 初始化的时候调用一次bind(el指令所绑定的元素, 属性对象binding, Vue编译生成的虚拟节点vNode)
• 当被绑定的元素插入到 DOM 中时调用一次inserted(el, binding, vNode)
• 所在组件的 VNode 更新时调用update(el, binding, vNode)

#实现页面初始化时，聚焦输入框

<template>
  <div id="app">
    <!-- 使用自定义组件v-focus -->
    <input type="text" v-focus />
  </div>
</template>

<script>
export default {
  name: "App",
  // 注册自定义指令
  directives: {
    // 声明自定义指令v-focus
    focus: {
      // v-foucs指令的钩子函数
      inserted: function (el, binding){
        el.focus();
      },
    },
  },
};
</script>