详细解析Vue自定义指令：一看就会的教程
原创
指令概念
Vue提供的指令方便了我们开发，有时我们需要对DOM 底层进行操作，就可以用自定义指令。
自定义指令分为：
全局指令局部指令
在自定义指令时不需 加 ‘v’ ，在使用在才加。 指令包含5个钩子函数，用来对DOM 不同时期进行操作。
局部指令
在Vue单个组件里注册使用。
directives:{
formatData:{
//只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
bind(el){
console.log(el)
},
update(el,binding){
console.log("更新时做的操作")
console.log(el) // 获取元素
console.log(binding.arg) //获取指令传递的参数
console.log(binding) //获取 binding 对象
},
}
},全局指令
全局可以使用自定义的指令.
Vue.directive('changeEl',{
// 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
bind(el){
console.log(el)
},
// 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
inserted(el,binding){
},
// 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
update(el,binding){
console.log(binding)
},
// 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
componentUpdated(){
},
// 只调用一次，指令与元素解绑时调用。
unbind(){
}
})批量注册全局指令写法
- 可以写一个放指令的文件
//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方法
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即可
import Directive from "./utils/directive"
Vue.use(Directive)😊 使用指令
<el-input v-model="info.str" placeholder="" size="normal" clearable v-change-el="content"></el-input>钩子函数🪝
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind：只调用一次，指令与元素解绑时调用。
每个钩子函数都有这4个函数
el、binding、vnode和oldVnode
钩子函数参数介绍
el：指令所绑定的元素，可以用来直接操作 DOM。binding
：一个对象，包含以下 property：
name：指令名，不包括v-前缀。value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如v-my-directive="1 + 1"中，表达式为"1 + 1"。arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{ foo: true, bar: true }。vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
除了
el之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的dataset来进行。
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
foo 是 data 中定义的响应式变量指令动态参数传递
v-mydirective:[argument]="value"
<el-input v-model="str" placeholder="" size="normal" clearable v-format-data:[info.str]="str"></el-input>
<script>
export default {
info:{
str:""
}
}
</script>函数简写
一般情况，我们想让bind 和 update 触发的行为 一样，可以这样简写：
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})对象字面量
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录