Vue3自定义指令的改动与使用

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");
      },

注：

1. 除 update 与 componentUpdated 钩子函数之外，每个钩子函数都含有 el、binding、vnode 这三个参数，这点不管是Vue2还是3都是相同的。
2. 在每个函数中，第一个参数永远是 el， 表示被绑定了指令的那个 dom 元素，这个el 参数，是一个原生的 JS 对象，所以 Vue 自定义指令可以用来直接和 DOM 打交道。
3. binding 是一个对象，它包含以下属性：name、value、oldValue、expression、arg、modifiers
4. oldVnode 只有在 update 与 componentUpdated 钩子中生效
5. 除了 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的方式进行全局挂载。