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 ...
随机推荐
- 【Mysql的那些事】Django数据库配置
1:安装与配置 1:pip install PyMySQL(或者直接使用Pycharm的setting,点击添加PyMySQL) 2:在Django的工程同名子目录的__init__.py文件中添加如 ...
- hdu2897 巴什博奕
n%(q+p)==0,也就是说先手必胜; n%(q+p)<=p,先手必输; n%(q+p)==k if(k>p&&k<=q)先手必胜; if(k>p&& ...
- oracle函数 SUM([distinct|all]x)
[功能]统计数据表选中行x列的合计值. [参数]all表示对所有的值求合计值,distinct只对不同的值求合计值,默认为all 如果有参数distinct或all,需有空格与x(列)隔开. [参数] ...
- oracle访问Table的方式
ORACLE 采用两种访问表中记录的方式: a. 全表扫描 全表扫描就是顺序地访问表中每条记录. ORACLE采用一次读入多个数据块(database block)的方式优化全表扫描. b ...
- 阿里云Kubernetes服务上使用Tekton完成应用发布初体验
Tekton 是一个功能强大且灵活的 Kubernetes 原生开源框架,用于创建持续集成和交付(CI/CD)系统.通过抽象底层实现细节,用户可以跨多云平台和本地系统进行构建.测试和部署. 本文是基于 ...
- python unittest 框架添加测试用例及运行
找出要测试的testcase,并加入到Testsuite,运行Testsuite并把结果给TestResult1.创建TestSuite实例对象suite = unittest.TestSuite() ...
- ipykernel_launcher.py: error: unrecognized arguments: -f /Users/apple/Library/Jupyter/runtime/kernel
当在jupyter下使用parser.parse_args()出错则改换为parser.parse_known_args()[0]其效用是差不多的,至于为什么出现错误,我也不知道…
- [学习笔记]整体DP
问题: 有一些问题,通常见于二维的DP,另一维记录当前x的信息,但是这一维过大无法开下,O(nm)也无法通过. 但是如果发现,对于x,在第二维的一些区间内,取值都是相同的,并且这样的区间是有限个,就可 ...
- call_user_func_array() 内置函数
func_get_args()方法是获取当前文件所有的函数参数 fun_num_args()这个方法是获取方法实参个数 call_user_func_array()这个方法是内置函数,可以直接调用函数 ...
- Git Commit Message 规范
今天来说说团队开发中,对于 Git commit message 规范问题. 社区上有各种 Commit message 的规范,本文介绍 Angular 规范,目前使用较广,比较合理和系统化,并且有 ...