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. java多线程心得

    多并发的时候,在什么情况下必须加锁?如果不加锁会产生什么样的后果. 加锁的场景跟java的new thread和Runnable的关系是什么? 看看java的concurrentMap源码. 还有sp ...

  2. Cors 跨域Access-Control-Allow-Origin

    1.Access-Control-Allow-Origin 指定格式 The Origin header field has the following syntax: origin = " ...

  3. 有关phpmailer的详细介绍及使用方法

    第一,需要下载PHPMailer文件包phpmailer. http://phpmailer.sourceforge.net/第二,确认你的服务器系统已经支持socket ,通过phpinfo();查 ...

  4. 网络断开后重连downloadProvider继续下载问题调试分析

    最近在安卓4.4上遇到一个断开wifi后重新连接wifi, downloadProvider继续下载文件失败的问题.于是开始了解下载管理模块的断点续载功能:     1.首先,分析android lo ...

  5. 解释DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci

    解释DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci 在创建数据库的时候,经常用到一句:CREATE DATABASE `tpcms` DEFAUL ...

  6. Mysql 视图笔记2

    这学期开了数据库的课,对sql注入颇感兴趣.因此,对数据库语句也颇为喜爱.遇到了with check option 问题.这属于sql view里面的一个问题.在此略做小结.大牛勿喷! 先自定义一个t ...

  7. 1104解决ecos挂件中数组传递的相关问题。

    1.挂件综述: 挂件组成:_config.html   后台配置,即点添加时的弹出框. default.html  前台显示,即在前台显示出来的页面. widget.php   设置挂件的基本信息.. ...

  8. 【行为型】Interpreter模式

    解释器模式意图为给定的语言定义其文法表示,同时定义该文法表示的一套解释器来解释语言中的句子.该模式说的简单通俗点,其主要用途是用来解释用的.至于解释什么,则要看具体的上下文环境.我们可以为一个表达式专 ...

  9. 用dup2和dup产生一份file descriptor 的拷贝

    在类Unix操作系统里面,.dup2和dup都通过系统调用来产生一份file descriptor 的拷贝.   dup对我来说还很简单   int dup(int filedes);   dup2就 ...

  10. Python自动化运维之8、正则表达式re模块

    re模块 正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则的字符串,在文本处理方面功能非常强大,也经常用作爬虫,来爬取特定内容,Python本身不支持正则,但是通过导入re模块,Python ...