Vue自定义指令

最新推荐文章于 2024-06-13 23:47:14 发布

IT_CODE.

最新推荐文章于 2024-06-13 23:47:14 发布

阅读量466

点赞数

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

本文链接：https://blog.csdn.net/qq_54250695/article/details/122313028

版权

Vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

自定义指令是什么

就是对原生dom进行了一次封装,如v-show内置指令就是vue封装好dom了，vue帮我们操作节点，显示或者隐藏display属性，那么我们写自定义指令v-big,这个指令如何封装dom,操作dom逻辑就是等着我们来写(也就是名字是你定的，指令背后操作dom的逻辑也是你定的)

代码实现:

<body>
    <div id="app">
   <h3>初始化的N值为<span v-text="n"></span></h3>
   <h3>放大后10倍的值为<span v-big="n"></span></h3><!--需要用自定义指令-->
   <button @click="n++">点我n++</button>
   
</div> 

       <!-- span元素里面要放东西就是靠big()这个函数  而且通过console 
        这个big()函数肯定是调用了。
    
       -->
    <script>
        new Vue ({
            el:'#app',
            data:{
                n:1
            },
            //需要加一个全新的指令配置项 来写操作dom逻辑
            directives:{
                big:function(a,b){   //a为span这个元素 b为所绑定的所有信息
                   //借鉴上面的v-text  vue的内置指令
                   //v-text功能是把n拿到直接放到span元素里面作为一个文本出现在页面      
                   //所以v-big就是把n拿到放大10倍,作为文本的呈现
             
             
                   //接下来就是开始原生的dom操作
                   a.innerText=b.value*10
                   
          
                   //小疑问点击的时候为什么下面的n的值也会一直变化呢
                   //即为big()这个函数何时会调用呢
                /*
                1.指令与元素成功绑定时(一上来)    2.指令所在的模板被重新解析时


                //无论我是修改data中的什么数据  假设有很多数据  x  y  z  
                #app模板都会重新解析  模板里面用的  v-big为了得到一个精准的值只能再调用一遍big()函数
                 */
                }
            }
        })
            
    </script>
    
</body>

效果图:

总结:

一.定义语法:

1.局部定义:

new Vue({

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

})



//或者是

new Vue({

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


})

2.全局定义:

2.全局定义:

Vue.directive({

指令名,配置对象

})


//或者是

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

二配置对象中常用的3个回调

1. bind :指令与元素成功绑定时调用

2.inserted:指令所在元素被插入页面时调用

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

三、备注：

1.指令定义时不加v- 但使用时要加 v-

2.指令如果是多个单词不用驼峰命名法，用kebab-case命名方式,如:user-name

IT_CODE.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue自定义指令

一.定义语法:1.局部定义:new Vue({directives:{指令名:配置对象}})//或者是new Vue({directives:{指令名:回调函数}})2.全局定义:2.全局定义:Vue.directive({指令名,配置对象})//或者是Vue.directive(指令名,回调函数)二配置对象中常用的3个回调1. bind :指令与元素成功绑定时调用2.inserted:指令所在元素被插入页面时调用3.
复制链接

扫一扫