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

如果我没有说明，默认情况下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. day27(反射之内省机制)

    内省 内省:底层是使用反射机制实现的,是对于反射的进一步封装. 反射:通过类名来获取类中的所有属性和方法及类中的所有隐藏的方法. 内省:通过一个标准类(javabean类)来获取bean中的字段.ge ...

  2. Job Interview: Why Only 3 Questions Really Matter

    Even for the most fearless amongst us, job interviews can be nerve wracking. In order to give us the ...

  3. activity之间如何传递list

    可以把list的内容拼成json串再去解析

  4. hihocoder 二分

    题目 一个简单的二分,只是想说明一下,如若要查找一个数组中某个数的下标可以直接用lower_bound()这个函数.只是要考虑到要查找的数不在数组中的这种情况. #include <cstdio ...

  5. 三.int , bool , str

     03.万恶之源-基本数据类型(int, bool, str) 本节主要内容: 1. python基本数据类型回顾 2. int----数字类型3. bool---布尔类型4. str--- 字符串类 ...

  6. lis nlogn算法

    当前所在位的最长上升子序列只和前面一个字符有关 #include <iostream> #include <algorithm> using namespace std; ]; ...

  7. ASP.NET Web API 框架研究 IoC容器 DependencyResolver

    一.概念 1.IoC(Inversion of Control),控制反转 即将依赖对象的创建和维护交给一个外部容器来负责,而不是应用本身.如,在类型A中需要使用类型B的实例,而B的实例的创建不是由A ...

  8. iOS证书说明和发布

    1.首先通过钥匙串访问——证书助理——从证书颁发机构请求证书——填写证书信息(邮箱,常用名称,存储到磁盘)——存储为(自定义名称.certSigningReuqest,简称CSR文件,只是为了提交到苹 ...

  9. [转载]DevOps发展的四个重要阶段

    DevOps是敏捷开发的延续,它将敏捷的精神延伸至IT运营(IT Operation)阶段.敏捷开发的主要目的是响应变化,快速交付价值.以2001年的敏捷宣言发布这个里程碑为起点,开始几年内企业主要在 ...

  10. 关于Entity Framework的概念及搭建

    什么是EF? ADO.NET Entity Framework 是一个对象-关系的映射架构. 它支持直接定义完全独立于数据库结构的实体类,并把它们映射到数据库的表和关系上. 三种编程模型: 数据库优先 ...