vue项目中的自定义指令探索

「这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战」

1.什么是vue指令

指令是可以写在DOM元素中的小命令，他们以 v- 为前缀，vue就能识别这是一个指令并保持语法的一致性。\

v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令

注：
① in + 数组/ 对象/ 对象数组 / 数字 ，如果in后面是 数字 的话，index值从1开始，否则index从0开始。
② 从2.2.0开始，在组件中使用v-for时，必须使用 v-bind 绑定key属性，且key必须是唯一的。
③ key属性只能使用 number 或 string 类型，不能使用对象。

---

2.自定义指令生命周期

1. bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2. inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
3. update：被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4. componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
5. unbind：只调用一次，指令与元素解绑时调用。

unbind的参数  `el`、`binding`、`vnode` 和 `oldVnode`

   `el`：指令所绑定的元素，可以用来直接操作 DOM。
   `binding`：一个对象，包含以下 property：
   `vnode`：Vue 编译生成的虚拟节点。
   `oldVnode`：上一个虚拟节点，仅在 `update` 和 `componentUpdated` 钩子中可用。
复制代码

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

---

3.自定义指令的实现

// 注册一个全局自定义指令 `v-focus` 
Vue.directive('focus', { 
    // 当被绑定的元素插入到 DOM 中时…… 
    inserted: function (el) { 
    // 聚焦元素 el.focus() 
    }
})
复制代码

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}
复制代码

然后你可以在模板中任何元素上使用新的 v-focus property，如下：

<input v-focus>
复制代码