Detaillierte Erklärung der Verwendung von Vorlagen-Tags (einschließlich Zusammenfassung der Verwendung in Vue)

<!--Auf der aktuellen Seite wird nur der Inhalt „Ich bin ein benutzerdefinierter Ausdruck abc“ angezeigt, nicht „Ich bin eine Vorlage“, da das Vorlagen-Tag von Natur aus unsichtbar ist-->
<template><div>Ich bin eine Vorlage</div></template>
<abc>Ich bin der benutzerdefinierte Ausdruck abc</abc>

<Vorlagen-ID="Vorlage">
 <div id="div1">Ich bin eine Vorlage</div>
 <div>Ich bin eine Vorlage</div>
</Vorlage>
<Skript>
 let o = document.getElementById("tem");
 console.log(o.content.nodeName);//#Dokumentfragment
 console.log(o.content.querySelectorAll("div"));//Knotenliste(2) [div#div1, div]. Holen Sie sich ein Klassenarray console.log(o.content.getElementById("div1"));//<div id="div1">Ich bin eine Vorlage</div>
 console.log(o.innerHTML);//'<div id="div1">Ich bin eine Vorlage</div><div>Ich bin eine Vorlage</div>'
</Skript>

<div id="app">
 <!--Der Inhalt im Vorlagentag wird hier angezeigt und der Vorlagentag existiert nicht im DOM-->
 <Vorlage>
 <div>Ich bin eine Vorlage</div>
 <div>Ich bin eine Vorlage</div>
 </Vorlage>
</div>
<!--Der Inhalt im Vorlagen-Tag wird hier nicht auf der Seite angezeigt, aber das Tag und seine interne Struktur existieren in der DOM-Struktur-->
<Vorlagen-ID="Vorlage">
 <div id="div1">Ich bin eine Vorlage</div>
 <div>Ich bin eine Vorlage</div>
</Vorlage>
<script src="node_modules/vue/dist/vue.js"></script>
<Skript>
 lass vm = neues Vue({
 el: "#app",
 });
</Skript>

<div id="app">
 <Vorlage v-if="true">
 <!--Zu diesem Zeitpunkt wird der Inhalt im Vorlagen-Tag auf der Seite angezeigt, aber die DOM-Struktur verfügt nicht über ein Vorlagen-Tag-->
 <div>Ich bin eine Vorlage</div>
 <div>Ich bin eine Vorlage</div>
 </Vorlage>
 <div v-if="true">
 <!--Der Inhalt im Div-Tag wird auf der Seite angezeigt und die DOM-Struktur hat das äußerste Div-Tag-->
 <div>Ich bin eine Vorlage</div>
 <div>Ich bin eine Vorlage</div>
 </div>
 <!--6 Hier wird 'Ich bin eine Vorlage' ausgegeben und in der DOM-Struktur gibt es keinen Vorlagentag-->
 <template v-for="a in 3">
 <div>Ich bin eine Vorlage</div>
 <div>Ich bin eine Vorlage</div>
 </Vorlage>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<Skript>
 lass vm = neues Vue({
 el: "#app",
 });
</Skript>

<!--Auf dieser Seite wird „Hallo“ angezeigt-->
<div id="app"></div>
<!--Das Vorlagen-Tag muss hier außerhalb des an vue gebundenen Elements definiert werden, und der Inhalt im folgenden Vorlagen-Tag wird nicht auf der Seite angezeigt-->
<Vorlagen-ID="Erste">
 <div v-if="flag">{{msg}}<div>
 <div v-else>111<div>
</Vorlage>
<script src="./node_modules/vue/dist/vue.js"></script>
<Skript>
 lass vm = neues Vue({
 el:"#app",
 Daten:{
  Nachricht: "Hallo",
  Flagge: wahr
 },
 template:"#first" // Mit dieser Eigenschaft können Sie den gesamten Inhalt in der benutzerdefinierten Vorlageneigenschaft durch den Inhalt der App ersetzen. Der darin enthaltene Originalinhalt wird überschrieben. Beim Anzeigen der DOM-Struktur ist kein Vorlagentag vorhanden});
</Skript>

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

<!--Auf dieser Seite wird Hallo angezeigt-->
<div id="app"></div>
<script src="./node_modules/vue/dist/vue.js"></script>
<Skript>
 lass vm = neues Vue({
 el:"#app",
 Daten:{
  Nachricht: "Hallo",
  Flagge: wahr
 },
 template:"<div v-if='flag'>{{msg}}</div><div v-else>123</div>"//Eine Vorlage kann nur ein Stammelement enthalten. Wenn es mehrere gibt, müssen Sie mit v-if, v-else und v-else-if auswählen, welches angezeigt werden soll});
</Skript>