详细解析Vue自定义指令：一看就会的教程

指令概念

Vue提供的指令方便了我们开发，有时我们需要对DOM 底层进行操作，就可以用自定义指令。

自定义指令分为：

• 全局指令
• 局部指令

在自定义指令时不需 加 ‘v’ ，在使用在才加。 指令包含5个钩子函数，用来对DOM 不同时期进行操作。

局部指令

在Vue单个组件里注册使用。

代码语言：javascript复制

directives:{
  formatData:{
    //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    bind(el){
      console.log(el)
    },
      update(el,binding){
        console.log("更新时做的操作")
        console.log(el) // 获取元素
        console.log(binding.arg) //获取指令传递的参数
        console.log(binding) //获取 binding 对象
     
      },
  }
},

全局指令

全局可以使用自定义的指令.

代码语言：javascript复制

Vue.directive('changeEl',{
   // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
   bind(el){
    console.log(el)
},
// 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
inserted(el,binding){

},
// 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
update(el,binding){
    console.log(binding)
},
// 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
componentUpdated(){

},
// 只调用一次，指令与元素解绑时调用。
unbind(){
    
}
})

批量注册全局指令写法

• 可以写一个放指令的文件

代码语言：javascript复制

//myDirective.js
const changeEl = {
    // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
    bind(el){
        console.log(el)
    },
    // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
    inserted(el,binding){

    },
    // 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
    update(el,binding){
        console.log(binding)
    },
    // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
    componentUpdated(){

    },
    // 只调用一次，指令与元素解绑时调用。
    unbind(){
        
    }
}

export {changeEl}

• 然后批量注册，通过 install 方法

代码语言：javascript复制

import { changeEl } from '../utils/myDirective';
// 自定义指令
const directives = {
    changeEl
};

export default {
    install(Vue) {
        Object.keys(directives).forEach((key) => {
            Vue.directive(key, directives[key]);
        });
    },
};

• 最后在 main.js 入口文件 Vue.use 即可

代码语言：javascript复制

import Directive from "./utils/directive"


Vue.use(Directive)

0 人点赞