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

如果我没有说明,默认情况下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. css3种引入方式,样式与长度颜色,常用样式,css选择器

    # CSS三种引入方式 ## 一.三种方式的书写规范 #### 1.行间式 ```html<div style="width: 100px; height: 100px; backgr ...

  2. day30(对象转json(java))

    转换之前需要知道什么是json json类似于map集合:键值对的方式存在,是一种轻量级数据交互格式. eg: {name:" ",age:15} [{name:" &q ...

  3. 探Java多线程Thread类和Runnable接口之间的联系

    首先复习一下Java多线程实现机制,Java实现多线程方法有如下这么几种: 1.继承了(extends)Thread类 2.实现了(implements)Runnable接口 也就是说  有如下两种情 ...

  4. 用Html创建简历

    用最基本的html实现简历的创建 代码 <!doctype html> <html> <head><meta charset="utf-8" ...

  5. brctl命令

    有五台主机.其中一台主机装有linux ,安装了网桥模块,而且有四块物理网卡,分别连接同一网段的其他主机.我们希望其成为一个网桥,为其他四台主机(IP分别为192.168.1.2 ,192.168.1 ...

  6. CentOS下双网卡绑定-bond0

    网卡绑定就是多张网卡逻辑上作为一张网卡用.可分为,负载均衡绑定和冗余绑定两种. 加载bonding驱动   #modprobe bonding 1.编辑虚拟网络接口配置文件 [root@test~]# ...

  7. FFmpeg4.0笔记:rtsp2rtmp

    Github https://github.com/gongluck/FFmpeg4.0-study.git #include <iostream> using namespace std ...

  8. 转(C# 类似右键菜单弹出窗体)

    文章来自 https://www.cnblogs.com/ahdung/p/FloatLayerBase.html 每天进步一点点 新建类  FloatLayerBase 继承Form, 自己有点小改 ...

  9. Redis .Net

    一.Redis简介 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,和Memcached类似,它支持存储的value类型相对更多,包括 ...

  10. linux的cd命令

    面试时被问到了一个命令是什么意思 cd - 还真是一脸懵逼.... 回来试了下 发现真的是一个神奇的命令~ 会跳到之前目录下并输出, 比如