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

Posted 2020-12-01 moon-yyl

<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>