- 浏览: 7874807 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi:
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng:
(转)JAVA获得机器码的实现 -
albert0707:
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707:
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle:
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
现在,W3C没闲着,2013年5月,新的标准中,又引入了新的标签template模板,具体
标准见:https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html#template-element
下面综合进行小结下,供各位学习
首先,服务端的模板是不少了,大家也用的不少,现在其实就是客户端的模板,先看例子:
上面代码是监测浏览器是否支持这标签了。目前只有chrome 26以上才支持这个标签;
template标签中,给出了模板id,其中这里定义了空的图片,因为这些都是在
运行时动态指定的,
例子中的<SCRIPT>部门,就是通过template.content.querySelector去动态指定
填充模板的内容,记得最后要用:
document.body.appendChild(template.content.cloneNode(true));才算激活模板;
<template>标签可以放置在<head>,<body>或者<frameset>当中,也可以放在象table,tr等标签中,比如
但模板暂时还不支持嵌套。
再来个复杂点的例子:
点按钮,就会每次在模板中,不断显示template used:数字 (数字不断+1),
例子其实也很容易理解。
更详细的介绍可以参考:
http://www.html5rocks.com/en/tutorials/webcomponents/template/?redirect_from_locale=zh
标准见:https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html#template-element
下面综合进行小结下,供各位学习
首先,服务端的模板是不少了,大家也用的不少,现在其实就是客户端的模板,先看例子:
function supportsTemplate() { return 'content' in document.createElement('template'); } if (supportsTemplate()) { //支持标签 } else { //不支持
上面代码是监测浏览器是否支持这标签了。目前只有chrome 26以上才支持这个标签;
<template id="hhhhold-template"> <img src="" alt="random hhhhold image"> <h3 class="title"></h3> </template> <script> var template = document.querySelector('#hhhhold-template'); template.content.querySelector('img').src = 'http://hhhhold.com/350x200'; template.content.querySelector('.title').textContent = 'Random image from hhhhold.com' document.body.appendChild(template.content.cloneNode(true)); </script>
template标签中,给出了模板id,其中这里定义了空的图片,因为这些都是在
运行时动态指定的,
例子中的<SCRIPT>部门,就是通过template.content.querySelector去动态指定
填充模板的内容,记得最后要用:
document.body.appendChild(template.content.cloneNode(true));才算激活模板;
<template>标签可以放置在<head>,<body>或者<frameset>当中,也可以放在象table,tr等标签中,比如
<table> <tr> <template id="cells-to-repeat"> <td>some content</td> </template> </tr> </table>
但模板暂时还不支持嵌套。
再来个复杂点的例子:
<button onclick="useIt()">Use me</button> <div id="container"></div> <script> function useIt() { var content = document.querySelector('template').content; var span = content.querySelector('span'); span.textContent = parseInt(span.textContent) + 1; document.querySelector('#container').appendChild( content.cloneNode(true)); } </script> <template> <div>Template used: <span>0</span></div> <script>alert('Thanks!')</script> </template>
点按钮,就会每次在模板中,不断显示template used:数字 (数字不断+1),
例子其实也很容易理解。
更详细的介绍可以参考:
http://www.html5rocks.com/en/tutorials/webcomponents/template/?redirect_from_locale=zh
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 772刚开始用微信小程序开发工具,每次运行任何应用,都报这个错误: ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 496三篇不错的介绍CSS GRID的文章: http://www. ... -
双因素认证(2FA)教程
2017-11-03 09:16 1508http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 780https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1667即使手动输入空格, 也是很不推荐的方法。我推荐全角空格,切换 ... -
(转)讲真,别再使用JWT了
2017-08-17 23:21 973不错的好文: http://insights.thoughtw ... -
(转)手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 2988参考: http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 92801. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多,该何去何从?
2017-08-04 07:17 615http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 822http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 9641 vue2.0手撸闲鱼App https://githu ... -
(收藏)虚拟DOM内部是如何工作的
2017-07-13 22:08 561虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 531【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理:深入浅出 jsonp
2017-07-10 19:55 1396https://lzw.me/a/jsonp.html jso ... -
(转)深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 789深度长文-JavaScript数组所有API全解密 http: ... -
(收藏)网页导出PDF的方案
2017-07-06 07:13 923(收藏)网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1123https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3134http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1534canvas仿芝麻信用分仪表盘 https://segment ... -
(转)CSS 变量教程
2017-05-10 21:12 542http://www.ruanyifeng.com/blog/ ...
相关推荐
domTemplate.js 模板引擎是通过在标签中添加自定义属性,实现动态模板功能,当没有引入domTemplate脚本, 则自定义标签属性不会被浏览器解析,不会破坏原有静态效果,当引入domTemplate脚本,模板引擎回去解析这些...
TemplateRef 在介绍 TemplateRef 前,我们先来了解...在 HTML5 标准引入 template 模板元素之前,我们都是使用 [removed] 标签进行客户端模板的定义,具体如下: [removed] <span>I am span in mock template </s
// 引入模板 你的路径/wxParse/wxParse.wxml"/> //这里data中article为bindName 在需要的地方使用: <template is="wxParse" data="{{wxParseData:article.nodes}}"/> 其中article是后台html值的变量名 ...
vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题,譬如ul里面要接上li的标签,引入is的属性后,你完全可以写成这样 <div class=language-html> <li is=row></li> </div> 这样会保证dom...
5.classes下有四个文件,手动烤到myeclipse项目src根目录下中 6.将服务器上jeecms项目删掉,发布新建的jeecms项目。 三 首页的加载过程 在浏览器中输入http://localhost:8080/jeecms,回车 首先进入配置文件web....
基于官方 text/template 和 html/template 的模板引擎. Template 通过几种惯用方式组合, 为模板提供简洁的使用方式.特性: 模板名仿效 URI 格式, 使用全路径名称命名. 模板名以 ".html" 结尾当作 HTML 模板处理,...
main.js中的引入顺序决定了打包后css的顺序,组件内的样式没有生效可能是被第三方组件样式覆盖了,所以把第三方组件放在前面引入,router放在后面引入,就可以实现组件样式在第三方样式之后渲染。 代码如下: main....
**data:** 数据通过data引入到组件中 在组件中的data要以函数的形式返回数据,当不同的界面用了同一个组件时,才不会以为一个组件的值发生改变而改变其他页面的内容。 {{ }} 双括号语法里面放入数据的变量 组件注册...
5、JS 计算网页内容的宽与高 (浏览器的标准模式与怪异模式) 237 6、JS设置与查看网页的解析模式(值) 249 7、JS判断对象是否已经存在 249 8、CSS设置网页在IE下为灰色显示 250 9、HTML A链接CSS样式 251 10、CSS...
vue项目脚手架 基于Vue-cli 4 图标使用说明 图标文件统一使用png格式 ...├── ├── static/ # 通过标签引入的静态资源 │ └── index.html # HTML 模板 ├── src/ # 源码目录 │ ├── assets/
spring.thymeleaf.check-template-location=true spring.thymeleaf.suffix=.html spring.thymeleaf.encoding=UTF-8 spring.thymeleaf.content-type=text/html spring.thymeleaf.mode=HTML spring.thymeleaf.cache=...
准备: ...Vue.extend({}) 定义组件 template data methods Vue.component(),注册组件的标签,标签在html中是一个挂载点 new Vue() 进行实例化 index.html // css引入 略 <tq></tq> <tq-foo
采用当前最流行的系统设计理念,实现界面与程序100%分离,更换界面轻松自如。首页、栏目页、文档页均生成HTML静态页。大大节省服务器资源消耗...5、修改了模板标签的解析内核。生成静态时避免了1.0资源消耗过大的问题。
例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用小写-小写...
home_include.html 全站公共引入文件 引入js、css样式,还有系统JS变量 home_head.html 全站头部 home_foot.html 全站尾部 home_gbook.html 留言本 home_comment.html 评论 label_ 开头的都是自定义页面 ...
Import Fireworks 对于您手中的FIREWORKS来说这是一个革命,它可以引入FIREWORKS生成的代码,并进一步改进代码! Last Updated 它可以插入网页的最新更新时间,但注意它存在一些BUGS(如2000年问题),如果可以的话...
parse=true 是否作为ftl语法解析,默认是true,false就是以文本方式引入.注意在ftl文件里布尔值都是直接赋值 的如parse=true,而不是parse="true" 用例 /common/copyright.ftl 包含内容 Ftl代码 Copyright ...
home_include.html 全站公共引入文件 引入js、css样式,还有系统JS变量 home_head.html 全站头部 home_foot.html 全站尾部 home_gbook.html 留言本 home_comment.html 评论 label_ 开头的都是自定义页面 art_...
在HTML标签中使用指令215 82指令的编译生命周期215 83为指令编写单元测试217 84定义指令218 85使用指令修改按钮样式219 编写一个按钮指令220 86理解AngularJS的组件指令222 编写一个分页指令222 为分页指令...
很多时候我们需要使用地址三级联动,即省市区三级联动。网上有很多插件,在此介绍Vue的一款地区联动...3.在对应vue文件的template模板上写html标签,如下图所示: 4.在对应vue文件的script上进行data默认,如下图所