コンポーネントを作成するには、Vueの三つの方法

1、Vue.extendはVueののグローバルアセンブリを作成します

< 本部上記のid =「アプリケーション」> 
    <！ - あなたがページに、HTMLタグの形で、直接コンポーネントの名前をコンポーネントを使用する場合は、することができます- > 
    < mycom1 > </ mycom1 > 
  </ divの> 

  < スクリプト> 
    // 1.1 Vue.extend全体アセンブリヴュー作成するために使用
    // VAR = COM1 Vue.extendを（{ 
    //    テンプレート： 'Vue.extend </ H3>のコンポーネントを使用して作成された<H3>' / HTMLの構造を示すために部品を指定する属性を介し/テンプレート
    //を}）
    // 1.2 Vue.component（「コンポーネント名」、アセンブリテンプレートオブジェクトから作成された）
    // Vue.component（「myCom1」、COM1）
    // あなたはVueのを使用している場合。コンポーネント名キャメルケースを使用する場合、コンポーネントに使用する二つの単語の前に、同時に、小文字を大文字にこぶの必要性を言及するとき、コンポーネントはその後、世界的なコンポーネントを定義します-リンク; 
    //あなたがこぶを使用しない場合は、名前が直接に慣れる; 
    // Vue.component（「mycom1」、COM1）

    // Vue.component第一引数：コンポーネントの名前将来のコンポーネントを参照するとき、ラベルです私たちはそのの形で導入されている
    // コンポーネントVue.extendが作成し、テンプレートが将来的にHTMLコンテンツを表示するためのコンポーネントである：第二引数
    Vue.component（「mycom1を」、Vue.extend（{ 
      テンプレート：「<H3>これはありますVue.extendは</ H3>コンポーネントを使用して作成された' 
    }））


    // ビューモデルを与えるために、Vueのインスタンスを作成
    VAR VM =  新しい新しいヴューを（{ 
      EL：' #app ' 、
      データ：{}、
      メソッド：{} 
    }）; 
  < / スクリプト>

2、直接使用Vue.componentを作成

  < 本部上記のid = "アプリケーション" > 
    <！ - あるいは、独自のコンポーネントを導入、ラベルのフォームを使用- > 
    < mycom2 > </ mycom2 > 
  </ divの> 

  < スクリプト> 
    // 注：どんなに作成することである方法アウトテンプレートコンテンツコンポーネントへのテンプレートの属性ポイント、アセンブリは、1つのみ独自のルート要素が存在する必要があり
    Vue.component（「mycom2 」、{ 
      ：テンプレート「これは直接Vue.componentから作成に使用された<div> <H3>成分</ H3> <スパン> 123 </スパン> </ div> ' 
    }）

    // 与えるために、ビューモデルVueのインスタンスを作成
    VAR VM =  新しい新しいヴュー（{ 
      ELを：' #app '、
      データ：{}、
      メソッド：{} 
    }）。
  </ スクリプト>

テンプレート要素、コンポーネントを定義するHTMLテンプレート構造を使用して制御3、外部#app 

< 本部上記ID言及= "アプリケーション" > 
    < mycom3 > </ mycom3 > 
    <！ - <ログイン> </ログイン> - > 
  </ divの> 


  < divの上記のid = "APP2" > 
    < mycom3 > </ mycom3 > 
    < ログイン> </ ログイン> 
  </ divの> 

  <！ - テンプレート要素を使用して制御外#app、コンポーネントを定義するHTMLテンプレート構造   - > 
  < テンプレートID = "TMPL" > 
    < divの> 
      <H1 >これが唯一のヒントがあり、定義されたコンポーネントの構造の外側テンプレート要素によって、このように行われ、コードをハイライト表示されます。</ H1 > 
      < H4 >使いやすい、良い！</ H4 > 
    </ DIV > 
  </ テンプレート> 

  < テンプレートID = "tmpl2" > 
    < のH1 >これはプライベートログイン成分</ のH1 > 
  </ テンプレート> 

  < スクリプト> 
    Vue.component（' mycom3 ' 、{ 
      テンプレート：' #tmpl '
    }）

    // ViewModelに与えることを、Vueのインスタンスを作成します。
    VARをVM =  新しい新しいヴュー（{ 
      EL：' #app ' 、
      データ：{}、
      メソッド：{} 
    }）; 


    VAR VM2 =  新しい新しいヴュー（{ 
      EL：' ＃App2の' 、
      データ：{}、
      メソッド：{}、
      フィルタ：{}、
      ディレクティブ：{}、
      コンポーネント：{ // プライベートの内部コンポーネントの例の定義
        ログイン：{ 
          テンプレート：' ＃1 tmpl2 ' 
        } 
      } 
    }）
  </ スクリプト>