vue3 学习笔记 (三)——vue3 自定义指令

inserted 是钩子函数，在绑定元素插入父节点时执行。

在 vue3 中，vue 实例通过createApp 创建，所以全局自定义指令的挂载方式也改变了， directive 被挂载到 app上。

实例2：Vue3 全局自定义指令

//全局自定义指令

app.directive(‘focus’,{

mounted(el){

el.focus()

}

})

//组件使用

1.2、局部自定义指令

在组件内部，使用 directives 引入的叫做局部自定义指令。Vue2 和 Vue3 的自定义指令引入是一模一样的。

实例3：局部自定义指令

二、自定义指令中的生命周期钩子函数

---

一个指令定义对象可以提供如下几个钩子函数（都是可选的，根据需要引入）

• created ：绑定元素属性或事件监听器被应用之前调用。该指令需要附加需要在普通的 v-on 事件监听器前调用的事件监听器时，这很有用。

• beforeMounted ：当指令第一次绑定到元素并且在挂载父组件之前执行。

• mounted ：绑定元素的父组件被挂载之后调用。

• beforeUpdate ：在更新包含组件的 VNode 之前调用。

• updated ：在包含组件的 VNode 及其子组件的 VNode 更新后调用。

• beforeUnmounted ：在卸载绑定元素的父组件之前调用

• unmounted ：