<！DOCTYPE HTML>
<HTML LANG = "ZH-CN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>ドキュメント</ TITLE>
<リンクのrel = "スタイルシート"のhref = "">
<スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue"> </ SCRIPT>
</ HEAD>
<BODY>
<テンプレートID = 'CPN'>
の<div>
<H4のV-HTML = "cmessage"> </ H4>
<UL>
<LIのV- ため = "cmoviesの項目">
{{アイテム}}
</ LI>
</ UL>
</ div>
</テンプレート>
<DIV ID = 'アプリケーション'> // 変数の値を受け取る変数をバインドが使用されている
。</ div>
<SCRIPT> //
<CPN：cmoviesの= '映画' ：cmessage = 'メッセージ'> </ CPN>
サブアセンブリ
CONST CPN = {
// 外部テンプレート
テンプレート： '#cpn' 、
// 通過親要素の値を受け取るためにこれらの変数を宣言し
小道具：[ 'cmovies'、 'cMessage' ]、
データ（）{
リターン{
}
}
}
constのVM = 新しい新しいヴュー（{
EL： '#app' 、
データ：{
メッセージ： '！映画を見て、ああは<BR/>ここで動画データから持ってきた私の親コンポーネントです！' 、
作品：[「反乱軍」、「千と千尋の神隠し」「夢」、「スパイダー」 ]
}
// サブアセンブリの登録
コンポーネントを：{
CPN
}
}）
</ SCRIPT>
</ BODY>
</ HTML>
