(一)Vue.Directive命令(カスタム命令)

このセクションの知識点

グローバルapi

Vue.Directive命令

カスタム命令のライフサイクル

グローバルapiの概要

グローバルapiはコンストラクタの中ではなく、まずグローバル変数を宣言するか、vueの中で直接いくつかの新しい機能を定義し、VUEはいくつかのグローバルapiを内蔵し、簡単な点はコンストラクタの外でvueが私たちに提供したapi関数で新しい機能を定義することである.

Vue.义齿

私たちは第1四半期に内部命令を学びましたが、v-helloの命令を定義したいと思っています.文字を緑にする役割を果たしています.

開始する前に小さなDEMOを書いて、ページの上に1つの数字が10で、数字の下に1つのボタンがあって、毎回1

をクリックしてプラスします

コードは次の

です.

    
    
    
    


   

       {{message}}
             1
   


    var app = new Vue({
        el:"#app",
        data:{
            message:10,
            color: "green"
        },
        methods:{
            add:function(){
                this.message++;
            }
        }
    })

次はvueを使いましょう.directiveは

と書きます

    
    
    
    


   

       {{message}}
             1
   


    Vue.directive("hello",function(el,binding,vnode){
       el.style["color"]= binding.value;
    })
    var app = new Vue({
        el:"#app",
        data:{
            message:10,
            color3:"red"
        },
        methods:{
            add:function(){
                this.message++;
            }
        }
    })

ここで説明するのは、コマンドがv-helloと書かれていることですが、directiveを使うときは前にv-を付けずに、コマンドを直接入力すると数字も緑になり、カスタムコマンドも機能していることを説明します.

el:DOM

を直接操作するためにバインドされた要素を命令する.

binding:命令を含む多くの情報

のオブジェクト

vnode:VUEコンパイル生成された仮想ノード

カスタム命令のライフサイクル
カスタム命令には、bind,inserted,update,componentUpdate,unbindの5つのライフサイクル(フック関数とも呼ばれる)があります.

このvueを解くには

を使うことができます.

function unbind(){
  app.$destroy()
}

bindは1回のみ呼び出され、命令が初めて要素にバインドされたときに呼び出され、このフックでバインドを定義するときに1回の初期化動作を実行することができる.

inserted:バインドされた要素が親ノードに挿入するときに呼び出す(親ノードが存在すれば呼び出すことができ、documentに存在する必要はない)

.

update:エレメントが存在するテンプレートの更新時に呼び出され、バインド値が変化するかどうかにかかわらず、更新前後のバインド値を比較することにより、不要なテンプレート更新

を無視する.

componentUpdate:バインドされた要素があるテンプレートが更新更新サイクルを完了したときに

を呼び出す.

unbind:一度だけ呼び出し、月要素の解縛を命令するときに

を呼び出す

次のコード

を参照

    
    
    
    


   

       {{message}}
             1
         
   


    function jiebang(){
        app.$destroy();
    }
    Vue.directive("hello",{
        bind:function(el,bingind,vnode){
            el.style["color"] = bingind.value;
            console.log("1-bind");
        },
        inserted:function(){
            console.log("2-insert");
        },
        update:function(){
            console.log("3-update");
        },
        componentUpdated:function(){
            console.log('4 - componentUpdated');
        },
        unbind:function(){
            console.log('5 - unbind');
        }
    })
    var app = new Vue({
        el:"#app",
        data:{
            message:10,
            color3:"red"
        },
        methods:{
            add:function(){
                this.message++;
            }
        }
    })