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

如果我没有说明，默认情况下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. STL其他--<tuple>用法【C11】

     tuple 库 tuple 库 是能够将不同类型的对象组合起来形成一个对象.和pair 对象一样,但是可以组织多种不同类型的元素. tuple中的元素类型是在编译时期决定的.与<utility ...

  2. 《mysql必知必会》学习_第八章_20180730_欢

    第八章学习LIKE操作符,百分百(%)通配符,下划线(_)通配符 P47 select prod_id,prod_name from products where prod_name LIKE 'je ...

  3. PCA原理分析

    动机 在机器学习领域中,我们常常会遇到维数很高的数据,有些数据的特征维度高达上百万维,很显然这样的数据是无法直接计算的,而且维度这么高,其中包含的信息一定有冗余,这时就需要进行降维,总的来说,我们降维 ...

  4. AngularJS $observe $watch

    $observe $watch都可以用来监听值的变化,但是他们有显著的区别.$observe是用来监视DOM属性值的变化,而 $watch监视scope属性值的变化.AngularJS中的监听,都知道 ...

  5. PL/SQL客户端连Oracle很快就断开问题的解决

    PL/SQL登录很短时间session就自动断开 1.首先查看你这个用户的profile文件 select profile from dba_users where username='USERNAM ...

  6. hdu 1226 超级密码

    超级密码 Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Problem D ...

  7. 判断闰年的Java算法

    判断方法 普通年能被4整除且不能被100整除的为闰年. 世纪年能被400整除的是闰年 对于数值很大的年份,这年如果能整除3200,并且能整除172800则是闰年.如172800年是闰年,86400年不 ...

  8. redis-master/slave模式

    类似mysql的master-slave模式一样,redis的master-slave可以提升系统的可用性,master节点写入cache后,会自动同步到slave上. 环境: master node ...

  9. 用XPath查找HTML节点或元素

    更新版以后会在我的新博客更新,请您移步 https://blog.clso.fun/posts/2019-03-03/46.html 虽然JQ和JS都能很方便的查找包含了ID及类名的元素,但某些情况下 ...

  10. 在Windows7系统上能正常使用的程序，Windows10运行后部分状态不能及时变更

    这是最近在开发一个通信项目时遇到的问题,一开始以为是窗体样式的原因,把窗体换成系统窗体之后还是在Win10上不能正常使用,后面突然想到会不会是匹配原因,试了一下,结果真的就正常了. 问题:例如一个通信 ...