Polymer-quick Tour of Polymer

Registering an element

<link rel= "Import"      href= "bower_components/polymer/polymer.html" >
No add <dom-module><script>polymer ({is  : ' proto-element ',  ready:function ()} {    This.innerhtml= ' SFP ';  }}) </script>

Adding local elements: in <template>

<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></dom-module><script>  polymer ({is    : " Dom-element ",  });</script>

Local element layout: in Main

<link rel= "import" href= "bower_components/polymer/polymer.html" ><dom-module id= "Picture-frame" > <!--scoped CSS for this element--<style> div {display      : Inline-block;      Background-color: #ccc;      border-radius:8px;    padding:4px; } </style> <template> <div> <!--any children is rendered here---<content> </content> </div> </template></dom-module><script> Polymer ({is: "Picture-frame",} ); </script> 

<! DOCTYPE html>
Data binding: Defining data in Polymer (), displaying it in <template>
<link rel= "Import"      href= "bower_components/polymer/polymer.html" ><dom-module id= "Name-tag" >  <template>    <!--bind to the "owner" property---is    <b>{{owner}}</b> ' s Name-tag element.  </template></dom-module><script>  Polymer ({    is: "Name-tag",    ready:function () {      //Set this element's owner property      this.owner = "Daniel";    }  }); </script>
Declare the properties: looks like data binding function, actually is to serialize to attribute; Declare attribute, with Hostattributes
<link rel= "Import"      href= "bower_components/polymer/polymer.html" ><dom-module id= " Configurable-name-tag ">  <template>    <!--bind to the ' owner ' property--and this is    <b>{ {owner}} </b> ' s configurable-name-tag element.  </template></dom-module><script>  Polymer ({    is: "Configurable-name-tag",    Properties: {      //Declare the Owner property      owner: {        type:string,        value: ' Daniel '      }    }  }); </script>
Binding properties: Passing a defined value to a property
<link rel= "Import"      href= "bower_components/polymer/polymer.html" ><dom-module id= ' proto-element ' >  <style>  div{    width:100px;    height:100px;    background-color:olive;  }  </style>  <template>    <div>      <p id= ' {{owner}} ' >local dom</p>      < content></content>    </div>  </template></dom-module><script>polymer ({ is  : ' proto-element ',  properties:{    owner:{      type:string,      value: ' Bind Properties '    }  }  }) </script>
　　
　　
Polymer-quick Tour of Polymer