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. TODO、FIXME和XXX转载

    代码中特殊的注释技术——TODO.FIXME和XXX的用处 // TODO Auto-generated method stub

  2. TFS统计编码行数语句

    ****** Script for SelectTopNRows command from SSMS ******/ SELECT TeamProjectProjectNodeName 项目名称 ,c ...

  3. Cacti监控Linux主机

    1 要监视一台Linux主机,需要在被监控的主机上安装net-snmp相关软件包,CentOS安装可使用“yum -y install net-snmp”命令:# yum -y install net ...

  4. Java内存分配和GC

    Java内存分配和回收的机制概括的说,就是:分代分配,分代回收. 对象将根据存活的时间被分为:年轻代(Young Generation).年老代(Old Generation).永久代(Permane ...

  5. JS实现定时器（类似工行网银支付限时操作）

      js脚本内容: //5秒倒计时 var num = 0 ; var max = 5 ; var id = null ; id = setInterval(box , 1000) ; //1秒钟调用 ...

  6. mysql 查询copy to tmp table造成堵塞

    show full PROCESSLIST; show VARIABLES like 'tmp_table_size' set GLOBAL tmp_table_size=629145600; SHO ...

  7. Ajax 技术原理（转）

    Ajax 技术原理 2010-01-04 原文出处:http://www.nowamagic.net/ajax/ajax_AjaxPrinciple.php 在写这篇文章之前,曾经写过一篇关于AJAX ...

  8. 【转】Nginx配置文件详细说明

    Nginx配置文件详细说明 在此记录下Nginx服务器nginx.conf的配置文件说明, 部分注释收集与网络. #运行用户user www-data;    #启动进程,通常设置成和cpu的数量相等 ...

  9. Reachability 检测网络状态

    -(void)viewWillAppear:(BOOL)animated { [IOSExcept JudgeNetwork];//联网 NSLog(@"检查网络 请稍后....." ...

  10. codevs 1068 乌龟棋

    题目描述 Description 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一 的起点,第N格是终点,游戏要求玩家控制 ...