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 ...
随机推荐
- node写简单的爬虫（二）
上次我们已经成功的爬取了网站上的图片,现在我们把爬取的图片存储到本地 首先引入request var request=require('request'); http.get(url, functio ...
- C++中delete this
Is it legal (and moral) for a member function to say delete this? As long as you’re careful, it’s ok ...
- Servlet Cookies
Cookie是在多个客户端请求之间持久存储的一小段信息. Cookie具有名称,单个值和可选属性,例如注释,路径和域限定符,生存周期和版本号. Cookie工作原理 默认情况下,每个请求都被视为新的请 ...
- 【Leetcode链表】分隔链表（86）
题目 给定一个链表和一个特定值 x,对链表进行分隔,使得所有小于 x 的节点都在大于或等于 x 的节点之前. 你应当保留两个分区中每个节点的初始相对位置. 示例: 输入: head = 1->4 ...
- Puppet基础
基础架构图介绍 自动化运维框架: 自动化监控: puppet介绍 常用的批量工具介绍: OS Provisioning:PXE,Cobbler OS Configuration:ansible,pu ...
- 尖峰7月线上技术分享--Hadoop、MySQL
7月2号晚20:30-22:30 东大博士Dasight分享主题<大数据与Hadoop漫谈> 7月5号晚20:30-22:30 原支付宝MySQL首席DBA分享主题<MySQL ...
- NSString&NSMutableString常用操作梳理
http://www.cocoachina.com/ios/20150724/12722.html 上一篇梳理了NSArray&NSMutableArray常用操作,这次来梳理一下Object ...
- el-dialog 一些问题 局中滚动
.el-dialog { position: absolute; top: 50%; left: 50%; margin: 0 !important; transform: translate(-50 ...
- Git 进阶：10大技巧让你迅速提升
1.Git自动补全 假使你使用命令行工具运行Git命令,那么每次手动输入各种命令是一件很令人厌烦的事情. 命令: cd ~ curl https://raw.github.com/git/git/ma ...
- 谈一谈Python的上下文管理器
经常在Python代码中看到with语句,仔细分析下,会发现这个with语句功能好强,可以自动关闭资源.这个在Python中叫上下文管理器Context Manager.那我们要怎么用它,什么时候用它 ...