前端组件化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 ...
随机推荐
- django基础操作
web应用程序:可以通过web访问的应用程序 bs/cs架构 http协议 基于TCP/IP协议之上的应用层协议 基于请求-响应模式:客户端先发送请求,服务端再响应 无状态保存:http协议对于发送的 ...
- property属性[Python]
一.property解释 根据文档资料解释: property([fget[, fset[, fdel[, doc]]]]) Return a property attribute for new-s ...
- （动态规划）免费馅饼--hdu--1176
http://acm.hdu.edu.cn/showproblem.php?pid=1176 免费馅饼 Time Limit: 2000/1000 MS (Java/Others) Memory ...
- Linq动态查询与模糊查询 ---转
Linq动态查询与模糊查询(带源码示例) 继LINQ动态组合查询PredicateExtensions讲解 ----- 在用上面的方法时遇到了些问题 解决 LINQ to Entities 不支持 L ...
- libtool 创建库的工具
libtool 创建库的工具 1. 背景 在不同的系统中建立动态链接库的方法有很大的差别,这主要是因为每个系统对动态链接库的用法和实现并不相同,以及编译器对动态链接库支持的选项也不太一样. 对于开发人 ...
- 新建django需要设置的地方
urls:urlpatterns = [ path('admin/', admin.site.urls), path('login/', views.Login.as_view())#类方法url对应 ...
- .NET Core 跨平台 串口通讯 ，Windows/Linux 串口通讯，flyfire.CustomSerialPort 的使用
目录 1,前言 2,安装虚拟串口软件 3,新建项目,加入 flyfire.CustomSerialPort 4,flyfire.CustomSerialPort 说明 5,开始使用 flyfire.C ...
- WPF 触摸屏小键盘样式
WPF程序,用于平板时,一些输入数量的地方我们需要弹出小键盘输入,这个键盘可以调系统的,也可以自己写. 分享个我现在用的一个数字键盘界面. <Window xmlns:dxe="htt ...
- UWP 响应键盘组合快捷键
方法1:响应Ctrl+?快捷键 首先在load事件或者keydown事件内注册事件 public MainPage() { this.InitializeComponent(); // Registe ...
- Windows下安装配置爬虫工具Scrapy及爬虫环境
爬虫工具Scrapy在Mac和Linux环境下都相对好装,但是在Windows上总会碰到各种莫名其妙的问题.本文记录下Scrapy在Window上的安装过程. 本文是基于Python2.7及Windo ...