vue.jsにおけるコンポーネントの作成と使用方法

vue.jsでコンポーネントを作成するには、コンポーネントコンストラクタの作成、コンポーネントの登録、コンポーネントの使用の3つのステップがあります.
一、コンポーネントコンストラクタの作成
  コンポーネントコンストラクタを作成する方法は簡単です.次の文だけでいいです.
  var MyCompontent=Vue.extend({...});
  しかし、この場合はコンポーネントを直接使用することはできません.コンポーネントをアプリケーションに登録する必要があります.
二、登録コンポーネント
  Vue.jsは、グローバル登録とローカル登録の2つの登録コンポーネントを提供し、以下で説明します.
  ≪グローバル登録|Global Register|emdw≫:コンポーネントが任意のインスタンスで使用できるように、ルート・インスタンスが初期化される前に登録する必要があります.登録方法は次のとおりです.
  Vue.component('my-component',MyComponent);//この文は必ずnew Vue({......});前
  登録中にコンポーネントのHTMLタグも指定されています.この例は;
  ローカル登録:コンポーネントは、登録されたコンポーネントでのみ使用でき、他のコンポーネントでは使用できないことを制限します.
三、コンポーネントの使用
  以上のコンポーネントの説明に基づいて、コンポーネントの使用方法を具体的な例で説明します.
  グローバル登録の使用方法:

    



    /*       */
    var MyComponent = Vue.extend({
        template: '<p>This is a component</p>'
    });
    /*      */
    Vue.component('my-component', MyComponent);
    /*    */
    var vm = new Vue({
        el: '#app'
    })

  ローカル登録の使用方法:

    



    var child = Vue.extend({
        template: '<p>This is a component</p>'
    });
    var vm = new Vue({
        el: '#app',
        components: {
            'my-component': child
        }
    });

  上記のコードは、最終的にブラウザでのレンダリング結果と同じです.ただし、グローバルに登録されているmy-componentラベルはHTMLドキュメントのどこでも使用できますが、ローカルに登録されているmy-compomentラベルはidがappのコンテナの下でしか使用できません.
四、文法糖表示法
  vue.jsは、上記の2つの登録方法について簡略化された方法を提供し、コンポーネントを登録するときにコンポーネントコンストラクタを定義することができます.例を次に示します.

    



    /**    
     Vue.component('my-component', {
        template: '<p>This is a component</p>'
    });
     new Vue({
        el: '#app'
    });*/
        //    
    new Vue({
        el: '#app',
        components: {
            'my-component': {
                template: '<p>This is a component</p>}'
            }
        }
    })