Detailed explanation of template tag usage (including summary of usage in Vue)

<!--The current page only displays the content "I am a custom expression abc", not "I am a template", because the template tag is inherently invisible-->
<template><div>I am template</div></template>
<abc>I am custom expression abc</abc>

<template id="template">
 <div id="div1">I am template</div>
 <div>I am template</div>
</template>
<script>
 let o = document.getElementById("tem");
 console.log(o.content.nodeName);//#document-fragment
 console.log(o.content.querySelectorAll("div"));//NodeList(2) [div#div1, div]. Get a class array console.log(o.content.getElementById("div1"));//<div id="div1">I am template</div>
 console.log(o.innerHTML);//'<div id="div1">I am template</div><div>I am template</div>'
</script>

<div id="app">
 <!--The content in the template tag here is displayed and the template tag does not exist in the DOM-->
 <template>
 <div>I am template</div>
 <div>I am template</div>
 </template>
</div>
<!--The content in the template tag here is not displayed on the page, but the tag and its internal structure exist in the DOM structure-->
<template id="template">
 <div id="div1">I am template</div>
 <div>I am template</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
 let vm = new Vue({
 el: "#app",
 });
</script>

<div id="app">
 <template v-if="true">
 <!--At this time, the content in the template tag is displayed on the page, but the DOM structure does not have a template tag-->
 <div>I am template</div>
 <div>I am template</div>
 </template>
 <div v-if="true">
 <!--The content in the div tag is displayed on the page, and the DOM structure has the outermost div tag-->
 <div>I am template</div>
 <div>I am template</div>
 </div>
 <!--6 'I am template' will be output here and there is no template tag in the DOM structure-->
 <template v-for="a in 3">
 <div>I am template</div>
 <div>I am template</div>
 </template>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
 let vm = new Vue({
 el: "#app",
 });
</script>

<!--This page displays hello-->
<div id="app"></div>
<!--The template tag here must be defined outside the element bound to vue, and the content in the following template tag will not be displayed on the page-->
<template id="first">
 <div v-if="flag">{{msg}}<div>
 <div v-else>111<div>
</template>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
 let vm = new Vue({
 el:"#app",
 data:{
  msg:"hello",
  flag:true
 },
 template:"#first" //This property can be used to replace all the content in the custom template property with the content of the app, and will overwrite the original content in it, and there is no template tag when viewing the DOM structure});
</script>

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

<!--This page displays hello-->
<div id="app"></div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
 let vm = new Vue({
 el:"#app",
 data:{
  msg:"hello",
  flag:true
 },
 template:"<div v-if='flag'>{{msg}}</div><div v-else>123</div>"//There can only be one root element in a template. If there are multiple, you need to use v-if, v-else, v-else-if to choose which one to display});
</script>