template跟html的区别_CSS学习

当前位置：网站建设 > 技术支持

template跟html的区别_CSS学习

资料来源：网络整理时间：2023/3/4 1:44:45 共计：3569 浏览

template跟html的区别？

Vue template和html5的template用法比较

1.html5中的template标签

html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。

2.template标签操作的属性和方法

content属性:在js中template标签对应的dom对象存在content属性，对应的属性值是一个dom节点，节点的nodeName是#document-fragment。通过该属性可以获取template标签中的内容，template对象.content可以调用getElementById、querySelector、querySelectorAll方法来获取里面的子节点。

innerHTML:可以获取template标签中的html

3.vue中的template

(1)template标签在vue实例绑定的元素内部

它是可以显示template标签中的内容，但是查看后台的dom结构不存在template标签。如果template标签不放在vue实例绑定的元素内部默认里面的内容不能显示在页面上，但是查看后台dom结构存在template标签。

<!DOCTYPE html>

<head>

<title>template</title>

</head>

<body>

<h1 id="title">hello world! tem</h1>

</div>

</template>

<div>

<h1 id="title">hello world! app</h1>

</div>

</template>

</div>

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>

new Vue({

el : '#app',

})

</script>

</body>

</html>

(2)vue实例中的template属性

将实例中template属性值进行编译，并将编译后的dom替换掉vue实例绑定的元素，如果该vue实例绑定的元素中存在内容，这些内容会直接被覆盖。

特点：

1）如果vue实例中有template属性，会将该属性值进行编译，将编译后的虚拟dom直接替换掉vue实例绑定的元素（即el绑定的那个元素）；

2）template属性中的dom结构只能有一个根元素，如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素；

3）在该属性对应的属性值中可以使用vue实例data、methods中定义的数据。

<!DOCTYPE html>

<head>

<title>template</title>

</head>

<body>

</template>

</abc>

</script>

new Vue({

el:"#app",

data:{

msg:"hello",

flag:true

template:"#first"//通过该属性可以将自定义的template属性中的内容全部替换app的内容,并且会覆盖里面原有的内容，并且在查看dom结构时没有template标签

});

</script>

</body>

</html>

如果将上面的template:"#first"改为template:"#second"，则标签中的内容也会显示在页面上。所以此处利用template标签来定义vue实例中需要设置的template属性。(?)

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CAD中有哪些命令让你觉得相见恨晚_CSS学习 | ·下一条：如何修改placeholder样式_CSS学习