前端组件化Polymer入门教程(2)——Hello world

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

自定义元素

组件页

<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>