前端组件化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首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...
随机推荐
- 探Java多线程Thread类和Runnable接口之间的联系
首先复习一下Java多线程实现机制,Java实现多线程方法有如下这么几种: 1.继承了(extends)Thread类 2.实现了(implements)Runnable接口 也就是说 有如下两种情 ...
- hdu 5088 高斯消元n堆石子取k堆石子使剩余异或值为0
http://acm.hdu.edu.cn/showproblem.php?pid=5088 求能否去掉几堆石子使得nim游戏胜利 我们可以把题目转化成求n堆石子中的k堆石子数异或为0的情况数.使用x ...
- 二分图学习——基础dfs判断二分图
#include <iostream> #include <cstdio> #include <string.h> #include <vector> ...
- codeforces 477D
题意:给定一个长度<=5000的二进制字符串S,以及一个初始为0的n,有一下两种操作: 1. 输出n(n>=1并且为2进制形式输出) 2.n=n+1 每次选择一种操作.. 求:1.有多少方 ...
- poj2094
很不错的一道题,很让我见识到了差分序列的运用的神奇之处..一下是从北邮BBS看到的题解,写得很清楚..这边就直接转过来. uRLhttp://bbs.byr.cn/#!article/ACM_ICPC ...
- 所有网卡常用信息获取集中展示(CentOS6 &CentOS7)
查看所有网卡,状态.光电类型.ip.广播地址.掩码 1.命令如下 ( string='|%-3s|%-18s|%-10s|%-10s|%-10s|%-16s|%-16s|%-16s|'; br=&qu ...
- cocos 2dx 通过循环实现界面图形的摆放
首先创建一个一维数组 this.starSprites = new Array(); 然后知道星星的间距和坐标后通过如下代码实现位置的摆放 for(var i = 0; i < 6; i++){ ...
- A - Class Statistics
A - Class Statistics Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Subm ...
- websevice动态控制访问ip
一般而言webservice是部署在哪台服务器,然后它的address location就是指向哪个,但是由于有些情况处于各种原因,如网络策略,需要先访问某个ip之后再进行跳转到一个ip,这个时候就需 ...
- WPF设计时
资料太少.中文没有.英文的也残缺不全.待补充.问题暂时解决. 设计器通过使用命名约定来发现自定义设计时程序集 运行时程序集与设计时程序集对应关系 加载顺序 程序集名称(*表示版本号,可省略) 0 ...