前端组件化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>
前端组件化Polymer入门教程(2)——Hello world的更多相关文章
- 前端组件化Polymer入门教程(1)——初识&&安装
前端组件化Polymer入门教程目录: 前端组件化Polymer入门教程(1)--初识&&安装 前端组件化Polymer入门教程(2)--快速入门 前端组件化Polymer入门教程(3 ...
- 前端组件化Polymer入门教程(3)——快速入门
本系列主要翻译官方的教程,因为国内目前这方面的资料太少了,但也不一定和官网的一样,反正就是自己想到哪就写到哪. 如果我没有说明,默认情况下index.html始终包含这段代码,后面将不会再贴上来. & ...
- 前端组件化Polymer入门教程(5)——生命周期
以前我对生命周期这个概念还真不是很清楚,不过想想也简单,比如说人的生命周期,无非就是生老病死.而对于程序的生命周期就是说,它在每个阶段都会做不同的事,再比如说回调函数把,ajax返回的时候它才执行,那 ...
- 前端组件化Polymer入门教程(8)——事件
可以在listeners对象中监听事件 <x-custom></x-custom> <dom-module id="x-custom"> < ...
- 前端组件化Polymer入门教程(7)——Local DOM
DOM元素的创建和管理被称为本地DOM(Local DOM) 本地DOM模板 如果你需要使用本地DOM,你们需要用<dom-module>并指定一个相匹配的ID. <dom-modu ...
- 前端组件化Polymer入门教程(6)——监听属性值变化
监听属性值变化 如果需要监听属性值变化可以通过给observer赋值一个回调函数. <say-Hello></say-Hello> <dom-module id=&quo ...
- 前端组件化Polymer入门教程(4)——自定义元素
除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式. template.html <link rel="import" ...
- 前端组件化Polymer深入篇(1)
在前面的几节里面简单的介绍了一下Polymer的基本功能,但还有一些细节的东西并没有讨论,所有打算花点时间把Polymer的一些细节写一下. new和createElement有区别吗? <sc ...
- Vue.js：轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
随机推荐
- Unicode 字符
Unicode是计算机可以支持这个星球上多种语言的秘密武器.在Unicode之前,用的都是ASCII. ASCII码非常简单,每个英文都是7位二进制的方式存贮在计算机内,其范围是32~126.当用户在 ...
- 误删文件不用怕 grep命令帮你恢复
作为长期的电脑使用者,肯定会有误删文件的经历,在 Mac OS X 和 Windows 上删除的文件都会默认进 “回收站”.在 Linux 上如果事先没有用别名(alias)修改默认的 rm 功能,r ...
- Codeforces821B Okabe and Banana Trees 2017-06-28 15:18 25人阅读 评论(0) 收藏
B. Okabe and Banana Trees time limit per test 2 seconds memory limit per test 256 megabytes input st ...
- STL容器（C11）--unordered_map用法
http://www.cplusplus.com/reference/unordered_map/unordered_map/
- mod与%的区别
mod与%的区别 %与mod的区别: %出来的数有正有负,符号取决于左操作数,而mod只能是正: 所以要用%来计算mod的话就要用这样的公式:a mod b = (a % b + b) % b: 括号 ...
- kettle学习
数据etl工具,主要用做数据采集和清洗 待续...
- how can I make the login form transparent?
This is how you can make the Login Form transparent: 1. Add this css to Server Module-> Custom cs ...
- [ASE][Daily Scrum]11.06
我们的<坦克大战·无尽>正式开始动工了,今天的任务计划如下~ [Plan] View Shilin Liu 搭建好开发环境 收集素材 Control Jiafan Zhu ...
- C++动态（显式）调用 C++ dll
1.创建DLL新项目Dll1,Dll1.cpp: extern "C" __declspec(dllexport) const char* myfunc() { return &q ...
- bootstrap基础学习小记（二）排版、列表、代码风格、表格
排版——标题.副标题.段落(正文文本).强调内容.粗体.斜体.强调相关的类.文本对齐 <!DOCTYPE HTML> <html> <head> <meta ...