template是H5中的标签。
特性:
1. 标签内容隐藏性
template天生display:none,同时模板元素内部内容是不会呈现的。
2. 标签位置任意性
类似script或者style标签,可以在head中,也可以在body或者frameset中。
3. childNodes无效性
template.childNodes为一个空对象。可以使用innerHTML获取完整的HTML片段。
template拥有一个content属性,template.content会返回一个文档片段,可以理解为另一个document。使用document下的一些查询API就可以获得template标签里面的“伪子元素”了。
var temp = $('#example');
var child = temp.content.querySelector('p');
var childText = child.innerHTML;
Vue注册组件时,template中可以直接写HTML模板;或者传一个id,将直接在template后面的内容,通过template标签写出来,代码可读性更强,然后通过id进行连接。
简单示例:
HTML:
<body>
<template id='example'>
<p>i'm biu</p>
</template>
<div id="app">
<test></test>
</div>
</body>
JS:
Vue.component('test', {
template: '#example'
})
new Vue({
el: '#app',
})
可以将<test></test>注释或复制,验证和查看实际渲染效果。