Vue自定义指令

在 Vue 的模板语法中有各种各样的指令： v-show、 v-for、 v-model 等等，除了使用这些指令之外， Vue 也允许自定义自己的指令

• 在 Vue 中，代码的复用和抽象主要还是通过组件
• 通常在某些情况下，需要对 DOM 元素进行底层操作，这个时候就会用到自定义指令

自定义指令分为两种

• 自定义局部指令： 组件中通过 directives 选项，只能在当前组件中使用
• 自定义全局指令： app 的 directive 方法，可以在任意组件中被使用

案例演示

实现案例: 当某个元素挂载完成后可以自定获取焦点

• 实现方式一：使用默认的实现方式
• 实现方式二：自定义一个 v-focus 的局部指令
• 实现方式三：自定义一个 v-focus 的全局指令

方式一: 默认实现

方式二: 局部自定义指令

自定义一个 v-focus 的局部指令, 只需要在组件选项中使用 directives 即可

• 它是一个对象，在对象中编写自定义指令的名称（注意：这里不需要加 v-）
• 自定义指令有一个生命周期, 是在组件挂载后调用的 mounted, 可在其中完成操作

<script>
    export default {
        directives: {
            focus: {
                mounted(el) {
                    el.focus()
                },
            }
        }
    }
</script>

方式三: 自定义全局指令

自定义一个全局的 v-focus 指令可以在任何地方直接使用

app.directive("focus", {
    mounted(el) {
        el.focus()
    }
})

生命周期

一个指令定义的对象， Vue 提供了如下的几个钩子函数：

• created：在绑定元素的 attribute 或事件监听器被应用之前调用
• beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用
• mounted：在绑定元素的父组件被挂载后调用
• beforeUpdate：在更新包含组件的 VNode 之前调用
• updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用
• beforeUnmount：在卸载绑定元素的父组件之前调用
• unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次