vue自定义指令,vue全局指令注册,vue局部指令注册 - 前端笔记-在设置vue自定义指令之前要了解几点小知识 1.钩子函数 (1)bind&nbs...

学习笔记

乾坤未定,你我皆是黑马
乾坤已定,我便扭转乾坤
首页>> >>vue自定义指令,vue全局指令注册,vue局部指令注册 - 前端笔记
在设置vue自定义指令之前要了解几点小知识
1.钩子函数
    (1)bind             只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
    (2)inserted         被绑定元素插入父节点时调用
    (3)update            所在组件的 VNode 更新时调用
    (4)componentUpdated        指令所在组件的 VNode 及其子 VNode 全部更新后调用
    (5)unbind                   只调用一次,指令与元素解绑时调用
2.钩子函数的参数
    (1)el          el就是元素的缩写  ,el  代表绑定指定的元素
    (2)binding        是一个对象 ,包含绑定元素的 相关信息和一些方法
    (3)vnode      Vue 编译生成的虚拟节点(参考官网)
    (4)oldVnode        上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用



1.vue全局指令注册
        vue全局指令 注册   通过vue下面的directive方法 注册指令
            
    <!-- //添加 颜色,宽,高指令 -->

    <!-- //引入vue框架文件 -->
    <script type="text/javascript" src="./js/vue.js"></script>
    <div class="app">
        <input type="text" v-model="msg.color" v-stl="msg" />
        <p>{{msg}}</p>
    </div>
    <script>
        //全局注册的 方法  Vue.directive('指令名称',{对象});
        Vue.directive('stl', {
            insertedfunction(el,
                binding) { // inserted是一个钩子函数 ,钩子函数中的el是指定所绑定的元素 , binding 是一个对象包含 指定绑定元素的 信息(name,value。。。)
                console.log(el); //打印 el
                console.log(binding); //打印 binding 
                el.style.color = binding.value.color;
                el.style.width = binding.value.width;
                el.style.height = binding.value.height;
            }
        })
        var vm = new Vue({
            el: '.app',
            data: {
                msg: {
                    color: 'red',
                    width: '120px',
                    height: '200px'
                }
            }
        })
    </script>



2.vue局部指令注册
    是通过在vue 实例里面的 directives 函数   注册  局部指令
        
    <!-- //添加 颜色,宽,高的局部指令指令 -->
    
    <!-- //引入vue.js -->
    <script src="./js/vue.js"></script>
    <div class="app">
        <input type="text" v-model="msg" v-color="msg">
    </div>
    <script>
        var vm = new Vue({
            el: '.app',
            data: {
                msg: {
                    color: 'red',
                    width: '120px',
                    height: '60px'
                }
            },
            directives: {
                color: {
                    insertedfunction(elbinding) {
                        console.log(el);
                        console.log(binding)
                        el.style.color = binding.value.color;
                        el.style.width = binding.value.width;
                        el.style.height = binding.value.height;
                    }
                }
            }
        })
    </script>




×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » vue自定义指令,vue全局指令注册,vue局部指令注册
版权所有:《前端笔记
文章标题:《vue自定义指令,vue全局指令注册,vue局部指令注册
除非注明,文章均为 《前端笔记》 原创
转载请注明本文短网址:https://blog.dbsgw.cn/post-27.html

网友评论(0)