1、指令定义的钩子函数：（这些钩子函数都是可选的）
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。componentUpdated: 被绑定元素所在模板完成一次更新周期时调用，即模版更新完成的调用。unbind: 只调用一次， 指令与元素解绑时调用。
2、钩子函数的参数（参数可选）
- el: 指令所绑定的元素，可以用来直接操作 DOM 。
- binding: 一个对象，包含以下属性：
- name: 指令名，不包括
v-前缀。 - value: 指令的绑定值， 例如：
v-my-directive="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 }。
- name: 指令名，不包括
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点，仅在
update和componentUpdated钩子中可用。
3、自定义指令的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
<style>
#app {
width: 900px;
height: 800px;
border: 1px black solid;
}
</style>
</head>
<body>
<div id="app">
<input id="num" type="text" v-validate-number:aa.bb.cc="num" v-model="num">
</div>
</body>
<script type="text/javascript">
Vue.directive("validateNumber", { /*验证输入框中是否是数字，如果不是则边框变红*/
bind: function(el, binding, vnode) {
console.info("钩子函数bind的参数列表如下(v-validate-number:aa.bb.cc=‘num‘)：");
console.info("绑定的dom元素标签,el.nodeName：" + el.nodeName);
console.info("绑定的dom元素id,el.id：" + el.id);
console.info("指令的整行名(包括参数和修饰符), binding.rawName：" + binding.rawName);
console.info("指令的名字,binding.name：" + binding.name);
console.info("指令的参数,binding.arg：" + binding.arg);
console.info("指令的修饰符（以json格式字符串输出）,binding.modifiers：" + JSON.stringify(binding.modifiers));
console.info("指令的表达式,binding.expression：" + binding.expression);
console.info("指令的值,binding.value：" + binding.value);
if (el.getAttribute("type").toLowerCase() == "text") {
if (typeof binding.value != "number") {
el.setAttribute("style", "border-color:red;"); //不是数字，设置边框为红色
}
} else {
console.log("bind failed!");
}
},
inserted: function(el, binding, vnode) {
},
update: function(el, binding, vnode, oldVnode) {
if (binding.value == "" || !isNaN(Number(binding.value))) { //判断是不是为空，或者是不是数字
el.setAttribute("style", "border-color:initial;"); //是数字改回默认值
} else {
el.setAttribute("style", "border-color:red;"); //不是数字，设置边框为红色
}
},
componentUpdated: function(el, binding, vnode, oldVnode) {
},
unbind: function() {
console.log("unbind directive -- validateNumber");
}
});
new Vue({
el: "#app",
data: {
msg: "自定义的指令",
num: "11"
},
methods: {
}
});
</script>
</html>
4、自定义指令的注意问题
- 自定义指令的名字 "validateNumber" 其中有大写，则在绑定的时候，要用‘-‘分开大写变小写：v-validate-number:aa.bb.cc="num"
- 如果指令需要多个值，可以传入对象字面量的参数：v-validate-number:aa.bb.cc="{a:1,b:2}" 调用的时候用对象方式：binding.value.a
- 如果只有一个update方法的指令，可以简写Vue.directive("name",function(value){});
时间： 2025-01-18 13:19:41