前端组件化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)——初识&&安装的更多相关文章

  1. 前端组件化Polymer入门教程(3)——快速入门

    本系列主要翻译官方的教程,因为国内目前这方面的资料太少了,但也不一定和官网的一样,反正就是自己想到哪就写到哪. 如果我没有说明,默认情况下index.html始终包含这段代码,后面将不会再贴上来. & ...

  2. 前端组件化Polymer入门教程(5)——生命周期

    以前我对生命周期这个概念还真不是很清楚,不过想想也简单,比如说人的生命周期,无非就是生老病死.而对于程序的生命周期就是说,它在每个阶段都会做不同的事,再比如说回调函数把,ajax返回的时候它才执行,那 ...

  3. 前端组件化Polymer入门教程(2)——Hello world

    本节为体验篇,就是让你了解它有哪些功能,不做详细说明,后面再来讲细节. 自定义元素 组件页 <link rel="import" href="../polymer- ...

  4. 前端组件化Polymer入门教程(8)——事件

    可以在listeners对象中监听事件 <x-custom></x-custom> <dom-module id="x-custom"> < ...

  5. 前端组件化Polymer入门教程(7)——Local DOM

    DOM元素的创建和管理被称为本地DOM(Local DOM) 本地DOM模板 如果你需要使用本地DOM,你们需要用<dom-module>并指定一个相匹配的ID. <dom-modu ...

  6. 前端组件化Polymer入门教程(6)——监听属性值变化

    监听属性值变化 如果需要监听属性值变化可以通过给observer赋值一个回调函数. <say-Hello></say-Hello> <dom-module id=&quo ...

  7. 前端组件化Polymer入门教程(4)——自定义元素

    除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式. template.html <link rel="import" ...

  8. 前端组件化Polymer深入篇(1)

    在前面的几节里面简单的介绍了一下Polymer的基本功能,但还有一些细节的东西并没有讨论,所有打算花点时间把Polymer的一些细节写一下. new和createElement有区别吗? <sc ...

  9. 要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放

    要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放 大师主讲 经验难得 由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...

随机推荐

  1. LoadRunner改脚本

    加action,不支持嵌套大括号 Action(){int iCt = 0; iCt = lr_output_message("abcdefg"); iCt = funA(3,5) ...

  2. spring整合quartz时间任务调度框架

    spring整合quartz框架 1.创建maven工程 2.导入jar包(pom.xml) <dependencies> <dependency> <groupId&g ...

  3. MySQL查询练习(45道)

    题目:设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher). 四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1 ...

  4. eclipse生成可执行jar包(引入第三方.jar文件)

    1. eclipse建立普通的java project项目(项目名aa) 2. 项目正常组织通过buildpath加载各种jar包入项目aa比如例子项目里,加入了spring 各种jar包加入各种配置 ...

  5. EndNote安装

    下载地址:https://download.csdn.net/download/noticeable/10283841 EndNote X8.1是一款功能强大的文献管理软件,软件在x8版本中继承了国际 ...

  6. 用命令行上传本地代码到GitHub

    有两种方式上传,ssh和https,ssh老是报错=.=我用的是https 先下载git   https://git-scm.com/downloads 在代码的文件夹的同级目录中邮件打开git ba ...

  7. Http TCP/IP协议和socket之间的区别和联系

    总结,TCP/IP是传输层协议,主要解决数据如何在网路中传输,socket是TCP/IP协议的具体实现,是对TCP/IP协议的封装和应用,属于程序员层面,HTTP是应用层协议,应用层协议很多,类似的像 ...

  8. [php-pear]如何使用 PHP-PEAR安装器,以及使用 PEAR 安装扩展库

    我们都知道 PHP PEAR,就是 PHP Extension and Application Respository,也就是 PHP 扩展和应用代码库. PHP 也可以通过 PEAR 安装器来进行 ...

  9. python threading模块2

    Thread 是threading模块中最重要的类之一,可以使用它来创建线程.有两种方式来创建线程:一种是通过继承Thread类,重写它的run方法:另一种是创建一个threading.Thread对 ...

  10. 为什么要使用Entity Framework

    本文介绍从DDD(Domain-Driven Design[领域驱动设计])的角度来说说为什么要使用Entity Framework(以下都会简称为EF),同时也看出类似Drapper之类的简陋ORM ...