Vue中自定义指令_vue自定义指令怎么写-CSDN博客

本文链接：https://blog.csdn.net/qzw752890913/article/details/122750221

文章目录

例1：自定义指令 v-big

实现一个自定义指令v-big，功能和v-text类似，用于渲染其所在节点的文本内容，且会把绑定的值放大10倍。

<body>
    <div id="root">
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <h2>放大10倍的n值是：<span v-big="n"></span></h2>
        <button @click="n++">点我+1</button>
    </div>
    <script>
    Vue.config.productionTip = false;

    new Vue({
        el:"#root",
        data:{
            n: 1
        },
        directives:{
            big(element,binding){
                element.innerText = binding.value*10;
                console.log(element,binding);
                console.dir(element);
            }
        }
    })
    </script>
</body>

在这里插入图片描述
第一个参数，element，指令所在DOM节点。
第二个参数，binding，是一个对象。其中，name是指令名，expression是指令绑定的表达式，value是指令绑定的值。

big函数何时会被调用？
指令与元素成功绑定时调用；指令所在模板被重新解析时调用。

例2：自定义指令 v-fbind

实现一个自定义指令v-fbind，功能和v-bind，单向数据绑定（数据从data流向页面），且指令所在的input默认会获取焦点。

<body>
    <div id="root">
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <input type="text" v-fbind:value="n">
        <button @click="n++">点我+1</button>
    </div>
    <script>
    Vue.config.productionTip = false;

    new Vue({
        el:"#root",
        data:{
            n: 1
        },
        directives:{
            fbind(element,binding){
                element.focus();
                element.value = binding.value; 
            }
        }
    })
    </script>
</body>

在这里插入图片描述
以上实现的效果是：刷新页面时，input输入框并没有默认获取焦点（没有达到预期）；改变n值时，input输入框获取了焦点。

<body>
    <div id="root">
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <input type="text" v-fbind:value="n">
        <button @click="n++">点我+1</button>
    </div>
    <script>
    Vue.config.productionTip = false;

    new Vue({
        el:"#root",
        data:{
            n: 1
        },
        directives:{
            fbind:{
                //指令与元素成功绑定时，调用bind函数
                bind(element,binding){
                    element.value = binding.value;
                },
                //指令所在元素插入页面后，调用inserted函数
                inserted(element,binding){
                    element.focus();
                },
                //指令所在模板被重新解析时，调用update函数
                update(element,binding){
                    element.value = binding.value;
                    element.focus();
                }
            }
        }
    })
    </script>
</body>

在这里插入图片描述
指令与元素成功绑定时，会调用bind函数。
指令所在元素插入页面时，会调用inserted函数。
指令所在模板被重新解析时，会调用update函数。

例3：注册指令的两种方式

注册指令有两种方式：

注册局部指令：new Vue({directives:{}})
注册全局指令：Vue.directive(name,callback)或Vue.directive(name,{})

<body>
    <div id="root">
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <h2>放大10倍的n值是：<span v-big="n"></span></h2>
        <button @click="n++">点我+1</button>
    </div>
    <div id="root2">
        <h2>当前的x值是：<span v-text="x"></span></h2>
        <h2>放大10倍的x值是：<span v-big="x"></span></h2>
        <button @click="x++">点我+1</button>
    </div>
    <script>
    Vue.config.productionTip = false;
    Vue.directive("big",function(element,binding){
        element.innerText = binding.value* 10;
    })
    new Vue({
        el:"#root",
        data:{
            n: 1
        }
    })
    new Vue({
        el:"#root2",
        data:{
            x:1
        }
    })
    </script>
</body>

在这里插入图片描述

<body>
    <div id="root">
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <input type="text" v-fbind="n">
        <button @click="n++">点我+1</button>
    </div>
    <div id="root2">
        <h2>当前的x值是：<span v-text="x"></span></h2>
        <input type="text" v-fbind="x">
        <button @click="x++">点我+1</button>
    </div>
    <script>
    Vue.config.productionTip = false;
    Vue.directive("fbind",{
        bind(element,binding){
            element.value = binding.value;
        },
        inserted(element,binding){
            element.focus();
        },
        update(element,binding){
            element.value = binding.value;
            element.focus();
        }        
    })
    new Vue({
        el:"#root",
        data:{
            n: 1
        }
    })
    new Vue({
        el:'#root2',
        data:{
            x:1
        }
    })
    </script>
</body>

在这里插入图片描述

例4：关于指令名

<body>
    <div id="root">
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <h2>放大10倍的n值是：<span v-bigNumber="n"></span></h2>
        <button @click="n++">点我+1</button>
    </div>
    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data:{
            n: 1
        },
        directives:{
            bigNumber(element,binding){
                element.innerText = binding.value*10;
            }
        }
    })
    </script>
</body>

在这里插入图片描述

<body>
    <div id="root">
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <h2>放大10倍的n值是：<span v-bigNumber="n"></span></h2>
        <button @click="n++">点我+1</button>
    </div>
    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data:{
            n: 1
        },
        directives:{
            bignumber(element,binding){
                element.innerText = binding.value*10;
            }
        }
    })
    </script>
</body>

在这里插入图片描述

<body>
    <div id="root">
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <h2>放大10倍的n值是：<span v-big-number="n"></span></h2>
        <button @click="n++">点我+1</button>
    </div>
    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data:{
            n: 1
        },
        directives:{
            'big-number'(element,binding){
                element.innerText = binding.value*10;
            }
            // 'big-number':function(element,binding){
            //     element.innerText = binding.value*10;
            // }
        }
    })
    </script>
</body>