vue注册组件template传id

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:


    

    

JS:

Vue.component('test', {
    template: '#example'
})
new Vue({
    el: '#app',
})

可以将注释或复制,验证和查看实际渲染效果。

你可能感兴趣的:(vue)