本节为体验篇，就是让你了解它有哪些功能，不做详细说明，后面再来讲细节。

自定义元素

组件页

<link rel="import" href="../polymer-1.7.0/polymer.html">

<dom-module id="my-tab">

	<!-- 可以在template里面写样式、html、js -->

	<template>

		<style>

			div{

				color:red;

				border:1px solid #dedede;

			}

		</style>

		<div>

			Hello World!

		</div>

		<script>

			console.log('Hello world');

		</script>

	</template>

<dom-module/>

<script>

	Polymer({

		// 组件名字，必须加-否则不起作用。

		is:'my-tab'

	});

</script>

index.html

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<!-- 这是一个基础版的兼容库 -->

	<script src="webcomponents-lite.min.js"></script>

	<!-- 将rel修改为import可以引入另外一个HTML，它将会被执行 -->

    <link rel="import" href="./template/tab.html">

</head>

<body>

	<my-tab></my-tab>

</body>

</html>

效果

配置元素属性和内容

tab.html

<link rel="import" href="../polymer-1.7.0/polymer.html">

<dom-module id="my-tab">

	<!-- 可以在template里面写样式、html、js -->

	<template>

		<style>

			div{

				color:red;

				border:1px solid #dedede;

			}

		</style>

		<div>

			{{msg}}

		</div>

	</template>

<dom-module/>

<script>

	Polymer({

		is:'my-tab',

		properties:{

			msg:{

				type:String

			}

		}

	});

</script>

index.html

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<!-- 这是一个基础版的兼容库 -->

	<script src="webcomponents-lite.min.js"></script>

	<!-- 将rel修改为import可以引入另外一个HTML，它将会被执行 -->

    <link rel="import" href="./template/tab.html">

</head>

<body>

	<my-tab msg="世界你好！"></my-tab>

</body>

</html>

前端组件化Polymer入门教程(2)——Hello world的更多相关文章

  1. 前端组件化Polymer入门教程(1)——初识&&安装

    前端组件化Polymer入门教程目录: 前端组件化Polymer入门教程(1)--初识&&安装 前端组件化Polymer入门教程(2)--快速入门 前端组件化Polymer入门教程(3 ...

  2. 前端组件化Polymer入门教程(3)——快速入门

    本系列主要翻译官方的教程,因为国内目前这方面的资料太少了,但也不一定和官网的一样,反正就是自己想到哪就写到哪. 如果我没有说明,默认情况下index.html始终包含这段代码,后面将不会再贴上来. & ...

  3. 前端组件化Polymer入门教程(5)——生命周期

    以前我对生命周期这个概念还真不是很清楚,不过想想也简单,比如说人的生命周期,无非就是生老病死.而对于程序的生命周期就是说,它在每个阶段都会做不同的事,再比如说回调函数把,ajax返回的时候它才执行,那 ...

  4. 前端组件化Polymer入门教程(8)——事件

    可以在listeners对象中监听事件 <x-custom></x-custom> <dom-module id="x-custom"> < ...

  5. 前端组件化Polymer入门教程(7)——Local DOM

    DOM元素的创建和管理被称为本地DOM(Local DOM) 本地DOM模板 如果你需要使用本地DOM,你们需要用<dom-module>并指定一个相匹配的ID. <dom-modu ...

  6. 前端组件化Polymer入门教程(6)——监听属性值变化

    监听属性值变化 如果需要监听属性值变化可以通过给observer赋值一个回调函数. <say-Hello></say-Hello> <dom-module id=&quo ...

  7. 前端组件化Polymer入门教程(4)——自定义元素

    除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式. template.html <link rel="import" ...

  8. 前端组件化Polymer深入篇(1)

    在前面的几节里面简单的介绍了一下Polymer的基本功能,但还有一些细节的东西并没有讨论,所有打算花点时间把Polymer的一些细节写一下. new和createElement有区别吗? <sc ...

  9. Vue.js：轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

随机推荐

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

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

  2. 找不到UserDetails.java

    真是一个奇葩的问题,dubbo接口 在controller中引用是可以正常的,但是放到service层中,就一直报找不到UserDetails.java,从路径看,看不出来是什么包里面的类 结果把路径 ...

  3. 如何更好地使用Java 8的Optional

    Java 8中的Optional<T> 是一个可以包含或不可以包含非空值的容器对象,在 Stream API中很多地方也都使用到了Optional. java中非常讨厌的一点就是nullp ...

  4. numpy和pandas和matplotlib用法

    numpy result = [ [0, 10, 20, 30, 40], [10, 23, 33, 43, 53], [20, 83, 23, 55, 33], [30, 93, 44, 22, 5 ...

  5. hive 函数 current_date()

    current_date() 获取当天时间 select current_date() 结果是  实际操作中,这种写法只能获取日期是今天的数据,不适合数据重跑. 更合适的写法是 ,将日期作为外部参数传 ...

  6. Winform解决界面重绘闪烁的问题

    在窗体或用户控件中重写CreateParams protected override CreateParams CreateParams { get { CreateParams cp = base. ...

  7. ASP.NET MVC一次删除多笔记录 V2.0

    前一段时间Insus.NET有写一篇<ASP.NET MVC一次删除多笔记录>http://www.cnblogs.com/insus/p/6241186.html 可以前往去看看. 觉得 ...

  8. c++中的一些计算的问题

    要实现小数的四舍五入, float a = 3.456; //保留到小数点后两位 float b =(int)((a * 100) + 0.5) / 100.0; 但是这样对负数不好使, 对负数的话, ...

  9. eclipse代码提示javadoc背景为黑色框的解决办法

    我的eclipse是近期下载的oxygen版本.不知道怎么出现了一个这个问题,鼠标悬停指向代码时应该出现的代码提示解释框,全为黑色,看不到文字.如下图 经过验证,最终解决方法为window->G ...

  10. BZOJ 1012--[JSOI2008]最大数maxnumber（二分&单调栈）

    1012: [JSOI2008]最大数maxnumber Time Limit: 3 Sec  Memory Limit: 162 MBSubmit: 14142  Solved: 6049[Subm ...