前端组件化Polymer入门教程(1)——初识&&安装
前端组件化Polymer入门教程目录:
- 前端组件化Polymer入门教程(1)——初识&&安装
- 前端组件化Polymer入门教程(2)——快速入门
- 前端组件化Polymer入门教程(3)——自定义元素
- 前端组件化Polymer入门教程(4)——生命周期
- 前端组件化Polymer入门教程(5)——监听属性值变化
- 前端组件化Polymer入门教程(6)——Local DOM
- 前端组件化Polymer入门教程(7)——事件
- 前端组件化Polymer深入篇(1)
一说到组件化,你可能就想到了React,Angular,Vue,等等...但这些毕竟写法都不一样,你有没有想过,要是统一了多好,如果你有这个想法,那么恭喜,Chrome早在几年前就有这个想法,就是指定一套规范的web组件化方案叫做(Web Component),目前Chreom已经实现了,但其他浏览器支持情况不太乐观。不过有一个兼容库,可以解决这个问题,叫“webcomponents.js”(兼容性其实还是有些问题的,不过作为学习,想那么多干啥。)那么Ploymer.js又是干什么的,话说实现的这一套web组件化自己手动写起来还是有些麻烦的,于是Chreom就写了一个库,叫Polymer.js来简化Web Component的操作,同时它又添加了一些东西,你可以理解为框架,也就是说Polymer这个框架是基于Web Component来写的。
下载地址:webcomponentsjs Polymer
目录:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 这是一个基础版的兼容库 -->
<script src="webcomponents-lite.min.js"></script>
<!-- 将rel修改为import可以引入另外一个HTML,它将会被执行 -->
<link rel="import" href="./template/tab.html">
</head>
<body>
</body>
</html>
导入你需要的组件。
<link rel="import" href="./template/tab.html">
tab.html
在组件中是可以不写html中的那一大堆东西的,在这个组件中我们把Polymer
给引入了进来,可能你会很奇怪,为什么不是一个js文件,后面会讲到,先这样写,接下来我们就可以使用Polymer的功能了。
前端组件化Polymer入门教程(1)——初识&&安装的更多相关文章
- 前端组件化Polymer入门教程(3)——快速入门
本系列主要翻译官方的教程,因为国内目前这方面的资料太少了,但也不一定和官网的一样,反正就是自己想到哪就写到哪. 如果我没有说明,默认情况下index.html始终包含这段代码,后面将不会再贴上来. & ...
- 前端组件化Polymer入门教程(5)——生命周期
以前我对生命周期这个概念还真不是很清楚,不过想想也简单,比如说人的生命周期,无非就是生老病死.而对于程序的生命周期就是说,它在每个阶段都会做不同的事,再比如说回调函数把,ajax返回的时候它才执行,那 ...
- 前端组件化Polymer入门教程(2)——Hello world
本节为体验篇,就是让你了解它有哪些功能,不做详细说明,后面再来讲细节. 自定义元素 组件页 <link rel="import" href="../polymer- ...
- 前端组件化Polymer入门教程(8)——事件
可以在listeners对象中监听事件 <x-custom></x-custom> <dom-module id="x-custom"> < ...
- 前端组件化Polymer入门教程(7)——Local DOM
DOM元素的创建和管理被称为本地DOM(Local DOM) 本地DOM模板 如果你需要使用本地DOM,你们需要用<dom-module>并指定一个相匹配的ID. <dom-modu ...
- 前端组件化Polymer入门教程(6)——监听属性值变化
监听属性值变化 如果需要监听属性值变化可以通过给observer赋值一个回调函数. <say-Hello></say-Hello> <dom-module id=&quo ...
- 前端组件化Polymer入门教程(4)——自定义元素
除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式. template.html <link rel="import" ...
- 前端组件化Polymer深入篇(1)
在前面的几节里面简单的介绍了一下Polymer的基本功能,但还有一些细节的东西并没有讨论,所有打算花点时间把Polymer的一些细节写一下. new和createElement有区别吗? <sc ...
- 要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放
要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放 大师主讲 经验难得 由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...
随机推荐
- hdu 5083 有坑+字符串模拟水题
http://acm.hdu.edu.cn/showproblem.php?pid=5083 机器码和操作互相转化 注意SET还要判断末5位不为0输出Error #pragma comment(lin ...
- execl 导出
/** * 导出 是把数表中的数据添加到execl表中 */ public function export(){ $xlsData = Db('user')->select(); Vendo ...
- NameNode工作机制
NameNode工作机制
- cxgrid回车移到下一个单元格
cxgrid回车移到下一个单元格 cxgrid回车移到下一个单元格 作用:表格式录入全键盘操作. 设置cxgrid1Dbtableview1.optionsBehavior.goToNextCel ...
- Android-Kotlin-接口与多态的表现
上一篇博客介绍了 Android-Kotlin-抽象类与多态的表现 :, 而这一篇博客专门介绍下 接口与多态的表现 选择包名,然后右键: 选择Class类型,会有class: 选择File类型,不会 ...
- 使用nohup后台执行ftp传输命令
因为有的时候会需要长时间传输文件,所以想用nohup 结合shell脚本一起使用,就不用一直在电脑面前了 . nohup 用法: nohup command & 然后就会出现 对应的 pid ...
- cnblogs第一篇文章
大家好,以后我就在这里很多交流分享了!谢谢!
- CentOS7下让Asp.Net Core的网站自动运行
一.安装Nginx yum install nginx 二.配置Nginx vi /etc/nginx/nginx.conf location / { proxy_pass http://127.0. ...
- FFmpeg简易播放器的实现-视频播放
本文为作者原创:https://www.cnblogs.com/leisure_chn/p/10047035.html,转载请注明出处 基于FFmpeg和SDL实现的简易视频播放器,主要分为读取视频文 ...
- KVM虚拟机配置
KVM 全称是 Kernel-Based Virtual Machine.也就是说 KVM 是基于 Linux 内核实现的,KVM有一个内核模块叫 kvm.ko,只用于管理虚拟 CPU 和内存. 在 ...