很多时候我们需要直接操作 dom 元素,如果只是个别需要操作 dom 元素,我们可以通过 ref 获取当前 dom 元素,并对其进行操作,但是如果特别多的时候,我们不可能每次都去写一遍 ref 还有方法,所以这时候自定义指令就可以帮你轻松解决这个问题
分为全局和局部;
钩子函数:
bind:只调用一次,指令第一次绑定到元素时调用。这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:解绑时调用。
钩子函数的参数:
**el**: 指令所绑定的元素,可以用来直接操作 DOM,就是放置指令的那个元素。
**binding**: 一个对象,里面包含了几个属性:value:指令的绑定值,name:指令名等;
**vnode**:Vue 编译生成的虚拟节点。
**oldVnode**:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。