polymer1.0 简要介绍和实例

zhongmeizhi 发布于2019-08-21 10:34 / 969人阅读

摘要：双向数据绑定属性使用属性声明地址除了提供文字内容绑定，还提供元素属性绑定，同样也是双向数据绑定。

polymer是什么呢
一个可以帮助你轻松创建一个自定义标签的库
利用polymer的一些特性你可以创建自定义元素来减少模板代码大小也可以利用它非常简单的创建复杂交互元素

注册元素

生命周期回调

属性的观察

local DOM模板

数据绑定

Register an element

使用Polymer函数注册一个新元素

polymer开发页面就是html模块化
首先你需要一个元素html
proto-element.html

Polymer只有一个参数用于定制元素tag-name properties methods

note: 自定义元素初始化结束后调用ready方法

在index.html中我们可以使用自己定义好的元素

Polymer 是基于webcomponets组件创建机制的库通过简单的提供一些方式帮助创建自定义元素使用Polymer 最底层是webcomponents实现中间是基础元素包括Polymer和自定义基础元素再上层时ui元素页面在调用ui元素

add local Dom

local dom就是自定义元素内部的一些dom节点 polymer设计目标就是语义化比如我现在要一个相册标签项目组不必再一层一层套div 直接引入控件组的html库可能只需要写
成这样

...

gallery.html中可能就要写成这样

index.html这样写

plunker自定义lfx-gallery标签链接地址

note: 自定义元素最好加自己的命名空间以防和浏览器默认标签重名

Composition with local DOM

自定义元素内部节点是可以在外部控制的，可以指定插入自定义元素内部的位置

content标签放置外部自定义dom Polymer会把img放到content区域
plunker元素插入标签内部

note: dom-module内部css样式不会影响到外部

Data binding

数据绑定可以使元素动态修改自己local dom，可以使用{{}}绑定属性

Declare a property

在polymer函数中可以声明属性，每个属性可以分别而设置自己的默认值，标记属性配置，属性观察者还有更多。

双向数据绑定属性使用{{}}
Plunker属性声明地址

Bind to a property

polymer除了提供文字内容绑定，还提供元素属性绑定，同样也是双向数据绑定。

Plunker属性绑定地址
估计大家可能对polymer的速度有单心，不过从目前测下来速度是相当快的
polymer使用这些可以做些什么呢写个timer

是不是和react好像不过我们可以直接在index.html使用标签
而且可以直接当dom处理
Plunker计时器地址

我们再写一个todoapp

polymer提供repeat if等标签来处理数据
Plunker todoapp 地址

polymer可以做markdown编辑器

polymer通过object.observe或者dirty check实现数据观察
Plunker markdown 地址

idc机房托管云服务器多线程实例介绍 ecs实例常用端口介绍实例1和实例2 介绍腾讯云服务器注册和配置流程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85765.html

js mutationobserver简要介绍

摘要：观察者模式介绍观察者设计模式定义了对象间的一种一对多的依赖关系，以便一个对象的状态发生变化时，所有依赖于它的对象都得到通知并自动刷新。观察者模式介绍观察者设计模式定义了对象间的一种一对多的依赖关系，以便一个对象的状态发生变化时，所有依赖于它的对象都得到通知并自动刷新。一些好的文章观察者模式与委托模式的区别深入理解JavaScript系列（32）：设计模式之观察者模式【Ja...

leone 2019-08-21 10:35 评论0 收藏0
js实现23种设计模式

摘要：实现种设计模式最近在学习面向对象的种设计模式，使用和实现了一遍，但是因为目前大三，还没有比较正规的大项目经验，所以学习的过程种我觉得如果没有一定的项目经验的话很难去完全掌控，所以学习的过程中只是大致学习了每种设计模式的特点，我觉得在学习的过js实现23种设计模式最近在学习面向对象的23种设计模式，使用java 和 javascript 实现了一遍，但是因为目前大三，还没有比较正规的大项目经...

codecook 2019-05-23 17:29 评论0 收藏0
【Vue原理】从模板到DOM的简要流程

摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理从模板到的简要流程今天的计划是，写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基...

wenzi 2019-08-23 18:32 评论0 收藏0
Java对象分配简要流程

摘要：在一般应用中，不会逃逸的局部对象所占的比例很大，如果能使用栈上分配，那大量的对象就会随着方法的结束而自动销毁了，垃圾收集系统的压力将会小很多。相关参数设置大对象直接进入年老代的阈值，当对象大小超过这个值时，将直接在年老代分配。 jvm系列垃圾回收基础 JVM的编译策略 GC的三大基础算法 GC的三大高级算法 GC策略的评价指标 JVM信息查看 GC通用日志解读 jvm的card t...

zorro 2019-08-14 15:19 评论0 收藏0
spring bean scope简要说明，有代码示例

摘要：之前一直只知道有作用域，没有怎么关注具体内容，今天特意看了，记录过程以作备忘。之前一直只知道spring bean有作用域，没有怎么关注具体内容，今天特意看了，记录过程以作备忘。作用域（5类）作用域总计5种：singleton, prototype, request, session, global session其中singleton, prototype为常规bean中都可以...

DDreach 2019-08-19 10:42 评论0 收藏0