polymer 2.0 bower install --save Polymer/polymer #2.0
polymer 2.0的进步:
改进互操作性;
数据系统的改进;
更加的标准;
*自定义元素V1
polymer2.0 自定义元素
polymer2.0提供一个ES6基类,用来扩展元素;
*新规范有些改变生命周期回掉,调用类的构造函数
生命周期的变化:
constructor
created
connectedCallback
attached
disconnectedCallback
detached
attributeChangedCallback
attributeChanged
ready
类型扩展元素
polymer2.0不支持类型扩展元素 例如:<input is="iron-input">
相反,包装制定元素可以环绕本地元素 例如:<a is="my-anchor">...</a>可以成为:
<my-anchor>
<a></a>
</my-anchor>
<template is="" items="{{items}}">...</template>变为:
<dom-repeat items="{{items}}">
<template>...</template>
</dom-repeat>
-------------------
<style is="custom-style"></style>变为:
<custom-style>
<style>...</style>
</custom-style>
shadowDOM V1
polymer2.0支持DOMV1
数据系统的改进:
1.没有更多的藏检查对象或数组。
2.简单的数组处理
3.成批数据的变化,从而提高性能以及正确性
4.观察员,计算绑定和计算能未定义依赖检查删除。在初始化时调用一次
5.元件初始化被推迟到该元件被链接到主文档
1.没有更多的藏检查对象和数组:
this.property.subpropety='new value!'
this.notifyPath('property');
在2.0中脏检查被取消
this.property.arrayProperty.push({name:'Alice'});
this.property.stringProperty='new value!';
this.property.counter++;
this.notifyPath('property');
this.set('property',this.property);
or
this.property=this.property;
//'property.*' observers fire with the path 'property'
this.set('property.deep.path','new value');
2.简单数组处理
this.array.push('one','two','three');
this.notifyPath('array');
对于这种变化的好处:
1.原始值的阵列支持
2.数组项不需要是唯一的
//fires observers for the paths 'array' and 'array.length'
this.array.push('one','two','three');
this.notifiyPath('array');
//fires observers for 'array.splice','array',and 'array.length'
this.push('array','one','two','three');
只包括indexSplices属性 , 而不是keySplices
批处理数据变化:
两种方法来创建一组连续的变化:
this.setProperties({item:'Orange',count:12});
this.a=10;
this.b=20;
this.setProperies({a:10,b:20});
polymer 2.0的进步:
改进互操作性;
数据系统的改进;
更加的标准;
*自定义元素V1
polymer2.0 自定义元素
polymer2.0提供一个ES6基类,用来扩展元素;
*新规范有些改变生命周期回掉,调用类的构造函数
生命周期的变化:
constructor
created
connectedCallback
attached
disconnectedCallback
detached
attributeChangedCallback
attributeChanged
ready
类型扩展元素
polymer2.0不支持类型扩展元素 例如:<input is="iron-input">
相反,包装制定元素可以环绕本地元素 例如:<a is="my-anchor">...</a>可以成为:
<my-anchor>
<a></a>
</my-anchor>
<template is="" items="{{items}}">...</template>变为:
<dom-repeat items="{{items}}">
<template>...</template>
</dom-repeat>
-------------------
<style is="custom-style"></style>变为:
<custom-style>
<style>...</style>
</custom-style>
shadowDOM V1
polymer2.0支持DOMV1
数据系统的改进:
1.没有更多的藏检查对象或数组。
2.简单的数组处理
3.成批数据的变化,从而提高性能以及正确性
4.观察员,计算绑定和计算能未定义依赖检查删除。在初始化时调用一次
5.元件初始化被推迟到该元件被链接到主文档
1.没有更多的藏检查对象和数组:
this.property.subpropety='new value!'
this.notifyPath('property');
在2.0中脏检查被取消
this.property.arrayProperty.push({name:'Alice'});
this.property.stringProperty='new value!';
this.property.counter++;
this.notifyPath('property');
this.set('property',this.property);
or
this.property=this.property;
//'property.*' observers fire with the path 'property'
this.set('property.deep.path','new value');
2.简单数组处理
this.array.push('one','two','three');
this.notifyPath('array');
对于这种变化的好处:
1.原始值的阵列支持
2.数组项不需要是唯一的
//fires observers for the paths 'array' and 'array.length'
this.array.push('one','two','three');
this.notifiyPath('array');
//fires observers for 'array.splice','array',and 'array.length'
this.push('array','one','two','three');
只包括indexSplices属性 , 而不是keySplices
批处理数据变化:
两种方法来创建一组连续的变化:
this.setProperties({item:'Orange',count:12});
this.a=10;
this.b=20;
this.setProperies({a:10,b:20});