Vue2.0自定义指令的钩子函数
bind: function(el: any, binding: any): void {
console.log("bind");
//指令第一次绑定到元素时调用,只执行一次。在这里可以进行一次性的初始化设置。
},
inserted: function(el: any, binding: any): void {
console.log("inserted");
//被绑定的元素,插入到父节点的 DOM 中时调用(仅保证父节点存在)。
},
updated: function(el: any, binding: any): void {
console.log("updated");
//组件更新时调用。
},
componentUpdated: function(el: any, binding: any): void {
console.log("componentUpdated");
//组件与子组件更新时调用。
},
unbind: function(el: any, binding: any): void {
console.log("unbind");
//指令与元素解绑时调用,只执行一次。
},
Vue2.0全局和局部指令
// 全局
Vue.directive('bgcolor', function (el, binding) {
el.style.backgroundColor = binding.value
})
// 局部
directives: {
bgcolor: (el, binding) => {
el.style.backgroundColor = binding.value
}
}
Vue指令基本使用
获取指令参数
1.通过指令的绑定,可以获取到页面传递的参数,进而对绑定的DOM进行相应处理。
<el-menu-item index="1" v-demo="activeIndex">处理中心</el-menu-item>
2.binding.value获取传递参数值
beforeMount(el: any, binding: any) {
console.log(66666666, binding.value);
},
操作DOM
通过掌控el参数即可对绑定元素进行DOM操作
el.style.backgroundColor = binding.value
当然了,也可以配合binging来控制DOM样式等等
<div v-demo='{color: 'orange'}'></div>
export default class A {
constructor() {}
demo(app: any): void {
app.directive("demo", {
beforeMount(el: any, binding: any) {
console.log(66666666, binding.value);
},
// 指令绑定元素挂载后
mounted(el: any, binding: any) {
el.style.backgroundColor = binding.value.color;
},
});
}
}
Vue3.0自定义指令的钩子函数
// 指令绑定元素挂载前
beforeMount(el: any) {
console.log("1");
},
// 指令绑定元素挂载后
mounted(el: any, binding: any) {
console.log("2");
},
// 指令绑定元素因为数据修改触发修改前
beforeUpdate(el: any) {
console.log("3");
},
// 指令绑定元素因为数据修改触发修改后
updated(el: any) {
console.log("4");
},
// 指令绑定元素销毁前
beforeUnmount(el: any) {
console.log("5");
},
// 指令绑定元素销毁后
unmounted(el: any) {
console.log("6");
},
注:
- 除 update 与 componentUpdated 钩子函数之外,每个钩子函数都含有 el、binding、vnode 这三个参数,这点不管是Vue2还是3都是相同的。
- 在每个函数中,第一个参数永远是 el, 表示被绑定了指令的那个 dom 元素,这个el 参数,是一个原生的 JS 对象,所以 Vue 自定义指令可以用来直接和 DOM 打交道。
- binding 是一个对象,它包含以下属性:name、value、oldValue、expression、arg、modifiers
- oldVnode 只有在 update 与 componentUpdated 钩子中生效
- 除了 el 之外,binding、vnode 属性都是只读的。
Vue3局部指令定义和全局指令
1.新建directive文件夹,文件夹下新建文件。
如下所示index.ts,
demo指令
export default class A {
constructor() {}
demo(app: any): void {
app.directive("demo", {
beforeMount(el: any) {
console.log("1");
},
// 指令绑定元素挂载后
mounted(el: any, binding: any) {
console.log("2");
},
// 指令绑定元素因为数据修改触发修改前
beforeUpdate(el: any) {
console.log("3");
},
// 指令绑定元素因为数据修改触发修改后
updated(el: any) {
console.log("4");
},
// 指令绑定元素销毁前
beforeUnmount(el: any) {
console.log("5");
},
// 指令绑定元素销毁后
unmounted(el: any) {
console.log("6");
},
});
}
}
2.main.ts(.js)全局挂载引入即可使用
import A from './directive/index';
const app = createApp(App);
const a = new A();
a.demo(app);
注:Vue3.0使用的createApp的方式进行全局挂载。