前端组件化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 ...
随机推荐
- quartz之hello(java)
quartz 任务调度框架 简单的说:就是在特定的时间,干指定的事件,然后具体到某个对象去做 quartz初之体验: 1.pom.xml文件(导入jar包) <dependencies&g ...
- Leetcode--572. Subtree of Another Tree(easy)
Given two non-empty binary trees s and t, check whether tree t has exactly the same structure and no ...
- gradle构建工具入门
实际设置:系统变量新建: PATH新加: 查看是否安装成功:
- 第86讲：Scala中For表达式的生成器、定义和过滤器
今天我们来看一下For表达式中的生成器,定义和过滤等内容. 让我们来看下代码 def main(args:Array[String]){ val lauren = Persons(" ...
- 关于FPGA的一些小见解
Xilinx FPGA配置bit流文件 Xilinx FPGA的供电是采用USB作为电源,使用Verilog HDL或VHDL实现的逻辑电路通过Xilinx的综合工具生成bit流文件,通过Digile ...
- 使用Xshell在Windows系统和Linux系统之间进行文件传输
版权声明:本文为转载内容. 原博客内容https://blog.csdn.net/love666666shen/article/details/75742077 Windows系统在安装虚拟机cent ...
- execl 导出
/** * 导出 是把数表中的数据添加到execl表中 */ public function export(){ $xlsData = Db('user')->select(); Vendo ...
- poj3929
题意: 如上图放置的一个圆锥,告诉你从圆锥顶的洞中流出多少体积的水,求现在水面高度.. 思路: 无聊时做的一道题,实际上就是一道高数题,重积分,可惜我高数本来也不好而且还忘光了,积了很久,而且错了很多 ...
- unigui在阿里云服务器上部署
unigui在阿里云服务器上部署 客户租用了阿里云WINDOWS2008服务器,部署UNIGUI发现死活不行,WINDOWS2008自带的IE9浏览器打开URL,卡死在loading...... 我远 ...
- VARCHAR的最大长度的问题
大家知道,在SQL Server 2000中,VARCHAR的最大长度是8000,如果字符串的长度超过8000,保存在VARCHAR中时就会被截断.如果你需要传入的参数恰好很长,比如是一个xml,很多 ...