vue-learning：12-1- HTML5的<template>内容模板元素
HTML5的<template>内容模板元素
HTML内容模板<template>元素将它其中的内容存储在页面文档中，以供后续使用，该内容的DOM结构在加载页面时会被解析器处理，但最终内容不会在页面中显示。
<template>元素的特点
- 天生隐藏，不可见性：
display:none及其内容 - childNodes无效，即在js中不能像常规元素一样获取其内容，必须使用
content属性获取。 - 文档任意位置：
<head>/<body>/<script>都可以
<template>的不可见具体指两个方面：
一个是指本身不可见性，是因为display:none属性。如果把这个属性置为display:block打开，它还是在页面有占位,并且可以设置相应属性。
另一个是指其内容的不可见性，它内部的子节点理论上是不存在的，即使display：block;后内容也不会显示。js调用常规元素的属性获取也不行。必须通过特殊的content属性获取其存储的节点内容。
放置文档任意位置<head>/<body>/<script>
这个元素的意义何在呢？
有一个需求，需要根据Ajax请求返回的数据渲染表格内容，使用原生DOM或jQuery的做法，for循环遍历数据列表，每次循环都要创建<tr></tr>元素和<td><td>元素，为<td>添加内容后插入到<tr>元素中，然后拼接<tr>元素，遍历结束后再将所有<tr>元素插入到<table>中。
这还是简单的元素结构，如果还有添加类、样式或事件，就更为麻烦了。此时如果我们用模板元素将结构定义好，那么在js中只需要复用元素，更改对应的内容即可插入父节点中，更为便捷。这也是现代MVVM框架常用的模板方式。
参考链接：
MDN: template
cnblog
vue-learning：12-1- HTML5的<template>内容模板元素的更多相关文章
- HTML5中<template>标签的详细介绍
HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 templa ...
- 还在拼字符串？试试HTML5的template标签
HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 templa ...
- 取消chrome浏览器下input和textarea的默认样式；html5默认input内容清除“×”按钮去除办法
取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...
- 将HTML5 Canvas的内容保存为图片借助toDataURL实现
将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现,具体实现如下,感兴趣的朋友可以参考下哈,希望对你有所帮助 <html> ...
- vue实例属性之el，template，render
一.el,template,render属性优先性当Vue选项对象中有render渲染函数时,Vue构造函数将直接使用渲染函数渲染DOM树,当选项对象中没有render渲染函数时,Vue构造函数首先通 ...
- "[Vue warn]: Failed to mount component: template or render function not defined"错误的解决
VUE中动态路由出错: vue.esm.js?a026: [Vue warn]: Failed to mount component: template or render function not ...
- Vue:实践学习笔记(6)——使用SLOT分发内容
Vue:实践学习笔记(6)——使用SLOT分发内容 Slot Slot是什么 Slot是父子组件的通讯方式,可以将父组件的内容显示到子组件之中. 使用SLOT前 比如我在定义组件的时候,在里面输入了X ...
- Vue Learning Paths
Vue Learning Paths Vue Expert refs https://vueschool.io/articles/vuejs-tutorials/exciting-new-featur ...
- vue实例属性之el，template，render--(转载)
转载链接:https://www.cnblogs.com/camille666/p/vue_instance_prop_el_template_render.html 一.el,template,re ...
随机推荐
- 通过在__init__.py中定义__all__变量，来简化from*import*的书写
下图是一个带被引入使用的包的结构,包名比较长,给书写from*import*带来很多麻烦 为了解决麻烦,在__init__.py编写了如下内容 from .httputil import HTTPUt ...
- JavaScript--自调用函数(小闭包)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【JZOJ4846】【NOIP2016提高A组集训第5场11.2】行走
题目描述 数据范围 对于70%的数据保证 n <= 1000 对于100%的数据保证 n,q <= 10^5,c_i,v_i <= 10^{18} 保证每次修改后的边权小于等于原来的 ...
- Python之路,Day1 - Python基础1 --转自金角大王
本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...
- spingboot项目在windows环境中运行时接收参数及日志中文乱码
1.logback.xml配置 appender中添加 <param name="Encoding" value="UTF-8" /> <co ...
- Kafka 简易教程
1.初识概念 Apache Kafka是一个分布式消息发布订阅系统. TopicKafka将消息种子(Feed)分门别类, 每一类的消息称之为话题(Topic). Producer发布消息的对象称之为 ...
- oracle函数 MAX([distinct|all]x)
[功能]统计数据表选中行x列的最大值. [参数]all表示对所有的值求最大值,distinct只对不同的值求最大值,默认为all 如果有参数distinct或all,需有空格与x(列)隔开. [参数] ...
- background背景色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- SSM整合 mybatis多条件查询与分页
多条件查询与分页: 通过页面的houseName.floorage获取值传到前端视图(HouseSearchVO)实体类中的houseName,floorage建立houseSearchVO对象. 通 ...
- 【CSS3】使用CSS3制作全屏切换效果
在线演示: DEMO DEMO中及以下代码并没有写兼容代码,请使用高级浏览器打开,IE版本对CSS3支持并不太友好,IE11打开没有滚屏效果. 兼容代码前缀: -webkit- -moz- -o- - ...