注册一个元素

<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. 【python】python实例集<二>

    ##扫描某个ip的端口号 # #-*- coding: utf-8 -*- # import socket # def main(): # sk = socket.socket(socket.AF_I ...

  2. sql server利用cte递归查询

    1.数据环境准备 参考Oracle递归查询文章. 2.查询某个节点下的所有子节点 with cte(id,name,parent_id) as ( select id,name,parent_id f ...

  3. python学习日志

    马上就中秋节,想着再学点新的知识,本来想去继续研究前端知识来着,但是内个烦人的样式css还有js搞的有点脑壳头,以后就主学后端吧,要去死了前端这条心了? 那么寻寻觅觅就入坑最近几年大热的python吧 ...

  4. python 面向对象 初始化

    参考学习: http://www.runoob.com/python/python-object.html 其中 函数里面 self.name 就是用 初始化的 name Employe.empCou ...

  5. 2018-2019-1 20165226《信息安全系统设计基础》 pwd命令的实现

    2018-2019-1 20165226<信息安全系统设计基础> pwd命令的实现 一.学习pwd 查看pwd 得知一个嫩过去文件路径的函数--getcwd i节点值 通过ls -i -a ...

  6. MySQL锁之二：锁相关的配置参数

    锁相关的配置参数: mysql> SHOW VARIABLES LIKE '%timeout%'; +-----------------------------+----------+ | Va ...

  7. alibaba fastjson的使用总结和心得

      最初接触alibaba fastjson是由于其性能上的优势,对比原来采用codehause.jackson的解析,在hadoop平台上的手动转换对象有着将近1/3的性能提升,但随着开发应用越来越 ...

  8. 2018 Multi-University Training Contest 4-Glad You Came(hdu 6356)

    一.思路 线段树维护一个区间最小值,然后对于每次操作,做区间更新即可.要注意的是,在更新的时候,记得剪枝:如果当前更新的值$v \le minv$(minv为当前线段树节点所管辖区间的最小值),直接返 ...

  9. Asp.net 中高亮显示搜索关键字简单方法

    今天用到搜索时的高亮显示,百度了一下,如下面: 1.替换关键字,对字体变色.         public static string ReplaceRed(string strtitle, stri ...

  10. javascript中数组的强大用法·

    1 归并 var a = [{name: 'tom'},{name: 'aiscy'},{name: 'judy'},{name: 'mike'}];a.reduce(function(prev, i ...