vue中的template标签

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

<template id="tem">
        <div id="app">
            <h1 id="title">hello world!</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.log(tem);

发现，在控制台输出的dom结构是这样的：
这里写图片描述
所以要操作template标签内部的dom必须要用下面的方法–content属性：

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

2.在非单组件文件的vue.js的程序里，常会剪刀一个标签，似乎在官网上也没有专门讲到这个标签。
那这个到底是什么玩意？

实际上元素是被当做一个不可见的包裹元素，主要用于分组的条件判断和列表渲染。

具体情况见官方文档：
1、“条件渲染”，其中的章节——在元素上使用v-if条件渲染分组
这里写图片描述
 2、“条件渲染”——用key管理可复用的元素

 3、“条件渲染”——v-show

4、“列表渲染”——v-for on a

5、“列表渲染”——v-for with v-if

vue中的template标签

猜你喜欢