前端组件化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 ...
随机推荐
- 自己写一个chrome扩展程序 - 右键菜单扩展
最近在学习Spring,心想dotnet如何实现类似形式呢.于是想认真学习Casetle组件,发现没有书籍!而spring的书多得很.于是只好找网上教程了.发现系统的文章不多.Terrylee好多文章 ...
- noip第28课作业
分段数列 [问题描述] 对于给定的一个长度为N的正整数数列A[i],现要将其分成连续的若干段,并且每段和不超过M(可以等于M),问最少能将其分成多少段使得满足要求. 输入格式: 输入第1行包含两个正整 ...
- openresty + lua 2、openresty 连接 redis，实现 crud
redis 的话,openresty 已经集成,ng 的话,自己引入即可. github 地址:https://github.com/openresty/lua-resty-redis github ...
- Delphi cxGrid使用汇总（一）
1. 去掉cxGrid中台头的Box解决:在tableview1的ptionsview的groupbybox=false; 2．统计功能解决:(1) tableview1. tableview1的op ...
- [leet code 198]House Robber
1 题目 You are a professional robber planning to rob houses along a street. Each house has a certain a ...
- linux下git远程仓库的搭建
一.服务器环境 ubuntukylin-16.04-server-amd64 二.远程服务器创建一个名字叫git的用户,专门用于管理git仓库. $ adduser git 三.安装git.服务器端和 ...
- SSD 相关基础知识
SDD 基础知识 SSD(Solid State Drives)是固态硬盘,使用闪存颗粒来存储数据,闪存又可分为NAND Flash和NOR Flash,通常所说的SSD硬盘都使用NAND Flash ...
- 【BZOJ2328】 [HNOI2011]赛车游戏
BZOJ2328 [HNOI2011]赛车游戏 前言 这道题目我真的佛了,卡精度+卡时间这就是下一个聊天鬼才. Solution 首先可以二分出最大速度,然后考虑下坡的话可能有更好的解,然后这样子算一 ...
- mysql日期时间函数使用总结
获取函数 mysql默认的时间格式: yyyy-MM-dd 或者 yyyy-MM-dd HH:mm:ss 1. Date() 返回日期部分, date('2018-02-14 17:03:04') ...
- JS关闭窗口或JS关闭页面的几种代码！
第一种:JS定时自动关闭窗口 <script language="javascript"> <!-- function closewin(){ self.open ...