VUEベース----カスタムコンポーネントディレクティブ、バインド、更新、挿入

<divのIDは= "アプリケーション"> 
        の<input type = "text" V-limit.3 = "MSG"フォーカス-V> 
    </ div> 
    <SCRIPT SRCは= "./ node_modules / VUE / DIST / vue.js"> </ SCRIPT> 
    <SCRIPT> 
         Vue.directive（ "フォーカス" 、{
            / * メソッド* /   
           / * 
            バインド（EL）{ 
                Vue.nextTick（関数（）{//実行した後に実行されるDOM要素
                    el.focusを（ ）; 
                }）; 
            } * / 
            / * 方法II * /    
            挿入（EL）{ // 結合要素は、親コールに挿入さ
                el.focus（）; 
            } 
         }）。

       Vue.directive（"リミット"、関数（EL、バインディング、vノード）{
            / * 
                EL：素子
                バインディング：バインディング要素値
                更新VUEのDOMは非同期である
           * / 
           にconsole.log（EL）
           はconsole.log（バインディング）; 
           コンソール。 （vノード）のログ; 
           LET [、LEN] = bindings.rawName.split（「」）;
            / * アイデアは手動で、仮想DOMを入力するテキストボックスの値を変更するには仮想vlaueのDOM内の値を変更することです* / 
           CTX LET = vnode.context; 
           el.addEventListener（ "INPUT"、（E）=> { 
                せヴァル = e.target.value.slice（0、LEN）
                CTX [bindings.expression] 
                LET CTX = vnode.context。= ヴァル; 
                はconsole.log（ "CTX：" 、CTX [bindings.expression]）; 
                el.value = ヴァル; 
            }）; 
         //    el.value = CTX [bindings.expression] .slice（0、LEN）; 
        } ）; 

        / * 
        Vue.directive（ "限界"、{ 
            //結合の初期
            バインド（EL、バインディング、vノードを）{ 
                ; CTX = vnode.contextを聞かせて
                0（CTX [bindings.expression] = el.value.slice 、5）; 
            } 
            //更新データ場合バインディング
            更新（EL、バインディング、vノード）{
                CTX [bindings.expression] = el.value.slice（0,5）。
            } 
        }）。
        * / 
        VMせ = 新しいヴュー（{ 
            ELを： "#app" 、
            データ：{ 
                MSG： "こんにちはVUE" 
            } 
        }）。
    </ SCRIPT>