第二节:指令的使用——自定义指令

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第二节:指令的使用——自定义指令相关的知识,希望对你有一定的参考价值。

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

 

以上是关于第二节:指令的使用——自定义指令的主要内容,如果未能解决你的问题,请参考以下文章

第二节:指令的使用

第二节:指令的使用

第二节:指令的使用

(计算机组成原理)第四章指令系统-第二节1:指令寻址

linux入门-第二节:如何关机

第一章 第二节 Java语言的运行机制