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 ...
随机推荐
- oralce触发器
n 触发器的分类 DML(insert,delete,update)触发器 DDL(create table ,create view...drop...)触发器 系统触发器(与系统相关的触发器,比 ...
- sed 命令用法
Sed:对文件进行编辑操作,对象是行.操作后在屏幕输出结果.如果要直接修改则加-i命令-f filename: 执行某文件内的sed命令-n 只显示被修改的那一行 如文件test内容:Letyou a ...
- hdu1564 简单博弈
多画几个图可以发现规律: #include<stdio.h> int main() { int i,n; while(scanf("%d",&n)!=EOF) ...
- python ASCII编码集
- 洛谷2387 BZOJ3669魔法森林题解
题目链接 BZ链接 这道题被很多人用spfa水了过去,表示很... 其实spfa很好卡,这组数据可以卡掉大多数spfa 链接:密码:rjvk 这里讲一下LCT的做法 我们按照a将边排序,然后依次添加 ...
- Spring Data JPA 查询结果返回至自定义实体
本人在实际工作中使用Spring Data Jpa框架时,一般查询结果只返回对应的Entity实体.但有时根据实际业务,需要进行一些较复杂的查询,比较棘手.虽然在框架上我们可以使用@Query注解执行 ...
- 在WPF中绘制多维数据集
原文 https://stuff.seans.com/2008/08/13/drawing-a-cube-in-wpf/ 是时候使用WPF绘制一个简单的3D对象了.作为WPF中3D图形的快速介绍,让我 ...
- 阿里云POLARDB如何助力轻松筹打造5亿用户信赖的大病筹款平台？
轻松筹首创了“大病救助”模式,帮助了众多病患在第一时间解決了医疗资金等问题,为了从源头解决了医疗资金问题.而在轻松筹这样全球5.5亿用户信赖的大病筹款平台的背后,是日益增长的各种数据.面对这样数据量所 ...
- 20-2 orm分组和聚合以及在项目中执行的一些方法
一 orm分组和聚合 参考:https://www.cnblogs.com/liwenzhou/p/8660826.html 1 表结构: # 第一张表 class Employee1(models ...
- 逆序对（POJ2299 Ultra-QuickSort）
#include<bits/stdc++.h> using namespace std; int n; ],b[],ans;//a为待排序数组,b为临时数组,ans为逆序对数 void m ...