自己定义指令, 封装DOM操作(对普通 DOM 元素进行底层操作 ),扩展额外功能
全局注册 - 语法
// 指令名要带引号
Vue.directive("指令名”, {
// 当被绑定的元素插入到 DOM 中时insert函数起作用
inserted(el,binding) {
//对el进行操作
}
})
局部注册 - 语法
directives: {
指令名: {
inserted(el,binding) {
// 对el进行操作
}
}
}
el:指令所绑定的元素,可以用来直接操作 DOM
binding:一个对象,常用以下属性:更多可见文档 name:指令名,不包括 v- 前缀; value:指令的绑定值;
oldValue:指令绑定的前一个值 ;
例如:
main.js
// 自定义指令v-size 全局注册
Vue.directive("size", {
inserted(el) {
el.style.fontSize = "100px"
}
})
也可以注册局部指令v-color如下,注册后可以在template中任何元素上作为属性一样使用
app.vue
<template>
<div>
<h1 v-color v-size>here</h1>
</div>
</template>
<script>
export default {
// 局部注册
directives: {
color: {
inserted(dom) {
// 在自定义指令插入的标签渲染dom时insert函数起作用
dom.style.color = "red";
},
},
},
};
</script>
自定义指令 - 传值
需求:定义color指令——传入一个颜色, 给标签设置文字颜色 语法:在绑定指令时,可以通过“等号”的形式为指令绑定具体的参数值。
通过 binding.value 可以拿到指令值,指令值修改会触发 update 函数。
app.vue
<template>
<!-- 需求:定义color指令-传入一个颜色, 给标签设置文字颜色 -->
<div>
<h1 v-color="red" v-size>here</h1>
<h1 v-color="blue" v-size>here</h1>
<h1 v-color="yellow" v-size>here</h1>
<button @click="red = 'black'">改红色为黑色</button>
</div>
</template>
<script>
export default {
data() {
return {
red: "red",
blue: "blue",
yellow: "yellow",
};
},
// 局部注册
directives: {
color: {
inserted(dom, binding) {
// 这里的dom就是我们指令所在的标签的dom
// 在自定义指令插入的标签渲染dom时insert函数起作用
dom.style.color = binding.value;
},
//update会在指令的值v-指令=“变量”中,变量变化的时候触发
update(dom, binding) {
// binding.value是我们传给指令的值
dom.style.color = binding.value;
},
},
},
};
</script>