注册一个元素

<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. /etc/sysctl.conf参数解释(转)

    来自<深入理解Nginx模块开发与架构解析> P9 #表示进程(例如一个worker进程)可能同时打开的最大句柄数,直接限制最大并发连接数fs.file max = 999999 #1代表 ...

  2. Oracle使用startup与startup force启动的区别

    1. startup 就是正常启动数据库,没什么好说的. 2. startup force 是shutdown abort + startup的组合,即强制关闭数据库+ 正常启动数据库,想快速重启数据 ...

  3. emacs之配置自动安装脚本

    emacsConfig下建立install目录,结构大概这样 . ├── auto-complete-etags-setting.el ├── auto-complete-setting.el ├── ...

  4. Log4j(2)--日志等级

    Log4j根据日志信息的重要程度,分OFF.FATAL.ERROR.WARN.INFO.DEBUG.ALL 当然再细分的话 还有 FATAL(严重错误), 但是Log4j官方建议实际实用的话,Log4 ...

  5. jQuery的删除的三种方法remove(),detach(),empty()

    remove()方法是从DOM中删除所有匹配的元素,包括匹配元素的子元素.但是他会有一个返回值, 返回值是一个指向已被删除的节点的引用,所以说,remove删除的元素,还可以再回收利用. var $l ...

  6. Centos命令行窗口显示一大串前缀，777;notify;Command completed;的解决方法

    How to remove the return code from the terminal prompt In addition to the PS1 environment variable, ...

  7. Oracle中 HWM与数据库性能的探讨

    链接:http://www.eygle.com/archives/2011/11/oracle_hwm_tuning.html 本文讨论的是oracle中关于table的HWM的内容,主要包括这样几个 ...

  8. ThreadPoolExecutor – Java Thread Pool Example

    https://www.journaldev.com/1069/threadpoolexecutor-java-thread-pool-example-executorservice   Java t ...

  9. 如何更改Windows10的计算机基本信息

    请问如何去掉红色框内的内容?优化大师更改无效!   最佳答案 打开注册表,定位到如下路径 1 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Current ...

  10. XE7 update1