-
beforeMounted :当指令第一次绑定到元素并且在挂载父组件之前执行。
-
mounted :绑定元素的父组件被挂载之后调用。
-
beforeUpdate :在更新包含组件的 VNode 之前调用。
-
updated :在包含组件的 VNode 及其子组件的 VNode 更新后调用。
-
beforeUnmounted :在卸载绑定元素的父组件之前调用
-
unmounted :当指令与元素解除绑定且父组件已卸载时,只调用一次。
一、注册一个全局的自定义指令,创建一个文件夹 busDirective > index.js
export default {
install(app) {
app.directive(‘color’, { // color 是指令的名字
created(el, binding) { // el 是当前绑定的元素,binding 是一个对象
console.log(binding.value);
el.style.backgroundColor = binding.value // binding.value 就是指令绑定的内容,也是等号里面的值
},
updated(el, binding) {
el.style.backgroundColor = binding.value
},
})
}
}
1、 钩子函数被赋予了以下参数: el:指令所绑定的元素,可以直接操作DOM。 binding:是一个对象,包含该指令的所有信息。 binding 包含的属性具体的分别为:
2、 arg 自定义指令的参数名。 value 自定义指令绑定的值。 oldValue 指令绑定的前一个值。 dir 被执行的钩子函数 modifiers:一个包含修饰符的对象。
二、在 min.js 中使用
import {
createApp
} from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’
import store from ‘./store’
- import directive from ‘./busDirective/index’
createApp(App).use(store).use(router).use(directive).mount(‘#app’) // use使用
三、然后搭配 vuex 的state v-color 就可以改指定元素的颜色
一、vue3 组件里的自定义指令书写格式