共通のコンポーネントやエフェクトを定義します。
<！DOCTYPE HTML>
<HTML>
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル> </ TITLE>
<スクリプトSRC = "libに/ vue.js"> </ SCRIPT>
</ HEAD>
<BODY >
の<divのid = "アプリ">
<P> 111111111 </ P>
<ログイン> </ログイン>
</ div>
<スクリプト> // VARログイン= {
// テンプレート： "<H1>这是登录组件< / H1>」
// }
VARのVM = 新しいヴュー（{
エル："#app" 、
データ：{}、
メソッド：{}、//
レンダリング：関数（createEle）{
// // HTMLレンダリングコンポーネントテンプレート構造に製剤
// // このパラメータは、パラメータ、カスタムの名前は、このパラメータはメソッドであるHTMLを返す
// createEleを返します（ログイン）;
// }、
コンポーネント：{
ログイン：{
：テンプレート "<のH1>この<の/ H1>ログイン成分である"
}
}
}）;
</ SCRIPT>
</ BODY>
</ HTML>
効果：
モードとエフェクトのレンダリングコンポーネントをレンダリングします：
<！DOCTYPE HTML>
<HTML>
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル> </ TITLE>
<スクリプトSRC = "libに/ vue.js"> </ SCRIPT>
</ HEAD>
<BODY >
の<divのid = "アプリ">
<P> 111111111 </ P>
<！ - <ログイン> </ログイン> - >
</ div>
<スクリプト>
のvarログイン = {
テンプレート：「<H1>这是登录组件</ H1> "
}
VARのVM = 新しいヴュー（{
EL： "#app」 、
データ：{}、
メソッド：{}、
レンダリング：関数（createEle）{
// コンポーネントテンプレートは、HTMLレンダラー構成に展開
// このパラメータは、このパラメータは、メソッドパラメータ、カスタムの名前である、HTMLを返す
リターンcreateEle（ログイン）;
}
// コンポーネント：{
// ログイン：{
// テンプレート： "この<H1の>は、ログイン構成要素である<の/ H1>"
// }
// }
}）;
</ SCRIPT>
</ BODY>
</ HTML>
効果：
