第一章 Vue核心 第十六节 自定义指令

需求1：定义一个v-big指令，和v-text指令功能类似，但会把绑定的数值放大10倍
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点

自定义指令总结：
    一、定义语法：
        (1).局部指令：
            new Vue({                                    new Vue({
                directives:{指令名:配置对象}       或           directives:{指令名:回调函数}
            });                                          });
        (2).全局指令：
            Vue.directive(指令名,配置对象)    或    Vue.directive(指令名,回调函数)

    二、配置对象中常用的3个回调：
        (1).bind：指令与元素成功绑定时调用
        (2).inserted：指令所在元素被插入页面时调用
        (3).update：指令所在模板结构被重新解析时调用

    三、备注：
        1.指令定义不加v-，但使用时要加v-
        2.指令名如果是多个单词，要使用kebab-case命名方式，不要使用camelCase命名

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../../鼠标指针样式.css"/>
</head>
<body>
    <div id="root">
        <h2>当前的number值是：<span v-text="number"></span></h2>
        <h2>放大10倍后的number值是：<span v-big="number"></span></h2>
        <!--<h2>放大10倍后的number值是：<span v-big-number="number"></span></h2>-->
        <button @click="number++">n+1</button>
        <hr/>

        <input type="text" v-fbind:value="number" />
        <!--全局指令-->
        <input type="text" v-my-dir:value="number" />

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;

        //定义全局指令
        Vue.directive('my-dir',{                         //'my-dir',function(element,binding){}
            //指令与元素成功绑定时
            bind(element,binding){
                element.value = binding.value;
                console.log('bind');
            },
            //指令所在的元素被插入页面时
            inserted(element,binding){
                element.focus();
                console.log('inserted');
            },
            //指令所在的模板重新解析时
            update(element,binding){
                element.value = binding.value;
                console.log('update');
            }
        });

        new Vue({
            el:'#root',
            data:{
                number:1
            },
            directives:{
                //big函数何时会被调用？1.指令与元素成功绑定时；2.指令所在的模板重新解析时
                big(element,binding){
                    console.log('this ---> ',this);//此处的this是Window
                    element.innerText = binding.value*10;
                    console.log(element,binding);
                },
                // 'big-number'(element,binding){              //或者 'big-number':function(){}
                //     element.innerText = binding.value*10;
                //     console.log(element,binding);
                // },
                //
                fbind:{
                    //指令与元素成功绑定时
                    bind(element,binding){
                        element.value = binding.value;
                        console.log('bind');
                    },
                    //指令所在的元素被插入页面时
                    inserted(element,binding){
                        element.focus();
                        console.log('inserted');
                    },
                    //指令所在的模板重新解析时
                    update(element,binding){
                        element.value = binding.value;
                        console.log('update');
                    }
                }
            }
        });
    </script>
</body>
</html>
posted @ 2021-10-14 19:48  何以之  阅读(52)  评论(0)    收藏  举报