Vueの知識の統合

特別な特性（キー、REF、です）

キー：

子供は一意のキーを持つ必要があり、同じ親要素を持っています。重複キーエラーをレンダリングする原因となります。

最も一般的なユースケースは、Vの組み合わせである - のために： 

<UL> 
  <LI V- のために = " 項目内の項目"：キー= " item.id " > ... </ LI> 
</ UL>

参照：

// この$ refs`は、要素および構成要素を取得するために`を使用します。 
  <DIVは、上記のIDを述べ= " アプリケーション" > 
    の<div> 
      <=タイプのINPUT " ボタン"値= " 要素の内容を取得"をクリックします@ = " getElement " /> 
      <！ - -使用REF取得要素を- > 
      の<H1 REF = " MYH1を" >これは大きなH1の<>の/ H1である

      <HR> 
      < -使用！REF > -サブアセンブリを得る
      <MYCOM REF = " MYCOM " > </私の-COM> 
    </ div> 
  </ div>

  <SCRIPT> 
    Vue.component（' マイCOM ' 、{ 
      テンプレート：' <H5>これは、サブアセンブリ</ H5>で' 、
      データ（）{ 
        リターン{ 
          名：' サブアセンブリ' 
        } 
      } 
    }）; 

    // ViewModelに与えることを、Vueのインスタンスを作成します。
    VAR VM = 新しい新しいヴュー（{ 
      ：EL ' #app ' 、
      データ：{}、
      {：メソッド
        {getElement（）を
          // これで$レフリー要素を取得する。 
          はconsole.logを（この。$ refs.myh1.innerText）;
           // これを介して$参考文献成分を取得する 
          にconsole.log（この$のrefs.mycom.name）;. 
        } 
      } 
    }）;
   </ SCRIPT>

です：キープアライブバインディング、キャッシュが切り替えタブを作ることができます

// 使用`：異なる特性is`は、サブアセンブリを切り替え、切り替えにアニメーションを追加する
コンポーネントのインスタンスで定義された方法：
   // ログインアセンブリCONSTログイン= Vue.extend（{ 
      テンプレート：`の<div> 
        <H3>アセンブリをログ< / H3> 
      </ div> ' 
    }）; 
    Vue.component（' ログイン' 、ログイン）; // アセンブリ登録CONSTレジスタ= Vue.extend（{ 
      テンプレート： `の<div> 
        <H3>登録成分</ H3> 
      < / DIV> ' 
    }）; 
    Vue.component（' 登録' 、レジスタ）。// Vueのインスタンスを作成し、ViewModelに取得VARを
    

    
    

    
    = VM 新しい新しいヴュー（{ 
      EL：' #app ' 、
      データは：{comName：' ログイン' }、
      メソッド：{} 
    }）; 

2成分by`を参照する`component`ラベルを使用することは：IS '属性：ロードするコンポーネントを指定
  の<div上記のid = " アプリケーション" > 
    <a href=の"#" "comName='login'"> @click.prevent= ログインする</a> 
    <のhref = " ＃" @ click.preventを= " comName = '登録' " ></a>のサイン
    <HR>
    <遷移モード=" 外で" > 
      <コンポーネント：である = " comName " > </成分> 
    </遷移> 
  </ div>