vue base ---- custom component directive, bind, update, insert

<div ID = "App"> 
        <INPUT type = "text" V-limit.3 = "MSG" Focus-V> 
    </ div> 
    <Script the src = "./ the node_modules / VUE / dist / vue.js"> </ Script> 
    <Script> 
         Vue.directive ( "Focus" , {
            / * the method * /   
           / * 
            the bind (EL) { 
                Vue.nextTick (function () {// dom element executed after executing the 
                    el.focus ( ); 
                }); 
            } * / 
            / * method II * /    
            inserted The (EL) { // the binding element is inserted into the parent call 
                el.focus (); 
            } 
         });

       Vue.directive ("limit", function (EL, Bindings, the vnode) {
            / * 
                EL: element 
                bindings: Binding element value 
                update vue dom is asynchronous 
           * / 
           the console.log (EL); 
           the console.log (Bindings); 
           Console. log (the vnode); 
           the let [, len] = bindings.rawName.split ( "." );
            / * idea is to manually change the value of the text box to enter the virtual dom, change the value in the virtual vlaue dom in * / 
           CTX the let = vnode.context; 
           el.addEventListener ( "INPUT", (E) => { 
                the let Val = e.target.value.slice (0 , len)
                CTX [bindings.expression] = Val; 
                the console.log ( "CTX:" , CTX [bindings.expression]); 
                el.value = Val; 
            }); 
         //    el.value = CTX [bindings.expression] .slice ( 0, len); 
        }); 

        / * 
        Vue.directive ( "limit", { 
            // initialization of binding 
            the bind (EL, bindings, the vnode) { 
                the let CTX = vnode.context; 
                CTX [bindings.expression] EL = .value.slice (0,5); 
            }, 
            // update data when the binding 
            update (EL, bindings, the vnode) { 
                the let CTX = vnode.context; 
                CTX [bindings.expression] el.value.slice = (0,5); 
            } 
        });
        */
        let vm = new Vue({
            el:"#app",
            data:{
                msg:"hello vue"
            }
        });
    </script>