前端组件化Polymer入门教程(1)—

前端组件化Polymer入门教程目录：

一说到组件化，你可能就想到了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首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...

随机推荐

74（2B）Shortest Path （hdu 5636）（Floyd）
Shortest Path Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)T ...
Android webview 退出时关闭声音 4.视频全屏添加cookie
全屏问题,可以参考 http://bbs.csdn.net/topics/390839259,点击 webView = (WebView) findViewById(R.id.webView); vi ...
4.easyloader.js文件的作用
1).easyloader.js文件用于加载指定模块,同时它也会加载指定模块所依赖的组件 2).不使用easyloader加载: 在easyui中有一个Parser解析器,它会解析class中的eas ...
centos下完全卸载mysql（别人写的，我仅仅为了学习记录）
yum方式安装的mysql 1.yum remove mysql mysql-server mysql-libs compat-mysql51 2.rm -rf /var/lib/mysql 3.rm ...
B - Big String
We will construct an infinitely long string from two short strings: A = "^__^" (four chara ...
EBS 定义显示总帐快码设置
自定义一个功能如下,挂到菜单上就可以了功能用户功能名表单参数GL_GLXDQMLK(自定义) 总帐代码列表定义代码 VIEW_APPLICATION="SQLGL" HEL ...
Android-available for offline mode
出现 available for offline mode 字样的异常: 取消打钩 Offine work 点击sync project ..... 成功解决:
Android-Kotlin-抽象类与多态的表现
选择包名,然后右键: 选择Class类型,会有class: 选择File类型,不会自动有class: 目录结构: 定义描述抽象类 Person人类: package cn.kotlin.kotlin ...
文本框仅可接收decimal
文本框html如下: <div><label class="label">价格:</label><input id="TextP ...
使用 DotNetty 实现 Redis 的一个控制台应用程序
零:Demo 跑出来的结果如图上图说明图中左边蓝色的命令行界面,是用windows powershell 命令行链接的. 1.打开powershell命令行界面,输入命令[telnet 127 ...

前端组件化Polymer入门教程(1)——初识&&安装

前端组件化Polymer入门教程(1)——初识&&安装的更多相关文章

随机推荐

热门专题