Vue-自定义指令directive

最新推荐文章于 2024-06-12 13:02:56 发布

野草_yh

最新推荐文章于 2024-06-12 13:02:56 发布

阅读量266

点赞数 1

分类专栏：前端文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_56812391/article/details/128746034

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章介绍了Vue框架中如何自定义指令，包括局部指令和全局指令的创建方法，以及使用函数形式和配置对象形式的详细步骤。通过示例展示了如何在DOM元素上操作，如改变内容、样式，并解释了不同生命周期钩子函数的作用。

摘要由CSDN通过智能技术生成

对于v-开头的行内属性，都是指令，不同的指令有不同的功能，对普通 DOM元素进行底层操作。除了默认内置的指令 (v-model 和 v-bind)，Vue 也允许自定义指令

📌自定义指令函数形式

1️⃣局部指令

new Vue({

directives:{指令名：回调函数}

})

<div id="one">
        <h1>count：{{count}}</h1>
        <h1>count变大后：<span v-change="count"></span></h1>
        <button @click="count++">增加</button>
</div>
<script>
    new Vue({
        el:'#one',
        data:{count:1},
        directives:{
            change：function(element,binding){
                element.innerText=binding.value*binding.value//该标签内容=被绑定对象的值^2
            }
        }
    })
</script>

函数参数

element：当前调用指令的真实DOM

binding：该DOM绑定的对象

2️⃣全局指令

Vue.directive(指令名，回调函数)

<div id="one">
        <h1>count：{{count}}</h1>
        <h1>count变大后：<span v-change="count"></span></h1>
        <button @click="count++">增加</button>
</div>
<script>
    Vue.directive('change',function(element,binding){
        element.innerText=binding.value*binding.value//该标签内容=被绑定对象的值^2
})
    new Vue({
        el:'#one',
        data:{ count:1}
    })
</script>

函数参数同上

📌自定义指令对象形式

1️⃣局部指令

new Vue({

directives:{指令名：配置对象}

})

<div id="one">
        <h1>count：{{count}}</h1>
        <h1>count变大后：<span v-change="count"></span></h1>
        <button @click="count++">增加</button>
</div>
<script>
    new Vue({
        el:'#one',
        data:{count:1},
        directives:{
            change:{
                    bind(element,binding){
                        element.innerText=binding.value*binding.value
                        console.log('绑定时该标签内容=被绑定对象的值^2')
                    },
                    inserted(element,binding){
                        element.style.color='skyblue'
                        console.log('插入时该标签字体颜色变成天蓝色')
                    },
                    update(element,binding){
                        element.innerText=binding.value*binding.value
                        console.log('更新时该标签内容=被绑定对象的值^2')
                    }
            }
        }
    })
</script>

对象回调函数

bind：指令与元素成功绑定时调用

inserted：指令所在元素被插入页面时调用

update：指令所在模板结构被重新解析时调用

2️⃣全局指令

Vue.directive(指令名，配置对象)

<div id="one">
        <h1>count：{{count}}</h1>
        <h1>count变大后：<span v-change="count"></span></h1>
        <button @click="count++">增加</button>
</div>
<script>
    Vue.directive('change',{
        bind(element,binding){
            element.innerText=binding.value*binding.value
            console.log('绑定时该标签内容=被绑定对象的值^2')
        },
        inserted(element,binding){
            element.style.color='skyblue'
            console.log('插入时该标签字体颜色变成天蓝色')
        },
        update(element,binding){
            element.innerText=binding.value*binding.value
            console.log('更新时该标签内容=被绑定对象的值^2')
        }
    })
    new Vue({
        el:'#one',
        data:{count:1}
    })
</script>

对象回调函数同上