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 ...
随机推荐
- iphone开发中使用nib（xib）文件的内存管理
iphoneuinavigationcontrollercocoauiviewvariableswindows 在使用nib文件做界面开发的过程中,加载nib文件后,由于设置了outlet和deleg ...
- BZOJ 3884 上帝与集合的正确用法题解
一道智慧题 其实解这题需要用到扩展欧拉定理, 有了上面的公式,我们不难看出此题的解法. 设b为2^2^2^2^2.....显然,b要比φ(p)要大,所以可以直接套公式 modp时的答案 ans(p)= ...
- PostgreSQL重新读取pg_hba.conf文件
PostgreSQL 配置文件之pg_hba.conf 该文件用于控制访问安全性,管理客户端对于PostgreSQL服务器的访问权限,内容包括:允许哪些用户连接到哪个数据库,允许哪些IP或者哪个网段 ...
- Python基础：13装饰器
装饰器是一个很著名的设计模式,经常被用于有切面需求的场景,较为经典的应用有插入日志.性能测试.事务处理等.装饰器是解决这类问题的绝佳设计,有了装饰器,我们就可以抽离出大量函数中与函数功能本身无关的雷同 ...
- 阿里云发布 Redis 5.0 缓存服务：全新 Stream 数据类型带来不一样缓存体验
4月24日,阿里云正式宣布推出全新 Redis 5.0 版本云数据库缓存服务,据悉该服务完全兼容 4.0 及早期版本,继承了其一贯的安全,稳定,高效等特点并带来了全新的 Stream 数据结构及多项优 ...
- shell不排序去重
一条命令搞定: awk '!a[$0]++' file 如果是第一次出现a[$0]++的值为0(假),而!a[$0]++的值就为1(真),之后就执行print $0 第二次或者两次以上的出现a[$ ...
- SSH基本原理
SSH原理与运用:远程登录 作者: 阮一峰 年12月21日 SSH是每一台Linux电脑的标准配置. 随着Linux设备从电脑逐渐扩展到手机.外设和家用电器,SSH的使用范围也越来越广.不仅程序员离不 ...
- @codechef - BIKE@ Chef and Bike
目录 @description@ @solution@ @accepted code@ @details@ @description@ 输入 n(n ≤ 22) 个点,m(m ≤ 8000) 个边.每 ...
- TOP10！全球顶级云计算公司战斗力排行榜
TOP10!全球顶级云计算公司战斗力排行榜 1亚马逊\VMware.微软 [PConline 资讯]现如今,不谈“云”,似乎会与这个时代格格不入.无论是企业还是个人,都会与“云”扯上关系.可以说,云计 ...
- codeforces1238-div2
C 目前在h的高度,1~h每一个台阶要么处于out的状态,要么处于in的状态,问最少改变几个台阶的状态,使得能够从h的高度到0. 下降的唯一的方式,拉动lever,h-1的状态取反,下落的最大的高度不 ...