Vue自定义指令

最新推荐文章于 2023-03-21 13:48:56 发布

旭陌小生

最新推荐文章于 2023-03-21 13:48:56 发布

阅读量192

点赞数

分类专栏：前端 vue.js js 文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq_37953045/article/details/111463319

版权

前端同时被 3 个专栏收录

40 篇文章

订阅专栏

24 篇文章

订阅专栏

vue.js

15 篇文章

订阅专栏

博客主要介绍了Vue自定义指令的用法，详细阐述了指令里各函数的调用时机。如bind函数在指令首次绑定到元素时调用，inserted函数在元素插入Dom时调用，update函数在组件VNode更新时调用等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue自定义指令

### Vue.directive();有两个参数，第一个参数就是自定义指令的名称“字符串类型”，第二个参数是个函数或者对象

用法

指令里面的函数

bind:function(){}指令第一次被绑定到元素上面的时候调用,被调用多少次就执行多少次

<div id="app">
        <p v-haha>{{msg}}</p>
    </div>
    <script>
        Vue.directive("haha",{
            bind:function(){
                console.log("bind");
            }
        });
        const app = new Vue({
            el:"#app",
            data:{
               msg:"你好"
            }
        });
    </script>

inserted:function(){}当被绑定的元素插入到Dom中时调用，插入多少次调用多少次

 inserted:function(){
                console.log("hello");
            }

update:function(){}当组件里的VNode更新时调用

update:function(){
                console.log("更新了呀");
            }

componentUpdated:function(){}当组件或者子组件的内容全部更新了之后调用

componentUpdated:function(){
                console.log("全部更新了");
            }

unbind:function(){}解绑，生命周期销毁执行后才会解绑

unbind:function(){
                console.log("解绑了");
            }