前言
HTML内容模板元素只包含全局属性，是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以在运行时使用JavaScript实例化。
将模板视为一个内容片段，存储在文档中供后续使用。虽然解析器在加载页面时确实会处理<template>元素的内容，但这样做只是为了确保这些内容有效；然而，元素的内容不会被呈现。
比如需要ajax刷新一个列表，以前的做法是后端生成html返回，或者前端用DOM构建后加入，但现在有了template标签，html的架构就不需要程序管了，只需要在特定的位置加入ajax请求到的数据即可，比如img的src或者其他text之类的，然后clone这个DOM，加入列表。
模板元素示例
如下代码，验证了<template>元素加载页面时不会呈现(显示)该元素和内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- reset.css -->
<!-- <link rel="stylesheet" href="reset.css"> -->
</head>
<body>
<!-- 内容模板 -->
<template>
<p>文字文字文字</p>
</template>
<!-- end -->
</body>
</html>
运行后，页面没有任何元素及内容，F12审查元素后发现如图现象。
称为文档片段，我们展开看一下。
没错，这需要由JS来操控文档片段的内容才能显示出来，具体解释举例在前言中已经表明。
vue渲染模板元素
通过v-for指令在模板元素中渲染一个list列表
HTML:
<div id="app">
<template>
<ul>
<li v-for="list in list">{{ list }}</li>
</ul>
</template>
</div>
vue：
var vm = new Vue({
el:'#app',
data:{
list:["张三","李四","王五"]
},
})
如图，<template>元素已经自动移除，只保留了我们想要渲染的结构与数据。
其实许多人以前也应该做过类似的事情，把一段html隐藏起来，然后clone它并修改里面的属性或者内容，得到一个DOM，加入列表并显示，用来刷新ajax列表。
2513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
