前端组件化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首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...
随机推荐
- 前端- html 和css
html HTML 指超文本标签语言. HTML 是通向 WEB 技术世界的钥匙. html属性:所有标签的通用属性 html事件:On...html5加了很多事件 html视频/音频:处理音视频 h ...
- (转)mysql command line client打不开(闪一下消失)的解决办法
转自:http://www.2cto.com/database/201209/153858.html 网上搜索到的解决办法: 1.找到mysql安装目录下的bin目录路径. 2.打开cmd,进入到bi ...
- 爬虫技巧-西瓜视频MP4地址获取
记录一下西瓜视频MP4地址的获取步骤 目标: 指定西瓜视频地址,如 https://www.ixigua.com/a6562763969642103303/#mid=6602323830,获取其视频M ...
- POJ2536 Gopher II(二分图最大匹配)
Gopher II Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 9005 Accepted: 3724 Descrip ...
- OC语言-block and delegate
参考博客 OC语言BLOCK和协议 iOS Block iOS Block循环引用精讲 iOS之轻松上手block 深入浅出Block的方方面面 Block apple官方参考 1.定义一个block ...
- 声笔飞码GB2312单字效率分析
-----------------------声笔飞码强字方式单字效率分析-------------------------- 2 keys: 567 items, 381900209 ...
- Filter查询
Filter查询 filter是不计算相关性的,同时可以cache,因此,filter速度要块于query 数据准备 POST /lib3/user/_bulk{"index":{ ...
- scikit-FEM-例1-求解Possion边值问题
""" Author: kinnala Solve the problem -∇²u = 1 with zero boundary conditions on a uni ...
- [代码优化]PHP代码优化
// Code snippet 1 $u_id = Hnb_Session::getInstance()->getUserID(); $arr_joinedTribeInfo = array() ...
- Spring IOC 容器源码分析 - 循环依赖的解决办法
1. 简介 本文,我们来看一下 Spring 是如何解决循环依赖问题的.在本篇文章中,我会首先向大家介绍一下什么是循环依赖.然后,进入源码分析阶段.为了更好的说明 Spring 解决循环依赖的办法,我 ...