前端组件化Polymer入门教程(3)——快速入门
本系列主要翻译官方的教程,因为国内目前这方面的资料太少了,但也不一定和官网的一样,反正就是自己想到哪就写到哪。
如果我没有说明,默认情况下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)——快速入门的更多相关文章
- 前端组件化Polymer入门教程(1)——初识&&安装
前端组件化Polymer入门教程目录: 前端组件化Polymer入门教程(1)--初识&&安装 前端组件化Polymer入门教程(2)--快速入门 前端组件化Polymer入门教程(3 ...
- 前端组件化Polymer深入篇(1)
在前面的几节里面简单的介绍了一下Polymer的基本功能,但还有一些细节的东西并没有讨论,所有打算花点时间把Polymer的一些细节写一下. new和createElement有区别吗? <sc ...
- 前端组件化Polymer入门教程(5)——生命周期
以前我对生命周期这个概念还真不是很清楚,不过想想也简单,比如说人的生命周期,无非就是生老病死.而对于程序的生命周期就是说,它在每个阶段都会做不同的事,再比如说回调函数把,ajax返回的时候它才执行,那 ...
- 前端组件化Polymer入门教程(7)——Local DOM
DOM元素的创建和管理被称为本地DOM(Local DOM) 本地DOM模板 如果你需要使用本地DOM,你们需要用<dom-module>并指定一个相匹配的ID. <dom-modu ...
- 前端组件化Polymer入门教程(2)——Hello world
本节为体验篇,就是让你了解它有哪些功能,不做详细说明,后面再来讲细节. 自定义元素 组件页 <link rel="import" href="../polymer- ...
- 前端组件化Polymer入门教程(8)——事件
可以在listeners对象中监听事件 <x-custom></x-custom> <dom-module id="x-custom"> < ...
- 前端组件化Polymer入门教程(6)——监听属性值变化
监听属性值变化 如果需要监听属性值变化可以通过给observer赋值一个回调函数. <say-Hello></say-Hello> <dom-module id=&quo ...
- 前端组件化Polymer入门教程(4)——自定义元素
除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式. template.html <link rel="import" ...
- Vue.js:轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
随机推荐
- 从晶体管到web浏览器
几年前写了这个,想放到网上,招聘很困难,很多现代计算机科学教育真的很糟,很难找到懂得现代计算机堆栈的第一(基本)原理的人. 如果我曾经再次得到了12周的自由,我会提供这个作为课余学习的play,我也想 ...
- uwsgi_read_timeout超时处理
最近发现一服务器一个奇怪的现象: Django的视图函数在浏览器一个请求的情况下,竟然做了两个请求的函数处理.不可思议,找了几天也不知道为什么, 只发现只要用uwsgi_read_timeout之后, ...
- Set tooltip on customized tab header in WPF
<UserControl> <UserControl.Resources> <ResourceDictionary> <ResourceDictionary. ...
- kepware http接口 javascript开发
读取某变量的值(jquery var settings = { "async": true, "crossDomain": true, "url&qu ...
- java注解学习(1)注解的作用和三个常用java内置注解
今天,记录一下自己学习的关于注解方面的知识. Annotation是从JDK5.0开始引入的新技术 Annotation的作用: -不是程序本身,可以对程序做出解释(这一点和注释没什么区别) -可以被 ...
- Linqpad工具
下载地址: http://www.linqpad.net/ 可以通过连接数据库,直接测试LINQ语句,并可以转化为Lamda .SQL语句. 非常好用的小工具,记录一下.
- Lambda架构
转载:https://blog.csdn.net/brucesea/article/details/45937875 1.Lambda架构背景介绍 Lambda架构是由Storm的作者Nathan M ...
- 万能头文件#include <bits/stdc++.h>
最近在做题的时候看到别人的题解发现别人都用这个 突然之间打开新世界的大门 去百度之后才知道#include <bits/stdc++.h>包含了目前所有的c++头文件 也就是说只要用#in ...
- fresco加载本地图片、gif资源
首先 来看看fresco 是个神马东西 https://github.com/facebook/fresco 这个是fresco的一个官方gifhub 官网为http://frescolib.org/ ...
- 【文文殿下】[CEOI2004]锯木厂选址 题解
题解 我们枚举建厂的位置,发现有个\(n^2\)的DP.随手搞个斜率优化到\(O(n)\). #include<bits/stdc++.h> using namespace std; ty ...