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

//当前页面只显示"我是自定义表现abc"这个内容，不显示"我是template",这是因为template标签天生不可见
2 <template><div>我是template</div></template>
3 <abc>我是自定义表现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]。得到一个类数组
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标签中的内容显示并且在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>