【Vue】template标签与其.content属性

   template标签，HTML5提供的新标签，更加规范和语义化 ；可以把列表项放入template标签中，然后进行批量渲染。

<template id="tem">

<div id="app">

<h1 id="title">hello,vue</h1>

</div>
</template>

<script type="text/javascript">
var tem=document.getElementById("tem");   //获取template标签
console.log(tem);
console.log(tem.innerHTML);  //

var title = tem.content.getElementById("title");  //在template标签内部内容，必须要用.content属性才可以访问到
console.log(title);

</script>

在HTML页面中复制以上代码，发现在浏览器并没有渲染出任何信息，这是因为template标签内容天生不可见，设置了display:none;属性,同样我们也要留意一些js操作template标签的具体事项：

var tem = document.getElementById("tem");   //获取template标签
console(tem);
发现，在控制台输出的DOM结构是这样的：
<template  id="tem">
#document-fragment
<div id="app">
<h1 id="title">hello,vue</h1>
</div>
</template>  
  
所以，要操作template标签内部的dom必须要用下面的方法-content属性：
[ 8:00--9：00）