项目 | 描述 |
---|---|
搜索引擎 | Bing |
哔哩哔哩 | 黑马程序员 |
VueJS 官方教程 | 自定义指令 |
VueJS 深度指南(官方) | 自定义指令 |
项目 | 描述 |
---|---|
Edge | 109.0.1518.70 (正式版本) (64 位) |
操作系统 | Windows 10 专业版 |
@vue/cli | 5.0.8 |
npm | 8.19.3 |
VueJS | 2.6.14 |
VueJS 允许你注册自定义指令,以便封装对 DOM 元素的重复处理行为,提高代码的复用率。
VueJS 中的自定义指令分为两类,即全局自定义指令及私有自定义指令。
其中,私有自定义指令仅允许当前组件(定义该指令的组件)使用,而全局自定义指令允许当前项目中的任何组件使用。
你可以通过 exprot default {} 终端 directives 节点来定义私有自定义指令。
<template>
<div class="container">
<div class="box" v-color>div>
div>
template>
<script>
export default {
// 定义私有自定义指令
directives: {
// 定义自定义指令 color
color: {
// 当元素绑定指令后将立即调用 bind 函数
bind(el) {
// 生成随机 RGB 颜色
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
// 为绑定该指令的元素更换颜色
el.style.backgroundColor = 'rgb(' + r + ' ,' + g + ' ,' + b + ')'
}
}
}
}
script>
<style scoped>
.box{
width: 150px;
height: 150px;
}
style>
执行效果:
每次刷新该页面,.box 元素的背景颜色都将随机生成。
注:
你可以使用 Vue.directive() 函数定义全局自定义指令,该函数接收两个实参,第一个参数用以指定指令的名称,第二个参数用以为该指令提供配置对象。
举个栗子:
请向 Vue 项目 中的 main.js 文件中添加如下内容
// 定义全局自定义指令
Vue.directive('color', {
// 当元素绑定指令后将立即调用 bind 函数
bind(el) {
// 生成随机 RGB 色值
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
// 为绑定该指令的元素更换颜色
el.style.backgroundColor = 'rgb(' + r + ' ,' + g + ' ,' + b + ')';
}
}
)
App.vue
<template>
<div class="container">
<div class="box" v-color>div>
div>
template>
<script>
export default {
}
script>
<style scoped>
.box{
width: 150px;
height: 150px;
}
style>
执行效果:
每次刷新该页面,.box 元素的背景颜色都将随机生成。
你可以在定义自定义属性时所用到的配置对象中使用如下钩子函数,这些钩子函数将在特定的时机被执行。
项目 | 描述 |
---|---|
bind | 该钩子函数仅在指令第一次绑定元素的时候被调用。 |
update | 当指令绑定的数据发生变化时都将触发该函数。 |
unbind | 该钩子函数仅在元素第一次解绑元素时被调用。 |
注:
你可以向上述钩子函数提供两个形参,第一个形参用于接收绑定该指令的 DOM 元素,而第二个形参用于接收该指令对应的实例对象。
<template>
<div class="container">
<div class="box" v-color:Param="'dodgerblue'">div>
div>
template>
<script>
export default {
// 定义私有自定义指令
directives: {
// 定义自定义指令 color
color: {
bind(el, binding) {
// 将指令对应的实例对象打印在控制台中
console.log(binding);
}
}
}
}
script>
<style scoped>
.box{
width: 150px;
height: 150px;
}
style>
执行效果:
在执行上述代码后,你将在浏览器中的控制台中观察到如下内容:
其中:
项目 | 描述 |
---|---|
arg | 传递给指令的参数。 |
expression | 传递给指令的 JavaScript 表达式。 |
value | 传递给指令的表达式的执行结果。 |
modifiers | 一个包含修饰符的对象 。例如在 v-my-directive.foo.bar 中,修饰符对象是 { foo: true, bar: true }。 |
当指令绑定的数据发生变化时都将触发 update 钩子函数。
举个栗子
<template>
<div class="container">
<div class="box" v-color="color">div>
<button @click="randomColor()">Randombutton>
div>
template>
<script>
export default {
// 定义数据
data() {
return {
// 定义 .box 元素的初始颜色
color: 'dodgerblue'
}
},
// 定义指令
directives: {
color: {
bind(el, binding) {
// binding 即该指令所绑定的数据
el.style.backgroundColor = binding.value;
},
// 在当前指令绑定的数据发生变化时执行 update 钩子函数
update(el, binding) {
el.style.backgroundColor = binding.value;
// 在控制台中打印当前指令的实例对象
console.log(binding);
}
}
},
// 定义事件
methods: {
randomColor() {
// 生成随机 RGB 色值
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
this.color = 'rgb(' + r + ' ,' + g + ' ,' + b + ')';
}
}
}
script>
<style scoped>
.box{
width: 150px;
height: 150px;
border-radius: 3px;
}
style>
执行效果:
注:
使用 update 周期函数时,指针的实例对象将增加 oldValue 属性,用于表示指令发生变化前传递给指令的表达式的结果值。
当 bind 及 update 函数中的代码逻辑相同时,我们可以将对象格式的自定义指令转换为函数格式的对象指令。
举个栗子
<template>
<div class="container">
<div class="box" v-color="color">div>
<button @click="randomColor()">Randombutton>
div>
template>
<script>
export default {
// 定义数据
data() {
return {
// 定义 .box 元素的初始颜色
color: 'dodgerblue'
}
},
// 定义指令
directives: {
color(el, binding) {
// binding 即该指令所绑定的数据
el.style.backgroundColor = binding.value;
console.log(binding.oldValue)
}
},
// 定义事件
methods: {
randomColor() {
// 生成随机 RGB 色值
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
this.color = 'rgb(' + r + ' ,' + g + ' ,' + b + ')';
}
}
}
script>
<style scoped>
.box{
width: 150px;
height: 150px;
border-radius: 3px;
}
style>
上述代码的执行效果与上个示例的执行效果相同。