テンプレートタグの使用方法の詳細な説明（Vue での使用方法の概要を含む）

<!-- 現在のページには、「私はカスタム式 abc です」という内容のみが表示され、「私はテンプレートです」という内容は表示されません。これは、テンプレート タグが本質的に不可視であるためです -->
<template><div>私はテンプレートです</div></template>
<abc>私はカスタム表現 abc です</abc>

<テンプレートid="テンプレート">
 <div id="div1">私はテンプレートです</div>
 <div>私はテンプレートです</div>
</テンプレート>
<スクリプト>
 o = document.getElementById("tem"); とします。
 console.log(o.content.nodeName);//#ドキュメントフラグメント
 console.log(o.content.querySelectorAll("div"));//NodeList(2) [div#div1, div].クラス配列を取得します console.log(o.content.getElementById("div1"));//<div id="div1">私はテンプレートです</div>
 console.log(o.innerHTML);//'<div id="div1">私はテンプレートです</div><div>私はテンプレートです</div>'
</スクリプト>

<div id="アプリ">
 <!--ここではテンプレート タグの内容が表示されており、テンプレート タグは DOM 内に存在しません-->
 <テンプレート>
 <div>私はテンプレートです</div>
 <div>私はテンプレートです</div>
 </テンプレート>
</div>
<!--ここでのテンプレート タグの内容はページには表示されませんが、タグとその内部構造は DOM 構造内に存在します-->
<テンプレートid="テンプレート">
 <div id="div1">私はテンプレートです</div>
 <div>私はテンプレートです</div>
</テンプレート>
<script src="node_modules/vue/dist/vue.js"></script>
<スクリプト>
 vm = new Vue({
 el: "#app",
 });
</スクリプト>

<div id="アプリ">
 <テンプレートv-if="true">
 <!--この時点では、テンプレート タグ内のコンテンツがページに表示されますが、DOM 構造にはテンプレート タグがありません-->
 <div>私はテンプレートです</div>
 <div>私はテンプレートです</div>
 </テンプレート>
 <div v-if="true">
 <!--div タグ内のコンテンツがページに表示され、DOM 構造には最も外側の div タグが含まれます-->
 <div>私はテンプレートです</div>
 <div>私はテンプレートです</div>
 </div>
 <!--6 ここでは「I am template」が出力され、DOM 構造にはテンプレート タグがありません -->
 <テンプレート v-for="a in 3">
 <div>私はテンプレートです</div>
 <div>私はテンプレートです</div>
 </テンプレート>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<スクリプト>
 vm = new Vue({
 el: "#app",
 });
</スクリプト>

<!--このページにはhelloが表示されます-->
<div id="アプリ"></div>
<!--ここでのテンプレート タグは、vue にバインドされた要素の外側で定義する必要があり、次のテンプレート タグの内容はページに表示されません -->
<テンプレートid="first">
 <div v-if="flag">{{msg} } <div>
 <div v-else>111<div>
</テンプレート>
<script src="./node_modules/vue/dist/vue.js"></script>
<スクリプト>
 vm = new Vue({
 el:"#アプリ",
 データ：{
  メッセージ:「こんにちは」、
  フラグ:true
 },
 template:"#first" //このプロパティを使用すると、カスタム テンプレート プロパティ内のすべてのコンテンツをアプリのコンテンツに置き換えることができます。また、その中の元のコンテンツは上書きされ、DOM 構造を表示するときにテンプレート タグは表示されません});
</スクリプト>

<abc id="first">
 <div v-if="flag">{{msg} } <div>
 <div v-else>111<div>
</abc>

<!--このページにはhelloが表示されます-->
<div id="アプリ"></div>
<script src="./node_modules/vue/dist/vue.js"></script>
<スクリプト>
 vm = new Vue({
 el:"#アプリ",
 データ：{
  メッセージ:「こんにちは」、
  フラグ:true
 },
 template:"<div v-if='flag'>{{msg}}</div><div v-else>123</div>"//テンプレートにはルート要素が 1 つだけ存在できます。複数ある場合は、v-if、v-else、v-else-if を使用して、表示する要素を選択する必要があります});
</スクリプト>