<！DOCTYPE HTML> <HTML LANG = "EN"> <ヘッド> <メタ文字セット= "UTF-8"> <スクリプトSRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"> </ SCRIPT> <タイトル>という名前のスロット</ TITLE> </ head>の <身体> <DIV ID = "ルート"> <子コンテンツ=「こんにちは」> <Pクラス= "ヘッダ" スロット= "ヘッダ">ヘッダ</ P> <Pクラス= "フッタ" スロット= "フッタ">フッター</ P> </子供> </ div> ます。<script type = "text / javascriptの"> Vue.component（ '子'、{ 小道具：{ 内容：文字列、 }、 テンプレート： `の<div> <スロット名=「ヘッダ」> <H1>デフォルトデフォルト</ H1> </スロット> <P> {{this.content}} </ P> <スロット名= "フッタ"> 3 </スロット> </ DIV> ` }） そこVM =新しいヴュー（{ エル： "＃ルート"、 }） </ SCRIPT> </ BODY> </ HTML>