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>