polymer-quick tour of polymer
注册一个元素
<link rel="import"
href="bower_components/polymer/polymer.html">
//没有添加<dom-module>
<script>
Polymer({
is:'proto-element',
ready:function(){
this.innerHTML='sfp';
}
})
</script>
增加本地元素:在<template>中
<link rel="import"
href="bower_components/polymer/polymer.html"> <dom-module id="dom-element">
<template>
<p>I'm a DOM element. This is my local DOM!</p>
</template>
</dom-module> <script>
Polymer({
is: "dom-element",
});
</script>
本地元素布局:在main中
<link rel="import"
href="bower_components/polymer/polymer.html"> <dom-module id="picture-frame">
<!-- scoped CSS for this element -->
<style>
div {
display: inline-block;
background-color: #ccc;
border-radius: 8px;
padding: 4px;
}
</style>
<template>
<div>
<!-- any children are rendered here -->
<content></content>
</div>
</template>
</dom-module> <script>
Polymer({
is: "picture-frame",
});
</script>
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="picture-frame.html">
</head>
<body>
<picture-frame>
<image src="data:images/p-logo.svg">
</picture-frame>
</body>
</html>
数据绑定:在Polymer()中定义数据,在<template>中显示
<link rel="import"
href="bower_components/polymer/polymer.html"> <dom-module id="name-tag">
<template>
<!-- bind to the "owner" property -->
This is <b>{{owner}}</b>'s name-tag element.
</template>
</dom-module> <script>
Polymer({
is: "name-tag",
ready: function() {
// set this element's owner property
this.owner = "Daniel";
}
});
</script>
声明properties:看起来跟数据绑定功能类似,其实是要序列化为attribute;声明attribute,用hostAttributes
<link rel="import"
href="bower_components/polymer/polymer.html"> <dom-module id="configurable-name-tag">
<template>
<!-- bind to the "owner" property -->
This is <b>{{owner}}</b>'s configurable-name-tag element.
</template>
</dom-module> <script>
Polymer({
is: "configurable-name-tag",
properties: {
// declare the owner property
owner: {
type: String,
value: "Daniel"
}
}
});
</script>
绑定properties:把定义的值传给属性
<link rel="import"
href="bower_components/polymer/polymer.html">
<dom-module id='proto-element'>
<style>
div{
width:100px;
height:100px;
background-color:olive;
}
</style>
<template>
<div>
<p id='{{owner}}'>local dom</p>
<content></content>
</div>
</template>
</dom-module>
<script>
Polymer({
is:'proto-element',
properties:{
owner:{
type:String,
value:'bind properties'
}
} })
</script>
绑定数据和ready:声明了一个属性owner,default value:'wj', ready 之后改为'sfp'
<link rel="import"
href="bower_components/polymer/polymer.html">
<!-- 需要加一个id,value为proto-element -->
<dom-module id='proto-element'>
<template>
//增加本地元素
<p>this is a local dom</p>
<p><strong>{{owner}}</strong> test data binding</p>
</template>
</dom-module>
<script>
Polymer({
is: "proto-element",
ready: function() {
this.owner='sfp'; },
properties:{
owner:{
type:String,
value:'wj'
}
}
});
</script>
polymer-quick tour of polymer的更多相关文章
- A quick tour of JSON libraries in Scala
A quick tour of JSON libraries in Scala Update (18.11.2015): added spray-json-shapeless libraryUpdat ...
- 【转】Polymer API开发指南 (二)(翻译)
原文转自:http://segmentfault.com/blog/windwhinny/1190000000596258 公开 property 当你公开一个 Polymer 元素的 propert ...
- Polymer——Web Components的未来
什么是polymer? polymer由谷歌的Palm webOS团队打造,并在2013 Google I/O大会上推出,旨在实现Web Components,用最少的代码,解除框架间的限制的UI 框 ...
- Polymer初探
Polymer是什么? Polymer英文为 n.聚合物:多聚体 网络高分子:聚合体:高分子聚合物 应用在Web组件场景, 表达的是, 一个一个小的Web组件,可以通过此框架聚合为一个 整个页面. h ...
- 前端组件化Polymer入门教程(4)——自定义元素
除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式. template.html <link rel="import" ...
- Polymer API开发指南 (二)(翻译)
公开 property 当你公开一个 Polymer 元素的 property 名字时,就等于把这个 property 设置为公开API了.公开 property 会有如下的特性: 支持声明数据双向绑 ...
- 【转】组件化的Web王国
本文由 埃姆杰 翻译.未经许可,禁止转载!英文出处:Future Insights. 内容提要 使用许多独立组件构建应用程序的想法并不新鲜.Web Component的出现,是重新回顾基于组件的应用程 ...
- [译] MongoDB Java异步驱动快速指南
导读 mongodb-java-driver是mongodb的Java驱动项目. 本文是对MongoDB-java-driver官方文档 MongoDB Async Driver Quick Tour ...
- arcgis arcengine Using environment settings
In this topic About using environment settings Environment settings summary table About using enviro ...
随机推荐
- 实时计算CEP
实时计算怎么实现: 流计算.....
- 给iOS开发新手送点福利,简述UIPageControl的属性和用法
UIPageControl 1. numberOfPages // 设置有多少页 默认为0 [pageControl setNumberOfPages:kImageCount]; 2. cur ...
- jQuery的文档操作
1.插入操作 一.父元素.append(子元素) 追加某元素 父元素中添加新的元素 var oli = document.createElement('li'); oli.innerHTML = '哈 ...
- [转]js清除所有cookies
来源:http://blog.csdn.net/zzl1120/article/details/6592332 var cookies = document.cookie.split(";& ...
- AngularJS学习笔记(1)——MVC模式的清单列表效果
MVC模式的清单列表效果 使用WebStorm新建todo.html并链入bootstrap.css.bootstrap-theme.css.angular.js.要链入的相关css和js文件预先准备 ...
- 34.TokenInterceptor防止表单重复提交
转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html 由于某些原因,用户在进行类似表单提交的操作后,以为表单未被提交,会进行多次的 ...
- 跟我学算法-PCA(降维)基本原理推导
Pca首先 1.对数据进行去均值 2.构造一个基本的协方差矩阵1/m(X)*X^T 3对协方差矩阵进行变化,得到对角化矩阵,即对角化上有数值,其他位置上的数为0(协方差为0),即求特征值和特征向量的过 ...
- post get 区别
GET 请求能被缓存,POST不能: POST 相对安全,GET的请求都包含在URL里 POST 可以通过request body 来传输较多的数据 URL有长度限制,会影响到GET请求,这个长度是由 ...
- .NET和UNITY版本问题
亲测:unity5.5之前:通过VS工程属性查看.NET版本为3.5, 对应unity中没有可查看的项,只有一个Api Compatibility level 是.net subset2.0,看名字, ...
- U3D+SVN: 两份相同资源放在不同目录下导致META的更改
U3D+SVN: 两份相同资源放在不同目录下导致META的更改. 实际情形:将地图文件map拷一份放在其它目录,回到UNITY编辑器,载入完成后加到磁盘,看到map文件夹下的所有meta都变红了. r ...