<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
<META HTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ">
<タイトル>ドキュメント</ TITLE>
<スクリプトSRC = "https://cdn.bootcss.com/vue/2.6.10/vue.js"> </ SCRIPT>
<リンクのhref = "https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" のrel = "スタイルシート">
<リンクのhref = "https://cdn.bootcss.com/animate.css/3.7.1/animate.css" のrel = "スタイルシート">
<スタイル>
</スタイル>
</ head>の
<身体>
<DIV ID = "アプリ">
<インデックス> </インデックス>
<インデックスコンポーネント> </インデックスコンポーネント>
<ログイン> </ログイン>
</ div>
<スクリプト>
Vue.component（ 'インデックス'、{
テンプレート： '<ボタン@クリック= "変更">按钮</ボタン>'、
データ：関数（）{
{戻ります
MSG：「方法で使用されるグローバル成分データ」
}
}、
方法：{
変化する（） {
console.log（「組立方法メソッド」）。
}
}、
}）
Vue.component（ 'indexComponent'、{
テンプレート： '<H1>これはグローバルな要素である</ H1>'
}）
{（VM =新しいVueのでした
「#app」
データ：{
フラグ：真
}、
方法：{
}、
成分：{
ログイン： {
テンプレート： `
<div>
<ボタン@クリック= "変更" S>按钮2 </ボタン>
<input type = 'text' のV-フォーカス> </ div>
`、
データ：関数（）{
{戻ります
MSG：「方法で使用されるグローバル成分データ」
}
}、
方法：{
変化する（） {
console.log（「ローカル組立方法メソッド」）。
}
}、
ディレクティブ：{
フォーカス：{
挿入：関数（EL）{
el.focus（）
}
}
}
}、
}
}）;
</ SCRIPT>
</ BODY>
</ HTML>