Vueのではまず、コンポーネントベースの開発：
アセンブリは、VueのVueの例であります
コンポーネントタイプ：
共通の構成要素（例えば、フォーム、ポップ、レイアウト、等）
ビジネス・コンポーネント（宝くじマシン分類）
ページ・コンポーネント（各ページ単一ページ開発プログラムは、構成要素です）
コンポーネント開発指輪：声明、登録、使用
二.slotスロットとref。$親
1.スロットスロット
スロットがピットビットに滞在するDOMにサブアセンブリされ、それは動的DOMとして理解することができます
例えば
2.refサブアセンブリのインスタンスを取得
- サブアセンブリの属性REF =「XXX」を使用して
- この$のrefs.xxxは、要素をゲット。
3. $親親要素は、実施例のサブアセンブリで得ることができます
3つの通信サンズアセンブリ
息子の父：
親サブ属性が通過しているときは、
受け取るために、[プロパティ名]：子の小道具を宣言するには
受信は、自分で、何でもあなたが使用します
ます。<script type = "text / JavaScriptを">
// サブアセンブリ定義された小道具直接
のvar子供= {
テンプレート： `
<div>
Iサブアセンブリ{{}} sendchild
私は彼の父からのフィードバックに何か</ button>をしたい<ボタン@ = 'sendparent' をクリックします>
</ div>
`、
情報が親コンポーネントの属性の小道具で上を通過//受信しました
小道具：[ 'sendchild' ]、
方法：{
sendparent（）{
この。$ EMIT（「ババ」、「これはあなたの息子の構成要素です」）
}
}
}
// データを通過する親コンポーネントサブアセンブリはsendchild属性
VAR =親{
テンプレート： `
<div>
私の親コンポーネント{{MSG}}
属性//通過する
<子sendchild = 'あなたのお父さん馬場@ = '準備'> </子供>
</ div>
`、
成分：{
子
}、
データ（）{
リターン{
MSG： ''
}
}、
方法：{
リザーブ（ヴァル）{
この .MSG = ヴァル
}
}
}
親の子伝送
- $による内部サブアセンブリは、放射（「カスタムイベント名」可変1、可変2）トリガー
- カスタムイベント@名=「イベント名」モニターの親コンポーネント
- この$のEMIT、サブアセンブリ法（「sendfather」、値1、値2）カスタムイベントをトリガ
- 父组件里<子@ sendfather = 'mymethods'> </子供>
ます。<script type = "text / JavaScriptを">
// サブアセンブリ定義された小道具直接
のvar子供= {
テンプレート： `
<div>
Iサブアセンブリ{{}} sendchild
私は彼の父からのフィードバックに何か</ button>をしたい<ボタン@ = 'sendparent' をクリックします>
</ div>
`、
小道具：[ 'sendchild' ]、
方法：{
sendparent（）{
//パス馬場イベント
この。$ EMIT（「ババ」、「これはあなたの息子の構成要素です」）
}
}
}
// データを通過する親コンポーネントサブアセンブリはsendchild属性
VAR =親{
テンプレート： `
<div>
私は親コンポーネントのMSG}} {{
//馬場イベントを聞く
<子sendchild = @馬場の父があなたに与えた'= '準備'> </子供>
</ div>
`、
成分：{
子
}、
データ（）{
リターン{
MSG： ''
}
}、
方法：{
リザーブ（ヴァル）{
この .MSG = ヴァル
}
}
}
第四に、非サンズアセンブリの間を通過するパラメータ
Vue.prototype。$バス= 新しいビュー（） するvar MyHeader = { テンプレート： ` <div> 私は頭です {{}} headermsg </ DIV> `、 データ（）{ リターン{ headermsg：「私は情報の頭です」 } }、 作成した（）{
// VAR =自己これ // セルフ。$バス。$ ON（ '送信'、機能（ヴァル）{ // self.headermsg =ヴァル // }）
// ES6のため、この機能を矢印に変更されますこのポイント、ポイント外部プロパティ。属性が作成され、これは、この時点で これ。バス$。$ ON（「送信」、ヴァル=> { この .headermsg = ヴァルを }） } } たはmyBody = { テンプレート： ` <div>私は</ div>のボディです `、 } た MyFooter = { テンプレート： ` <DIV>私は下の<ボタン@をクリックすると、= 'sendhead'>私は</ボタン> </ div>のヘッドを伝えたいです `、 方法：{ sendhead（）{
//。$バス、この内の別のコンポーネントを使用します。$同じイベントにも送信するため聞く これを。$バス。$ EMIT（「送信」、「私は、データの下にありました」） } } } 新しいビュー（{ 上： '#app' 、 成分：{ MyHeader、 私の体、 MyFooter }、 テンプレート： ` <div> <私のヘッダ> </私のヘッダ> <時間> <MY-BODY> </ MY-BODY> <時間> <私のフッター> </私のフッター> </ div> `、 データ（）{ 戻り} { }、 }）
（ハッシュモード）の5つの.Vue原則ルートをジャンプ
ルートモード、2つの単一ページのアプリケーションがあります
1.ハッシュモード（（）URLのハッシュを変更しなhashchangeイベントリスナーを使用します）
2.historyモード（このモードを使用して、我々はパッケージを襲った後、インターフェイスのindex.htmlと背景が必要です）
ます。<script type = "text / javascriptの">
VAR appdiv =のdocument.getElementById（ 'アプリ' ）
window.addEventListener（ 'なhashchange'、関数（E）{
console.log（location.hash）
スイッチ（location.hash）{
ケース '＃/ログイン' ：
appdiv.innerHTML =「私は、ログインページだ」;
BREAK ;
ケース「＃/登録」：
appdiv.innerHTML =「私は登録ページだ」;
BREAK ;
}
}）
</ SCRIPT>
3.ルーティングをインストールします。
1：ダウンロードVUE I-ルータ-S NPM
2：プラグVue.use（VueRouter）;
3：（）新しい新しいルーティングオブジェクトVueRouter =ルータVARを作成し;
4：設定ルーティングルールrouter.addRoutes（[ルーティングオブジェクト]）;
ルートオブジェクト{パス：「アンカー値」、成分（充填ピット）成分示さへ}
5：Vueのように構成ルーティングオブジェクトは
オプションで渡さ- >キーは、ルータと呼ばれる
機能、「なhashchange」（window.addEventListenerを（E）{
にconsole.log（E）}）
6：コンポーネントを使用して、左ピット（） <ルータビュー> </ルータビュー>
ます。<script type = "text / javascriptの" SRC = "vue.js"> </ SCRIPT>
<！ - 再配布ルートは、プラグイン - >
ます。<script type = "text / javascriptの" SRC = "VUE-router.js"> </ SCRIPT>
ます。<script type = "text / javascriptの">
たログイン= {
テンプレート： `
<div>私は、ログインページ</ div>午前
`、
}
// インストールルートウィジェット
Vue.use（VueRouter）;
// オブジェクトのルーティングを作成
するvarルータ= 新しい新しいVueRouter（{
// 設定ルートオブジェクトの
ルート：[
{パス： '/ログイン'、名前： 'ログイン' 、コンポーネント：ログイン}
]
}）
新しいビュー（{
上： '#app' 、
ルータ、
テンプレート： `
<div>
<P>リンク上のログイン・テスト・ルーティング機能を追加してください。</ P>
<ルータビュー> </ルータビュー>
</ div>
`、
データ（）{
戻り} {
}、
}）
</ SCRIPT>