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. ARGB和RGB

    ARGB 一种色彩模式,也就是RGB色彩模式附加上Alpha(透明度)通道,常见于32位位图的存储结构. ARGB---Alpha,Red,Green,Blue. Alpha-图像通道 如果图形卡具有 ...

  2. linux(vi)多行注释和取消注释.

    //comment1,'ctrl+v' to VISUAL BLOCK mode.2,'j' or 'k' to select/deselect lines.3,'I' to INSERT mode. ...

  3. VS2013打包与部署

    近期做一个配置工具,完事了想打包一下:由于用的是VS2013:与之前的略有不同,简单的做了一下,在这里分享一下,直接看吧: 首先  是自己新建一个项目 ,我的WPF应用程序 第二步:右键解决方案添加新 ...

  4. 单点登录CAS使用记（五）：cas-client不拦截静态资源以及无需登录的请求。

    一.问题在哪? 在配置cas-client中,有这么一段配置: <filter> <filter-name>CAS Filter</filter-name> < ...

  5. ebay如何确定同一电脑登陆了多个账号，以及同一账号登陆过多台电脑

    转自hilton 的BLOG http://jimqu.blog.51cto.com/105370/654691 一切要从ebay的买家保护说起 ebay作为一个电子商务平台,之所以可以汇聚如此众多的 ...

  6. CentOS下几种软件安装方式

    1.rpmRPM RedHat Package Manager(RedHat软件包管理工具)的缩写,这一文件格式名称虽然打上了RedHat的标志, 但是其原始设计理念是开放式的,现在包括OpenLin ...

  7. onchar

    void CMfcView::OnChar(UINT nChar, UINT nRepCnt, UINT nFlags)//Windows响应函数 { // TODO: Add your messag ...

  8. JavaScript中的內定物件與函式: arguments, callee, caller, this, apply(), call()

    arguments, caller, callee, this都是用在函式(function)內的特殊內定物件.而apply()及call()則是用來呼叫函式的不同作法. arguments可用來取得 ...

  9. JavaScript:Object.prototype.toString方法的原理

    在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. var arr = []; console.log(Obje ...

  10. 关闭Centos的自动更新

    昨天跟老板汇报,提到我们的linux服务器每天自动更新,老板大发雷霆,说生产系统不能够这样,非常不安全,一个师兄也提到他原来在移动的时候,服务器更新也是很谨慎的事情.看来我的思维太技术了,不够全面,所 ...