vue--スイッチングアセンブリ - アニメーション---コンポーネント

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 

< 頭> 
  < メタ文字コード= "UTF-8" > 
  < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
  < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
  < タイトル>ドキュメント</ タイトル> 
  < スクリプトSRC = "./ libに/ VUE-2.4.0.js" > <
  > 
    .V入力し、
    .V-残す-に{ 
      不透明度：0 。
      変換：移動X（150ピクセル）。
    } 

    .V-入る活性、
    .V-残す活性{ 
      遷移：全て0.5秒容易さ; 
    } 
  </ スタイル> 
</ ヘッド> 

< 身体> 
  < div要素のid = "アプリ" > 
    < HREF = "" @ click.prevent = "comName = 'ログイン'" >登录<
    < HREF = "" @ click.prevent = '登録' = "comName" >登録</ A > <！ -は、モード属性を介して提供されるモード切替アセンブリ- > < 遷移モード= "OUT-で" > < コンポーネント：ある= "comName" > </ 部品> </ 移行> </ divの> < スクリプト> // コンポーネント名の文字列    Vue.component（' ログイン' 、{ 
      テンプレート：' <H3>アセンブリをログに記録します。</ H3> '

    
    
      
    

  

  
    

    }）

    Vue.component（' 登録' 、{ 
      テンプレート：' <H3>コンポーネントを登録</ H3> ' 
    }）

    // ビューモデルを与えるために、Vueのインスタンスを作成
    VARにVM =  新しい新しいヴュー（{ 
      EL：' #appを' 、
      データ： { 
        comName：' ログイン'  // における現在のコンポーネント：コンポーネントの名前が結合している
      }、
      メソッド：{} 
    }）; 
  </ スクリプト> 
</ ボディ> 

</ HTML >