<!--當前頁面只顯示"我是自定義表現(xiàn)abc"這個內(nèi)容，不顯示"我是template",這是因為template標簽天生不可見-->
<template><div>我是template</div></template>
<abc>我是自定義表現(xiàn)abc</abc>

<template id="tem">
 <div id="div1">我是template</div>
 <div>我是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]。得到一個類數(shù)組
 console.log(o.content.getElementById("div1"));//<div id="div1">我是template</div>
 console.log(o.innerHTML);//'<div id="div1">我是template</div><div>我是template</div>'
</script>

<div id="app">
 <!--此處的template標簽中的內(nèi)容顯示并且在dom中不存在template標簽-->
 <template>
 <div>我是template</div>
 <div>我是template</div>
 </template>
</div>
<!--此處的template標簽中的內(nèi)容在頁面中不顯示，但是在dom結構存在該標簽及內(nèi)部結構-->
<template id="tem">
 <div id="div1">我是template</div>
 <div>我是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">
 <!--此時template標簽中的內(nèi)容顯示在頁面上，但是看dom結構沒有template標簽-->
 <div>我是template</div>
 <div>我是template</div>
 </template>
 <div v-if="true">
 <!--此時頁面上顯示div標簽中的內(nèi)容，并且看dom結構存在最外面的div標簽-->
 <div>我是template</div>
 <div>我是template</div>
 </div>
 <!--此處會輸出6個‘我是template'并且dom結構中不存在template標簽-->
 <template v-for="a in 3">
 <div>我是template</div>
 <div>我是template</div>
 </template>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
 let vm = new Vue({
 el: "#app",
 });
</script>

<!--此處頁面顯示hello-->
<div id="app"></div>
<!--此處template標簽必須在vue綁定的元素外面定義，并且在頁面中不顯示下面的template標簽中的內(nèi)容-->
<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"http://通過該屬性可以將自定義的template屬性中的內(nèi)容全部替換app的內(nèi)容，并且會覆蓋里面原有的內(nèi)容，并且在查看dom結構時沒有template標簽
 });
</script>

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

<!--此處頁面顯示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>"http://模板中只能有一個根元素，如果有多個需要使用v-if、v-else、v-else-if來選擇顯示哪一個
 });
</script>