注册一个元素

<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. pycharm修改代码模板支持中文输出

    python2.x默认不支持中文输出,需要在py的开头添加 #coding: utf- 在pycharm里面,选项,editor,file and code templates,选择python sc ...

  2. python3_爬虫_爬百度音乐

    工具及环境 1.操作系统:windows 64位系统 2.软件工具:谷歌浏览器.pycharm集成开发工具 3.第三方库:request 注:如果第三方库搭建有困难,请看博客:https://www. ...

  3. 《Linux内核精髓：精通Linux内核必会的75个绝技》一HACK #1 如何获取Linux内核

    HACK #1 如何获取Linux内核 本节介绍获取Linux内核源代码的各种方法.“获取内核”这个说法看似简单,其实Linux内核有很多种衍生版本.要找出自己想要的源代码到底是哪一个,必须首先理解各 ...

  4. springcloud(五) Hystrix 降级，超时

    分布式系统中一定会遇到的一个问题:服务雪崩效应或者叫级联效应什么是服务雪崩效应呢? 在一个高度服务化的系统中,我们实现的一个业务逻辑通常会依赖多个服务,比如:商品详情展示服务会依赖商品服务, 价格服务 ...

  5. selenium+python自动化79-文件下载（SendKeys）

    前言 文件下载时候会弹出一个下载选项框,这个弹框是定位不到的,有些元素注定定位不到也没关系,就当没有鼠标,我们可以通过键盘的快捷键完成操作. SendKeys库是专业的处理键盘事件的,所以这里需要用S ...

  6. django-连接mysql失败

    如果你的数据库连接报错,缺少组件,可以安装以下的包 安装依赖(如果使用虚拟环境,需要在虚拟环境下安装) 安装mysql开发依赖包   sudo apt-get install libmysqlclie ...

  7. [Delphi] FMXUI - 沉侵式状态栏

    好消息!FMXUI正式支持Android和IOS的沉侵式状态栏了. 先来看看效果图 安卓: IOS: 一.Android 沉侵式状态栏 FMXUI的沉侵式状态栏支持SDK版本大于21的Android系 ...

  8. 通过 NPOI 生成 Excel

    HSSFWorkbook hssfworkbook; ISheet sheet1; public void BuildExcel() { hssfworkbook = new HSSFWorkbook ...

  9. spring jpa sqls

    package com.example.repository; import java.util.List; import org.springframework.data.jpa.repositor ...

  10. 跟我学算法- tensorflow 实现RNN操作

    对一张图片实现rnn操作,主要是通过先得到一个整体,然后进行切分,得到的最后input结果输出*_w[‘out’] + _b['out']  = 最终输出结果 第一步: 数据载入 import ten ...