template 标签

<template> 元素，用于描述一个标准的以 DOM 为基础的方案来实现客户端模板。该模板允许你定义一段可以被转为 HTML 的标记，在页面加载时不生效，但可以在后续进行动态实例化。（它们是用来放置一大团 HTML 的地方，就是那些你不想让浏览器弄乱的标记...不管它是出于什么理由。）

特性检测

function supportsTemplate() {

return 'content' in document.createElement('template');

}

if (supportsTemplate()) {

// 检测通过！

} else {

// 使用旧的模板技术或库。

}

声明模板

</template>

那个空图片。这是故意留空的。因为页面加载时不会请求图片，因此就不会产生 404 或控制台错误。我们可以随后动态生成图片的 URL。

用 <template> 来包裹内容为我们提供了几个重要特性

1 它的内容在激活之前一直处于惰性状态。本质上，这些标记就是隐藏的 DOM，它们不会被渲染。

2 处于模板中的内容不会有副作用。脚本不会运行，图片不会加载，音频不会播放，...直到模板被使用。

3 内容不在文档中。在主页面使用 document.getElementById() 或 querySelector() 不会返回模板的子节点。

4 模板能够被放置在任何位置，包括 <head>，<body>，或 <frameset>，并且任何能够出现在以上元素中的内容都可以放到模板中。注意，"任何位置"意味着 <template> 能够安全的出现在 HTML 解析器不允许出现的位置...几乎可以作为任何内容模型的子节点。它也可以作为 <table> 或 <select> 的子元素：

<table>

<tr>

<td>some content</td>

</template>

</tr>

</table>

激活一个模板

要使用模板，你得先激活它。否则它的内容将永远无法渲染。激活模板最简单的方法就是使用 document.importNode() 对模板的 .content 进行深拷贝。 .content 为只读属性，关联一个包含模板内容的 DocumentFragment。

var t = document.querySelector('#mytemplate');

// 在运行时填充 src。

t.content.querySelector('img').src = 'logo.png';

var clone = document.importNode(t.content, true);

document.body.appendChild(clone);

在对模板进行冲压(stamping out)后，它的内容开始"启用"。在本例中，内容被拷贝，发出图片请求，最终的标记得以渲染。

http://www.html5rocks.com/zh/tutorials/webcomponents/template/

转载于:https://www.cnblogs.com/chuangweili/p/5164076.html

template 标签相关推荐

vue 修改模板{{}}标签_vue.js - Vue单文件的template标签
问题单文件中用template标签包含html模板内容,但我现在要用一个template标签+v-for来包含多个元素,此时webpack编译时报错了. 下面是vue文件部分内容: {{ bran ...
template标签的用法总结
Template标签用法总结 - Happy work, happy life一.html5中的template标签html中的template标签中的内容在页面中不会显示.但是在后台查看页面DOM结 ...
Vue进阶（幺肆玖）：template 标签
文章目录一.HTML5 中的 template 标签二.Vue 中的 template 标签三.注意事项四.拓展阅读一.HTML5 中的 template 标签 html5中template ...
React中Fragment标签和空标签的使用(vue中的template标签类似)
Fragment作用: 类似于vue中的template标签,将当前dom不渲染后页面.在多层循环中可以添加key属性,其他属性不可以添加.不然会警告,提示只能有key属性和children vdom ...
Vue.js 使用script或template标签创建组件模板内容
为了使HTML代码和JavaScript代码是分离的,便于以后的阅读和维护,我们可以并建议使用<script>或<template>标签创建组件模板内容. <!DOCTY ...
关于template标签用法总结(含vue中的用法总结)
文章目录一.html5中的template标签二.template标签操作的属性和方法三.vue中的template 1.template标签在vue实例绑定的元素内部 2.vue实例中的tem ...
template标签
template标签,顾名思义,模板的意思 HTML5提供的新标签,更加规范和语义化可以把列表项放入template标签中,然后进行批量渲染注:template标签display属性默认为no ...
vue中的template标签
1.template标签,HTML5提供的新标签,更加规范和语义化 :可以把列表项放入template标签中,然后进行批量渲染 <template id="tem">& ...
vue template html属性,详解template标签用法(含vue中的用法总结)
一.html5中的template标签 html中的template标签中的内容在页面中不会显示.但是在后台查看页面DOM结构存在template标签.这是因为template标签天生不可见,它设置了 ...
Django - Template标签操作
Template变量和Template标签: 变量:{{ xxx }} 标签:{% tag %} load staticfiles url static if for csrf_token(跨站请求标 ...

template 标签

template 标签相关推荐

最新文章

热门文章