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. 项目中用到的input 遇到的问题的归类

    input 前几天 为了这个词 用在搜索框被我们总监喷,为了加强印象,我把它记录下来 最原始的造型 <input type="text" value="搜索&quo ...

  2. static类

    静态类,用于类内部. 静态类,不需要创建父类对象,即可使用. 非静态类,需要先创建父类对象,才可使用. class A{ static class  B1{} class B2{} } = new A ...

  3. Arcgis Android - HelloWorld

    概述 虽然esri官网上最新版本是10.2.4,但是例子中实在是很难运行,总是出现各种各样的bug.又因为初学是Android,所以不想太浪费时间弄些配置了.决定先将v2.0.0的Arcgis for ...

  4. 检查DOM能力的函数

    var a=document.implementation.hasFeature("Core","2.0"); var b=document.implement ...

  5. 高放的c++学习笔记之关联容器

    标准库提供8个关联容器 按关键字有序保存有(红黑树实现) set map multset 关键字可重复出现的set multimap  关键字可重复出现的map 无序保存 哈希实现 unorderre ...

  6. sqlserver常用全局变量

    @@SERVERNAME    : 返回运行SQL Server 2000本地服务器的名称. @@REMSERVER       : 返回登录记录中记载的远程SQL Server服务器的名称. @@C ...

  7. Android 访问权限设置

    Android开发应用程序时,有时我们要用到很多权限, 今天我就收集了一些开发时可能用到的开启权限设置. 这些权限都是在 AndroidManifest.xml设置. 设置方法 <uses-pe ...

  8. Python自动化运维之11、面向对象基础

    一.简介 面向对象编程是一种编程方式,使用 “类” 和 “对象” 来实现,所以,面向对象编程其实就是对 “类” 和 “对象” 的使用.类就是一个模板,模板里可以包含多个方法(函数),方法里实现各种各样 ...

  9. TFS 如何恢复到指定版本

    一. 签出文件,然后获得指定版本. 二. 覆盖本地文件. 三.选择合并冲突. 四. 签入恢复的文件. 五. 解决冲突,选择抛弃服务器版本.

  10. IOS动画总结

    IOS动画总结   一.基本方式:使用UIView类的UIViewAnimation扩展 + (void)beginAnimations:(NSString *)animationID context ...