注册一个元素

<link rel="import"

      href="bower_components/polymer/polymer.html">
//没有添加<dom-module>

<script>

Polymer({

  is:'proto-element',

  ready:function(){

    this.innerHTML='sfp';

  }

})

</script>

增加本地元素：在<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>

本地元素布局：在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 are rendered here -->

      <content></content>

    </div>

  </template>

</dom-module>

<script>

  Polymer({

    is: "picture-frame",

  });

</script>

<!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>

      <image src="data:images/p-logo.svg">

    </picture-frame>

  </body>

</html>

数据绑定：在Polymer()中定义数据，在<template>中显示

<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>

</dom-module>

<script>

  Polymer({

    is: "name-tag",

    ready: function() {

      // set this element's owner property

      this.owner = "Daniel";

    }

  });

</script>　

声明properties：看起来跟数据绑定功能类似，其实是要序列化为attribute；声明attribute，用hostAttributes

<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>

</dom-module>

<script>

  Polymer({

    is: "configurable-name-tag",

    properties: {

      // declare the owner property

      owner: {

        type: String,

        value: "Daniel"

      }

    }

  });

</script>

绑定properties:把定义的值传给属性

<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>

绑定数据和ready:声明了一个属性owner，default value：'wj', ready 之后改为'sfp'

<link rel="import"

      href="bower_components/polymer/polymer.html">

  <!-- 需要加一个id，value为proto-element -->

  <dom-module id='proto-element'>

    <template>

　　　　//增加本地元素

      <p>this is a local dom</p>

      <p><strong>{{owner}}</strong> test data binding</p>

    </template>

  </dom-module>

  <script>

   Polymer({

     is: "proto-element",

     ready: function() {

      this.owner='sfp';

     },

     properties:{

      owner:{

        type:String,

        value:'wj'

      }

     }

   });

 </script>

　　

　

　　

polymer-quick tour of polymer的更多相关文章

  1. A quick tour of JSON libraries in Scala

    A quick tour of JSON libraries in Scala Update (18.11.2015): added spray-json-shapeless libraryUpdat ...

  2. 【转】Polymer API开发指南 (二)（翻译）

    原文转自:http://segmentfault.com/blog/windwhinny/1190000000596258 公开 property 当你公开一个 Polymer 元素的 propert ...

  3. Polymer——Web Components的未来

    什么是polymer? polymer由谷歌的Palm webOS团队打造,并在2013 Google I/O大会上推出,旨在实现Web Components,用最少的代码,解除框架间的限制的UI 框 ...

  4. Polymer初探

    Polymer是什么? Polymer英文为 n.聚合物:多聚体 网络高分子:聚合体:高分子聚合物 应用在Web组件场景, 表达的是, 一个一个小的Web组件,可以通过此框架聚合为一个 整个页面. h ...

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

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

  6. Polymer API开发指南 (二)（翻译）

    公开 property 当你公开一个 Polymer 元素的 property 名字时,就等于把这个 property 设置为公开API了.公开 property 会有如下的特性: 支持声明数据双向绑 ...

  7. 【转】组件化的Web王国

    本文由 埃姆杰 翻译.未经许可,禁止转载!英文出处:Future Insights. 内容提要 使用许多独立组件构建应用程序的想法并不新鲜.Web Component的出现,是重新回顾基于组件的应用程 ...

  8. [译] MongoDB Java异步驱动快速指南

    导读 mongodb-java-driver是mongodb的Java驱动项目. 本文是对MongoDB-java-driver官方文档 MongoDB Async Driver Quick Tour ...

  9. arcgis arcengine Using environment settings

    In this topic About using environment settings Environment settings summary table About using enviro ...

随机推荐

  1. WebService返回json格式数据供苹果或者安卓程序调用

    1.新建一个WebService. 2. /// <summary> /// DemoToJson 的摘要说明 /// </summary> [WebService(Names ...

  2. 详解Oracle的几种分页查询语句

    转载自:http://database.51cto.com/art/200904/118737.htm 分页查询格式: SELECT * FROM (SELECT A.*, ROWNUM RN FRO ...

  3. c#静态构造函数与构造函数

    构造函数这个概念,在我们刚开始学习编程语言的时候,就被老师一遍一遍的教着.亲,现在你还记得静态构造函数的适用场景吗?如果没有,那么我们一起来复习一下吧. 静态构造函数是在构造函数方法前面添加了stat ...

  4. 利用U盘安装Redhat-server-Linux-7.1

    利用U盘安装Redhat-server-Linux-7.1 [原]红帽 Red Hat Linux相关产品iso镜像下载[百度云]

  5. pycharm中使用redis模块入门

    数据缓存系统:1:mongodb:是直接持久化,直接存储于硬盘的缓存系统2:redis: 半持久化,存储于内存和硬盘3:memcache:数据只能存储在内存里的缓存系统 redis是一个key-val ...

  6. urllib2的GET和POST请求（五）

    urllib2默认只支持HTTP/HTTPS的GET和POST方法 urllib.urlencode() urllib 和 urllib2 都是接受URL请求的相关模块,但是提供了不同的功能.两个最显 ...

  7. OpenCL 图像卷积 1

    ▶ 书上的代码改进而成,从文件读入一张 256 阶灰度图,按照给定的卷积窗口计算卷积,并输出到文件中. ● 代码,使用 9 格的均值窗口,居然硬读写 .bmp 文件,算是了解一下该文件的具体格式,留作 ...

  8. 公共文件模块include

    首先新建一个include 把所有引入的文件放入公共文件里 function getBaseURL() { var pathName = window.document.location.pathna ...

  9. asp.net 不用控件，自动登录（用于和其他系统对接的时候，自动登录系统，用户体验好）

    if (System.Web.Security.Membership.ValidateUser("admin", "123456")) { //这句话很重要,他 ...

  10. Spring JDBC Framework详解——批量JDBC操作、ORM映射

    转自:https://blog.csdn.net/yuyulover/article/details/5826948 一.spring JDBC 概述 Spring 提供了一个强有力的模板类JdbcT ...