install Polymer and explore creating our first custom element:

 bower install polymer

index.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Polymer</title>

    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="import" href="bower_components/polymer/polymer.html">

    <link rel="import" href="./hello-world.html">

</head>

<body>

<hello-world name="ZTW"></hello-world>

</body>

</html>
  • include webcomponents-list.js file
  • import polymer.html file
  • import our compoment hello-world.html file

hello-world.html:

<dom-module id="hello-world">

    <template>

        <input type="text" value="{{name::keyup}}"> <!-- {{}} two way data binding, ::bind to event -->

        <h1>Hello, [[name]]</h1> <!-- [[]] one way data binding -->

    </template>

    <script>

        Polymer({

            is: "hello-world"  // string match the tag

        })

    </script>

</dom-module>

[Polymer] Introduction的更多相关文章

  1. A chatroom for all! Part 1 - Introduction to Node.js（转发）

    项目组用到了 Node.js,发现下面这篇文章不错.转发一下.原文地址:<原文>. ------------------------------------------- A chatro ...

  2. Introduction to graph theory 图论/脑网络基础

    Source: Connected Brain Figure above: Bullmore E, Sporns O. Complex brain networks: graph theoretica ...

  3. INTRODUCTION TO BIOINFORMATICS

    INTRODUCTION TO BIOINFORMATICS      这套教程源自Youtube,算得上比较完整的生物信息学领域的视频教程,授课内容完整清晰,专题化的讲座形式,细节讲解比国内的京师大 ...

  4. mongoDB index introduction

    索引为mongoDB的查询提供了有效的解决方案,如果没有索引,mongodb必须的扫描文档集中所有记录来match查询条件的记录.然而这些扫描是没有必要,而且每一次操作mongod进程会处理大量的数据 ...

  5. （翻译）《Hands-on Node.js》—— Introduction

    今天开始会和大熊君{{bb}}一起着手翻译node的系列外文书籍,大熊负责翻译<Node.js IN ACTION>一书,而我暂时负责翻译这本<Hands-on Node.js> ...

  6. 前端组件化Polymer入门教程(8)——事件

    可以在listeners对象中监听事件 <x-custom></x-custom> <dom-module id="x-custom"> < ...

  7. Introduction of OpenCascade Foundation Classes

    Introduction of OpenCascade Foundation Classes Open CASCADE基础类简介 eryar@163.com 一.简介 1． 基础类概述 Foundat ...

  8. 000.Introduction to ASP.NET Core--【Asp.net core 介绍】

    Introduction to ASP.NET Core Asp.net core 介绍 270 of 282 people found this helpful By Daniel Roth, Ri ...

  9. Introduction to Microsoft Dynamics 365 licensing

    Microsoft Dynamics 365 will be released on November 1. In preparation for that, Scott Guthrie hosted ...

随机推荐

  1. 2.Android Studio系列教程2——基本设置与运行

    原文链接:http://stormzhang.com/devtools/2014/11/28/android-studio-tutorial2/   一.项目结构   二.Android Studio ...

  2. Nginx配置域名跳转实例

    要求:浏览器地址栏输入qj.123.com之后,地址自动变成qj.abc.com 配置nginx跳转 server { listen 80; server_name qj.abc.com qj.123 ...

  3. Starting nagios:This account is currently not available nagios

    nagios在启动时报错 # service nagios restartRunning configuration check…done.Stopping nagios: done.Starting ...

  4. STM8S和STM8L调试串口中断的注意点

    1. STM8L串口中断注意点 在调试PM2.5传感器GP2Y1051的时候,发现在仿真的时候开始能够进行数据的接受,但是如果暂停之后就不能接受数据,其实只是接收了一次完整的数据. 问题程序 解决方法 ...

  5. css样式-ime-mode text-transform

    今天遇到一个新的css样式: ime-mode   text-transform  有效小作用 取值:auto : 默认值.不影响ime的状态.与不指定 ime-mode 属性时相同 active : ...

  6. code:blocks 编译环境设置

    1.  支持C99 在菜单settings->compiler settings->comiler settings->Other options 添加: -std=c99 2. 支 ...

  7. ADO.NET 新特性之SqlBulkCopy(批量插入大量数据)

    转自:http://blog.csdn.net/huaer1011/article/details/2312361 在.Net1.1中无论是对于批量插入整个DataTable中的所有数据到数据库中,还 ...

  8. mysql版本问题sql_mode=only_full_group_by

    set @@sql_mode='STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_ ...

  9. mvc4 整合nhibernate3.0配置

    鉴于大家都在解决问题或是学习新东西的时候,并不关注是谁又是谁帮你解决了问题,所有这里为自己做下宣传,我为自己代言. 首先介绍下我的开发环境是vs2010旗舰版,nhibernate采用的是3.0版本. ...

  10. 转：VC中UpdateData()函数的使用

    VC中UpdateData()函数的使用 UpdateData(FALSE)与UpdateData(TRUE)是相反的过程     UpdateData(FALSE)是把程序中改变的值更新到控件中去  ...