Vue自定义指令的使用总结（自用）

摘要：vue自定义指令的写法

自定义指令的组成

自定义指令表现为一个对象，创建一个自定义指令实际表现为创建一个具有指令钩子函数的对象。因此，需要注意的点也即指令钩子函数。

钩子函数

指令的钩子函数类似vue的生命周期，触发在不同时刻。

bind：指令与元素成功绑定时调用，此时虚拟dom存在，没有插入页面
inserted：指令所在元素被插入页面时被调用
update：指令所在模板被重新解析时调用
componentUpdated：组件更新
unbind：解绑时调用

函数参数

不同的钩子函数具备如下参数

el：绑定当前指令的元素，也就是添加了“v-某指令”的标签元素。

binding：一个对象，包含与当前指令相关的信息。

name:指令名称，“V-”后的内容。

value:指令的绑定值，例：v-测试=“123”  binging.value == 123  !注意：指令的绑定值，也就是等号后面的内容，可以是对象、表达式、数据、实际值

oldValue:指令绑定的前一个值，仅在update、componentUpdated钩子中可用，无论值是否改变。

expression:字符串形式的指令表达式，例：v-测试=“1+1” binding.expression == "1+1"

arg:绑定指令时传递给质量的参数，例：v-测试:flag=1  binding.arg == 'flag'  !注意：这里的参数指的是参数的名字，v-测试这个指令有一个叫做flag的参数

modifiers:一个包含修饰符的对象。这个就是我们常用的事件修饰符。例：v-测试.x   binding.modifiers.x == true。通过对指令添加修饰符可以控制同一个指令作出不同的反应。

vnode:编译生成的虚拟节点。
oldVnode:上一个虚拟节点，仅在update、componentUpdated钩子函数中可用。

<div v-binding:argeName.flag="123"></div>

图片.png

<div v-binding:[argName].x.y="dirValue"></div>

<!-- data:{
    argName:['name1','name2'],
    dirValue:[123,'123']
} -->

图片.png

指令的类型

同其他vue元素一样，指令分为全局指令和局部指令。

全局指令

全局指令的定义使用Vue.directive()方法，这个方法接收两个参数——指令名和指令对象。这里直接看代码

全局指令制作流程：

自定义指令插件
统一使用插件的文件
main.js引入使用指令插件的文件

//1.自定义指令插件  //dialogDrag.js
const dialogDrag = {
    bind(el,binding,vnode){
        //.....
    },
    inserted(el,binding,vnode){
        //.....
    }
}
export default {
    install(Vue){
        Vue.directive('dialogDrag',dialogDrag)
    }
}

注：一个Vue插件是一个对象或函数，当插件是对象时，在注册，即调用Vue.use()时会自动调用对象中的install()函数

//2.统一使用插件的文件  dirUse.js
import Vue form 'vue'
import dialogDrag from './dialogDrag.js'

Vue.use(dialogDrag)

//main.js引入自定义全局指令
import './directives/dirUse.js'

局部指令

局部指令写在组件内

export default {
    data(){
        return {
        
        }
    },
    direvtives:{
        dialogDrag:{
            bind(el,binding,vnode){}
        }
    }
}

Vue拆解——自定义指令使用总结（自用）