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

如果我没有说明，默认情况下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. linux上搭建solr（用jetty部署）

    环境搭建:centos7及solr7版本 描述:最新版本的solr内置了jetty容器,可以支持jetty部署,从而不需要发布到tomcat下面 首先同样先在/usr/local/mypackage上 ...

  2. POJ2429--GCD & LCM Inverse (UNSOLVED)

    Given two positive integers a and b, we can easily calculate the greatest common divisor (GCD) and t ...

  3. hdu2504

    代码一: //这个没有过 #include<stdio.h> //typedef long long ll; int main() { int T; scanf("%d" ...

  4. jQuery插件初级练习4

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. kettle学习

    数据etl工具,主要用做数据采集和清洗 待续...

  6. ASP.NET MVC Owin 基本理解

    一.OWIN OWIN(Open Web Interface for .Net),定义了一个服务器(IIS)和Web应用程序(MVC,Webform)通信的标准接口,并且通过抽象层使得这两个在微软平台 ...

  7. [php-array] PHP 数组的怪异之处

    // 指定加拿大的 index 为 0 $mobileNation = array( 86 => '中国 + 0086', 44 => '英国 + 0044', 1 => '美国 + ...

  8. FastReport报表设计

    [转载]FastReport报表设计 (2012-10-24 20:37:26) 转载▼ 标签: 转载   原文地址:FastReport报表设计作者:小黑 FastReport报表设计 目录 5.1 ...

  9. 利用C#迭代器的一个杨辉三角示例

    身边有个朋友在跟着廖雪峰的教程学习python,途中遇到了"在Python中使用迭代器打印杨辉三角"的问题,我在帮忙解决的同时顺手写了个简单的C#版本以供补充. internal ...

  10. Maven 集成Tomcat7插件

    Maven已经是Java的项目管理标配,如何在JavaEE开发使用Maven调用Web应用,是很多同学关心的问题.本文将介绍,Maven如何介绍Tomcat插件. Maven Tomcat插件现在主要 ...