注册一个元素

<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. SQL中禁用trigger

    SQL中禁用所有trigger   编写人:CC阿爸 2014-6-15 在日常SQL数据库的操作中,如何快速的禁用所有trigger? --禁用某个表上的所有触发器 ALTER  

  2. SIM800/SIM900/SIM7000/SIM7600底层操作接口_句柄方式完全分离通信底层

    使用SIMCOM公司通信模块将底层的通信与应用完全进行了分离,便于移植. SIMCOM.h //定义了相关的结构体与类型. SIMCOM_AT.c//定义了底层的AT接口 SIMCOM_GSM.c// ...

  3. VS2017开发Linux平台上的程序

    重装系统后安装VS2015时卡住了,于是试试看VS2017怎样,听说还支持调Linux.发现VS2017跟12/13/15又有了新的飞跃,竟然支持模块化下载,对于我这种主要写C++简直是个福音,勾了L ...

  4. NPOI-Excel系列-1000.创建一个标准的Excel文件

    using NPOI.HSSF.UserModel; using Microsoft.VisualStudio.TestTools.UnitTesting; using System.IO; name ...

  5. 汇编_指令_JMP

    JMP指令 JMP是汇编语言中的无条件跳转指令.无条件跳转指令可转到内存中任何程序段.转移地址可在指令中给出,也可以在寄存器中给出,或在储存器中指出. 中文名:无条件跳转指令 外文名:JMP 和调用指 ...

  6. Keras 入门

    “sample”“batch”“epoch” Sample:样本,比如:一张图像是一个样本,一段音频也是一个样本. Batch:批,含有N个样本的集合.每一个batch的样本都是独立的并行处理.在训练 ...

  7. probably another instance of uWSGI is running on the same address

    probably another instance of uWSGI is running on the same address 可以用命令杀掉这个端口在重启: /tcp

  8. ASP.NET中的几种弹出框提示基本实现方法

    我们在.NET程序的开发过程中,常常需要和用户进行信息交互,比如执行某项操作是否成功,“确定”还是“取消”,以及选择“确定”或“取消”后是否需要跳转到某个页面等,下面是本人对常用对话框使用的小结,希望 ...

  9. fireDAC oracle

    copy 4 files to D:\oracleapp\Administrator\product\11.2.0\client_1\BIN setup win 64 bit client .down ...

  10. 拦截TextBox 双击消息

    Option Explicit Public Declare Function GetWindowLong Lib "user32" Alias "GetWindowLo ...