首页 > 代码库 > 第二节：指令的使用（6）——自定义指令

第二节：指令的使用（6）——自定义指令

2024-08-23 07:07:20   220人阅读

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 }。
  • 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){});

 

第二节：指令的使用（6）——自定义指令


联系
我们