标签：
Polymer简化了Web组件的创建声明，利用这一特性，以更少的代码更简单的方式构建复杂的交互式内容。我们就来一起学习Polymer吧。
注册元素
生命周期回调
属性监听
本地DOM模板
数据绑定
注册元素
注册新元素需要调用 Polymer({})方法，你必须要定一个名称，以便在浏览器中使用他，
名称必须是“xxx-xxx”，就是一定要带个“-”，并为标签名关联一个prototype原型，就是调用Polymer(),所传的{}元素对象！
<link rel="import"
href="bower_components/polymer/polymer.html">
<script>
// 注册 proto-element 元素
Polymer({
is: "proto-element",
// 增加方法到原型上
ready: function() {
this.textContent = "I’m a proto-element. Check out my prototype!"
}
});</script>
<!DOCTYPE html><html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="proto-element.html">
</head>
<body>
<proto-element></proto-element>
</body></html>
<proto-element>元素初使化完成，ready方法会被调用，这里他为其设置元素内容，在浏览器上显示。这个方法就像构造器方法，可以做初使化工作！
扩展DOM元素
<link rel="import"
href="bower_components/polymer/polymer.html">
<dom-module id="dom-element">
<template>
<p>I’m a DOM element. This is my local DOM!</p>
</template>
<script>
Polymer({
is: "dom-element"
});
</script>
</dom-module>
<!DOCTYPE html><html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="dom-element.html">
</head>
<body>
<dom-element></dom-element>
</body></html>
组合 DOM元素
<link rel="import"
href="bower_components/polymer/polymer.html">
<dom-module id="picture-frame">
<template>
<!-- scoped CSS for this element -->
<style>
div {
display: inline-block;
background-color: #ccc;
border-radius: 8px;
padding: 4px;
}
</style>
<div>
<!-- any children are rendered here -->
<content></content>
</div>
</template>
<script>
Polymer({
is: "picture-frame",
});
</script>
</dom-module>
<!DOCTYPE html><html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="picture-frame.html">
</head>
<body>
<picture-frame>
<img src="images/p-logo.svg">
</picture-frame>
</body></html>
注: <picture-frame>定义的CSS只会影响到该元素本身，就是说CSS的作用域只是在这标签内！
数据绑定
使用：{{}}， 数据变化会自动传播更新视图，同时也可以监听属性变化
<link rel="import"
href="bower_components/polymer/polymer.html">
<dom-module id="name-tag">
<template>
<!-- bind to the "owner" property -->
This is <b>{{owner}}</b>’s name-tag element.
</template>
<script>
Polymer({
is: "name-tag",
ready: function() {
// set this element’s owner property
this.owner = "Daniel";
}
});
</script>
</dom-module>
<!DOCTYPE html><html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="name-tag.html">
</head>
<body>
<name-tag></name-tag>
</body></html>
声明属性
属性是 Polymer 元素一个重要组成部分。Polymer 声明的属性常见模式：
1、在注册新元素时，声明，可设置默认值
2、通过元素标签传递属性值
<link rel="import"
href="bower_components/polymer/polymer.html">
<dom-module id="configurable-name-tag">
<template>
<!-- bind to the "owner" property -->
This is <b>{{owner}}</b>’s configurable-name-tag element.
</template>
<script>
Polymer({
is: "configurable-name-tag",
properties: {
// declare the owner property
owner: {
type: String,
value: "Daniel"
}
}
});
</script>
</dom-module>
<!DOCTYPE html><html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="configurable-name-tag.html">
</head>
<body>
<!-- configure a property from markup by setting
the corresponding attribute -->
<configurable-name-tag owner="Scott"></configurable-name-tag>
</body></html>
属性双向绑定
这和AngularJS模式是一样！
Polymer 捕获input事件，Polymer 更新元素属性，自动传播、更新视图
<link rel="import"
href="bower_components/polymer/polymer.html"><!-- import the iron-input custom element --><link rel="import"
href="bower_components/iron-input/iron-input.html">
<dom-module id="editable-name-tag">
<template>
<p>
This is a <strong>{{owner}}</strong>’s editable-name-tag.
</p>
<!-- iron-input exposes a two-way bindable input value -->
<input is="iron-input" bind-value="{{owner}}"
placeholder="Your name here...">
</template>
<script>
Polymer({
is: "editable-name-tag",
properties: {
owner: {
type: String,
value: "Daniel"
}
}
});
</script>
</dom-module>
<!DOCTYPE html><html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="editable-name-tag.html">
</head>
<body>
<editable-name-tag></editable-name-tag>
</body></html>
注: input is="iron-input" 属性是Polymer 己实现的定义元素，他扩展了该元素！
原文来自：开源中国
标签：