什么是指令?
答: 特点:是v- 开头 ,在 vue 中提供了些对页面和数据更方便的输出方式,就是指令。实质上就是特殊的 html 标签属性。
指令的作用: 指令中封装了一些DOM行为, 结合属性作为一个行为, 行为有对应的值,根据不同的值,框架会进行相关DOM操作的绑定
自定义指令所传递的三个参数
- el: 指令所绑定的元素,可以用来直接操作DOM。
- binding: 一个对象,包含指令的很多信息。
- vnode: Vue编译生成的虚拟节点。
指令的生命周期
自定义指令有五个生命周期(也叫钩子函数),分别如下:
- bind:只调用一次,指令第一次绑定到元素时调用。
- inserted:被绑定元素插入父节点时调用。
- update:被绑定于元素所在的模板更新时调用。
- componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
- unbind:只调用一次,指令与元素解绑时调用。
bind:()=>{//被绑定
console.log('bind');
},
inserted:()=>{//绑定到节点
console.log('inserted');
},
update:()=>{//组件更新
console.log('update');
},
componentUpdated:()=>{//组件更新完成
console.log('componentUpdated');
},
unbind:()=>{//解绑
console.log('unbind');
}
Vue3全局自定义指令:
let app = createApp(App)
app.directive('highlight', {
beforeMount(el, binding, vnode) {
el.style.background = binding.value
}
})
Vue3局部自定义指令:
directives: {
highlight: {
beforeMount(el, binding, vnode) {
el.style.background = binding.value;
},
},
el:指令绑定的元素
binding:数据对象
vnode:Vue编译生成的虚拟节点