vue注册组件template传id

最新推荐文章于 2023-02-18 19:38:53 发布

梅花三

最新推荐文章于 2023-02-18 19:38:53 发布

阅读量4.7k

点赞数

分类专栏： vue 文章标签： vue template 组件

本文链接：https://blog.csdn.net/weixin_43794073/article/details/92986449

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>注释或复制，验证和查看实际渲染效果。

梅花三

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue注册组件template传id

template是H5中的标签。特性：1. 标签内容隐藏性template天生display:none，同时模板元素内部内容是不会呈现的。2. 标签位置任意性类似script或者style标签，可以在head中，也可以在body或者frameset中。3. childNodes无效性template.childNodes为一个空对象。可以使用innerHTML获取完整的HTML片段。...
复制链接

扫一扫