vue自定义指令 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义指令</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <div id="root">
        <h2>当前的n值是<span v-text="n"> </span></h2>
        <h2>放大十倍后的n值是<span  v-big="n"></span></h2>
        <button @click="n++">点我n++</button>
    </div>

    <script>
    new Vue({
        el:"#root",
        data:{
            n:1,

        },
        directives:{
            //函数式，big函数的调用时机
            //1.指令与元素成功绑定时（一上来）
            //2.指令所在的模板被重新解析时
            big(element,binding){
               element.innerText=binding.value*10;
               
            }
        }
    })
    </script>
</body>
</html>

　　

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>自定义指令</title>
        <script type="text/javascript" src="../js/vue.js"></script>

    </head>
    <body>
        <!-- 
            1.需求1 ，定义一个v-big 指令，和v-text类似，将n放大十倍
            2.需求2 ，定义一个v-fbind指令，和bind功能类似，但可以让其他绑定的input元素获得焦点
         -->
        <div id="root">
            <h2>当前的n值是<span v-text="n"> </span></h2>
            <h2>放大十倍后的n值是<span  v-big="n"></span></h2>
            <button @click="n++">点我n++</button>
            <br>
            <input type="text" v-fbind:value="n">
        </div>

        <script>
        new Vue({
            el:"#root",
            data:{
                n:1,

            },
            directives:{
                //函数式，big函数的调用时机
                //1.指令与元素成功绑定时（一上来）
                //2.指令所在的模板被重新解析时
                big(element,binding){
                element.innerText=binding.value*10;
                
                },
                // fbind(element,binding){
                //     element.value=binding.value;
                //     element.focus();
                // }
                fbind:{
                    //指令与元素成功绑定时（一上来）
                    bind(element, binding){
                        element.value=binding.value;
                    },
                    //指令所在元素被插入页面时
                    inserted(element, binding){
                        element.focus()
                    },
                    // 指令所在的模板被重新解析时
                    update(element, binding){
                        element.value = binding.value;
                         element.focus()
                    }
                }

            }
        })
        </script>
    </body>
    </html>

 

posted @ 2022-11-03 10:42  小白字太白  阅读(32)  评论(0)    收藏  举报