关于template标签用法总结(含vue中的用法总结)

一、html5中的template标签
html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。

//当前页面只显示"我是自定义表现abc"这个内容，不显示"我是template",这是因为template标签天生不可见
2 <template><div>我是template</div></template>
3 <abc>我是自定义表现abc</abc>

二、template标签操作的属性和方法
content属性:在js中template标签对应的dom对象存在content属性，对应的属性值是一个dom节点，节点的nodeName是#document-fragment。通过该属性可以获取template标签中的内容

template对象.content可以调用getElementById、querySelector、querySelectorAll方法来获取里面的子节点。
innerHTML:可以获取template标签中的html。

<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]。得到一个类数组
  console.log(o.content.getElementById("div1"));//<div id="div1"> 
  我是template</div>
  console.log(o.innerHTML);//'<div id="div1">我是template</div> 
  <div>我是template</div>'
</script>

三、vue中的template
template标签在vue实例绑定的元素内部它是可以显示template标签中的内容，但是查看后台的dom结构不存在template标签。

如果template标签不放在vue实例绑定的元素内部默认里面的内容不能显示在页面上，但是查看后台dom结构存在template标签。

<div id="app">
  //此处的template标签中的内容显示并且在dom中不存在template标签
<template>
  <div>我是template</div>
  <div>我是template</div>
</template>
</div>
  //此处的template标签中的内容在页面中不显示，但是在dom结构存在该标签及内部结构
<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>

注意： vue实例绑定的元素内部的template标签不支持v-show指令，即v-show="false"对template标签来说不起作用。但是此时的template标签支持v-if、v-else-if、v-else、v-for这些指令。