vue 自定义指令常用于 DOM 操作
局部指令
1. 简单使用
在组件中
<template>
<div>
<label for="a" v-test></label>
<input id="a" v-focus type="text" />
</div>
</template>
<script>
export default {
directives: {
focus: {
inserted: function (el) {
el.focus();
},
},
test: {
inserted: function (el) {
el.innerHTML = "测试";
},
},
},
};
</script>
2. 封装
- 新建 src/utils/localDirectives.js，创建指令对象
// 按需引入
export const focus = {
inserted: function(el) {
el.focus();
}
};
export const test = {
inserted: function(el) {
el.innerHTML = "测试";
}
};
- 在组件中，引入并使用
<template>
<div>
<label for="a" v-test></label>
<input id="a" v-focus type="text" />
</div>
</template>
<script>
import { focus, test } from "./utils/localDirectives";
export default {
directives: { focus, test },
};
</script>
全局指令
1. 简单使用
- 在组件中使用
<template>
<div>
<label for="a" v-test></label>
<input id="a" v-focus type="text" />
</div>
</template>
<script>
export default {};
</script>
- 在 main.js 中注册
Vue.directive("focus", {
inserted: function(el) {
el.focus();
}
});
Vue.directive("test", {
inserted: function(el) {
el.innerHTML = "测试";
}
});
2. 封装
- 新建 src/utils/globalDirectives.js，创建指令对象
// 全部引入
const focus = {
inserted: function(el) {
el.focus();
}
};
const test = {
inserted: function(el) {
el.innerHTML = "测试";
}
};
export default {
focus,
test
};
- 新建 src/utils/global.js，在 install 函数中，遍历重构指令对象
// 引入指令
import directives from "./globalDirectives.js";
const globals = {
install: function(Vue, option) {
Object.keys(directives).forEach(key => {
// Object.keys(directives) //返回数组，数组里面的每一项是对象的属性名称
Vue.directive(key, directives[key]);
});
}
};
export default globals;
- 在 main.js 中，引入并 use
import globals from "@/utils/global.js";
Vue.use(globals);
- 在组件中使用
<template>
<div>
<label for="a" v-test></label>
<input id="a" v-focus type="text" />
</div>
</template>
<script>
export default {};
</script>
自定义指令的五个钩子函数和钩子函数的三个参数
注意：指令钩子函数的 this 是 undefined
自定义指令的五个钩子函数
bind: 初始化只调用一次（dom 未创建就调用）
inserted: 初始化调用（dom 创建之后调用）
update: 组件更新前调用
componentUpdated: 组件更新后调用。
unbind: 只调用一次， 指令与元素解绑时调用。
export default {
directives: {
focus: {
bind() {
console.log("bind");
},
inserted(el) {
el.focus();
console.log("inserted");
},
update() {
console.log("update");
},
componentUpdated() {
console.log("componentUpdated");
},
unbind() {
console.log("unbind");
},
},
},
};
钩子函数的四个参数
- 常用于操作 dom
el: 指令所绑定的 DOM 元素 - 常用于获取指令参数
binding: {
name: 指令名称，不包括 v- 前缀。
value: 指令的绑定值， 例如： v-foucus="1 + 1", value 的值是 2。
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
} - vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
网友评论