本系列主要翻译官方的教程，因为国内目前这方面的资料太少了，但也不一定和官网的一样，反正就是自己想到哪就写到哪。

如果我没有说明，默认情况下index.html始终包含这段代码，后面将不会再贴上来。

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<!-- 这是一个基础版的兼容库 -->

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

	<!-- 将rel修改为import可以引入另外一个HTML，它将会被执行 -->

    <link rel="import" href="./template/template.html">

</head>

template.html始终包含

<link rel="import" href="../polymer-1.7.0/polymer.html">
我们可以创建一个自定义元素，并向这个自定义元素添加属性和方法，不过值得注意的是：自定义元素的名称必须包含一个“-”。

template.html

<script>

  Polymer({

    is: "proto-element",

    ready: function() {

      this.textContent = "I'm a proto-element. Check out my prototype!"

    }

  });

</script>
is：创建一个自定义元素，必须包含“-”，也就是你要的标签名。
ready:当在页面中创建了proto-element这个元素后将会调到这个方法，this表示当前这个元素，this.textContent设置内容。

index.html

<proto-element></proto-element>

就是用is定义的那个名字

效果

添加本地DOM

template.html

<dom-module id="dom-element">

  <template>

    <p>I'm a DOM element. This is my local DOM!</p>

  </template>

  <script>

    Polymer({

      is: "dom-element"

    });

  </script>

</dom-module>
用dom-module来添加原生dom，如果用这种方式需要给它加一个id使用的时候就用这个id当做标签名。
template用来包含css、html

index.html

<dom-element></dom-element>

效果：

与原生DOM结合

template.html

<dom-module id="picture-frame">

  <template>

    <style>

      div {

        display: inline-block;

        background-color: #ccc;

        border-radius: 8px;

        padding: 4px;

      }

    </style>

    <div>

      <content></content>

    </div>

  </template>

  <script>

    Polymer({

      is: "picture-frame",

    });

  </script>

</dom-module>

如果希望在自定义组件中插入内容就需要用到content标签，它会将我们写的标签插入到content中。

index.html

<picture-frame>

  <p>听说你要学前端。</p>

</picture-frame>

效果

提示：将style放在template中，它之会影响template里面的元素。

数据绑定

template.html

<dom-module id="name-tag">

  <template>

  	<!-- 将owner绑定到property上 -->

    This is <b>{{owner}}</b>'s name-tag element.

  </template>

  <script>

  Polymer({

    is: "name-tag",

    // 当元素准备好的时候将owner属性的值设置为"Daniel"

    ready: function() {

      this.owner = "Daniel";

    }

  });

  </script>

</dom-module>

index.html

<name-tag></name-tag>

声明一个属性

template.html

<dom-module id="configurable-name-tag">

  <template>

    This is <b>{{owner}}</b>'s configurable-name-tag element.

  </template>

  <script>

    Polymer({

      is: "configurable-name-tag",

      properties: {

        owner: {

          type: String,

          value: "Daniel"

        }

      }

    });

  </script>

</dom-module>
通过properties声明一个自定义属性，type属性类型，value属性默认内容（如果自定义元素没有写这个属性的话）。

index.html

<configurable-name-tag owner="Scott"></configurable-name-tag>

效果

双向数据绑定

template.html

<link rel="import" href="https://polygit2.appspot.com/components/iron-input/iron-input.html">

<dom-module id="editable-name-tag">

  <template>

    <p>

    This is a <strong>{{owner}}</strong>'s editable-name-tag.

    </p>

    <!-- iron-input exposes a two-way bindable input value -->

    <input is="iron-input" bind-value="{{owner}}" placeholder="Your name here...">

  </template>

  <script>

    Polymer({

      is: "editable-name-tag",

      properties: {

        owner: {

          type: String,

          value: "Daniel"

        }

      }

    });

  </script>

</dom-module>

注意这里不要把polymer.html引进来，iron-input.html是一个对input的扩展库。

index.html

<editable-name-tag></editable-name-tag>

效果

本节完，后面会更加详细的介绍，但是本人也是刚刚接触这个，难免有解释不太清楚的，还请见谅。

前端组件化Polymer入门教程(3)——快速入门的更多相关文章

  1. 前端组件化Polymer入门教程(1)——初识&&安装

    前端组件化Polymer入门教程目录: 前端组件化Polymer入门教程(1)--初识&&安装 前端组件化Polymer入门教程(2)--快速入门 前端组件化Polymer入门教程(3 ...

  2. 前端组件化Polymer深入篇(1)

    在前面的几节里面简单的介绍了一下Polymer的基本功能,但还有一些细节的东西并没有讨论,所有打算花点时间把Polymer的一些细节写一下. new和createElement有区别吗? <sc ...

  3. 前端组件化Polymer入门教程(5)——生命周期

    以前我对生命周期这个概念还真不是很清楚,不过想想也简单,比如说人的生命周期,无非就是生老病死.而对于程序的生命周期就是说,它在每个阶段都会做不同的事,再比如说回调函数把,ajax返回的时候它才执行,那 ...

  4. 前端组件化Polymer入门教程(7)——Local DOM

    DOM元素的创建和管理被称为本地DOM(Local DOM) 本地DOM模板 如果你需要使用本地DOM,你们需要用<dom-module>并指定一个相匹配的ID. <dom-modu ...

  5. 前端组件化Polymer入门教程(2)——Hello world

    本节为体验篇,就是让你了解它有哪些功能,不做详细说明,后面再来讲细节. 自定义元素 组件页 <link rel="import" href="../polymer- ...

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

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

  7. 前端组件化Polymer入门教程(6)——监听属性值变化

    监听属性值变化 如果需要监听属性值变化可以通过给observer赋值一个回调函数. <say-Hello></say-Hello> <dom-module id=&quo ...

  8. 前端组件化Polymer入门教程(4)——自定义元素

    除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式. template.html <link rel="import" ...

  9. Vue.js：轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

随机推荐

  1. 【python】鼠标操作

    [python]鼠标操作 推荐地址:http://www.cnblogs.com/fnng/p/3288444.html --------------------------------------- ...

  2. java基础-day32

    第09天 JDBC连接池&DBUtils工具类 今日内容介绍 u c3p0连接池 u dbcp连接池 u DBUtils工具类 第1章   c3p0连接池 1.1  连接池概述 实际开发中“获 ...

  3. hdu 5099 简单模拟(比较型号)

    http://acm.hdu.edu.cn/showproblem.php?pid=5099 比较两个安卓手机型号,水题 注意点:A is actually implicit and usually ...

  4. bootstrap增删改查

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  5. scrapy分布式

    开始之前我们得知道scrapy-redis的一些配置:PS 这些配置是写在Scrapy项目的settings.py中的! #启用Redis调度存储请求队列SCHEDULER = "scrap ...

  6. 分形之谢尔宾斯基(Sierpinski)地毯

    前面讲了谢尔宾斯基三角形,和这一节的将把三角形变为正方形,即谢尔宾斯基地毯,它是由瓦茨瓦夫·谢尔宾斯基于1916年提出的一种分形,是自相似集的一种. 谢尔宾斯基地毯的构造与谢尔宾斯基三角形相似,区别仅 ...

  7. Rabbit MQ 入门指南

    rabbitMQ是一个在AMQP协议标准基础上完整的,可服用的企业消息系统.他遵循Mozilla Public License开源协议.采用 Erlang 实现的工业级的消息队列(MQ)服务器. Ra ...

  8. 批量拼脚本神器-NimbleText

    工作中要给产品经理写各种脚本拉数据.修改数据.这种批量拼sql,Excel当然是最合适的.但是苦于Excel玩不转,之前一直用Visual Studio Code的多焦点编辑功能,即便如此,这在同事眼 ...

  9. 【推荐】介绍两款Windows资源管理器，Q-Dir 与 FreeCommander XE（比TotalCommander更易用的免费资源管理器）

    你是否也像我一样,随着硬盘.文件数量的增加,而感到对于文件的管理越来越乏力. 于是我试用了传说中的各种软件,包括各种Explorer外壳,或者第三方资源管理器. 最后我确定下来经常使用,并推荐给您的是 ...

  10. SecureCrt使用SSH2登陆海康相机

    海康相机登陆SSH2: 1.安装SecureCRT2.登陆到相机,系统-安全管理-安全服务,勾选启用SSh3,打开SecureCRT,快速链接4.选择协议SSh2,主机Ip填入相机IP,端口默认22, ...