vue基础----自定义组件directive ,bind,update,insert

Posted moon-yyl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue基础----自定义组件directive ,bind,update,insert相关的知识,希望对你有一定的参考价值。

<div id="app">
        <input type="text" v-limit.3="msg" v-focus>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
         Vue.directive("focus",{
           /* 方法一*/  
           /*
            bind(el){
                Vue.nextTick(function(){ // 在dom元素执行完之后执行 
                    el.focus();
                });
            }*/
            /* 方法二 */   
            inserted(el){ //绑定元素插入父节点时调用
                el.focus();
            }
         });

       Vue.directive("limit",function(el,bindings,vnode){
           /*
                el:元素
                bindings:元素绑定的值
                vue dom的更新是异步的
           */
           console.log(el);
           console.log(bindings);
           console.log(vnode);
           let [,len] = bindings.rawName.split(".");
           /*思想就是 把在文本框输入的值手动改到虚拟dom中,在虚拟dom 中改变 vlaue的值*/
           let ctx = vnode.context;
           el.addEventListener("input",(e)=>{
                let val = e.target.value.slice(0,len)
                ctx[bindings.expression] = val;
                console.log("ctx:",ctx[bindings.expression]);
                el.value = val;
            });
         //   el.value = ctx[bindings.expression].slice(0,len);
        });

        /*
        Vue.directive("limit",{
            //初始化的时候绑定
            bind(el,bindings,vnode) {
                let ctx = vnode.context;
                ctx[bindings.expression]= el.value.slice(0,5);
            },
            //数据更新的时候绑定
            update(el,bindings,vnode) {
                let ctx = vnode.context;
                ctx[bindings.expression]= el.value.slice(0,5);
            }
        });
        */
        let vm = new Vue({
            el:"#app",
            data:{
                msg:"hello vue"
            }
        });
    </script>

 

以上是关于vue基础----自定义组件directive ,bind,update,insert的主要内容,如果未能解决你的问题,请参考以下文章

Vue2.x directive自定义指令

Vue.js学习 Item13 – 指令系统与自定义指令

vue定义全局指令和局部指令

vue3.2 setup 之局部自定义指令

vue3.2 setup 之局部自定义指令

vue中自定义指令组件化生命周期节流和防抖获取DOMmint-ui简介过渡和动画