jade学习01
编写
简单例子
doctype html
html
head
title learn jade
body
h1 learn jade
常用命令
- 编译:
jade index.jade//默认编译成压缩后的html文件 - 排版编译:
jade -P index.jade - 实时检测:
jade -w index.jade/ `jade -P -w index.jade
声明文档：
jade html,jade strict,jade frameset,jade xml
格式：
- 子级缩进两格，
- 标签与文本空一格,
- 标签加文本和文本换行:
<div>
a
b c<span>d</span>e
f
</div>
div a
|b c
span d
|e
|f
div.
a
b c <span>d</span> e
f
添加属性 ：
h1(class="a b", id="c", other="value");- id与class可以放在外面:
h1.a.b#c(other="value")这种情况下如果没有写标签，默认为div;
注释
- 一般注释:
\\注释在标签前面，包括子元素在内都会被注释； 如果这行文本不属于标签，者注释这行文本 - 缓冲注释：
\\-编译的时候直接省略
样式和脚本
//注意空两格
style.
body{color:red}
script.
var a = 1;
添加变量
- 模版内部 //如果与外部部定义的变量相同，内部优先
body
- var name = 'value'
div(id='#{name}') #{name.toUpperCase()}
//下面等号中不能再加文本; 上面的方式没定义变量输出undefined,下面则留空
body
- var name = "value"
div(id=name)= name
//
<body>
<div id="value">VALUE </div>
</body>
命令行传入
jade index.jade -P -w --obj '{"name": "value"}'json文件外部传入
jade index.jade -P -w -O index.json模版外部
变量转义
- jade 会默认进行变量转义
- 非转义输出:
!#{}或!=; - 利用反斜杠：
- var data = 'a'
p \#{data}
//
p #{data}
语句 //注意空格层级别
- for
- var name = {name1: 'value1', name2: 'value2', name3: 'value3'}
- for(k in name)
p #{k}: #{name[k]}
- each
//object
- var name = {name1: 'value1', name2: 'value2', name3: 'value3'}
- each value, key in name
p #{key}: #{value}
//arrasy
- var name = {name1: 'value1', name2: 'value2', name3: 'value3'}
- for(k in name)
p #{k}: #{name[k]}
//层叠
- var name = [{id:1, items:['a','b','c']},{id:2, items:['d','e','f']}]
- each section in name
p=section.id
each item in section.items
span=item
- while
- var n = 0
ul
while n < 4
li= n++
- if
- var lessons = ['jade','node']
if lessons
if lessons.length > 1
p #{lessons.join(',')}
else
p lessons'length less than 1
else
p no lessons
- unless; //if的反转
- switch
- var name = 'jade'
case name
when 'jade': p #{name} is jade
when 'node': p #{name} is node
mixin
- 重复和嵌套
mixin study(name, courses)
p #{name} study
ul.courses
each course in courses
li= course
mixin group(student)
h4 #{student.name}
+study(student.name, student.courses)
+group({name:'tom',courses:['jade','node']})
+group({name:'jack',courses:['java','express']})
- block代码块
mixin team(slogon)
h4 #{slogon}
if block
block
else
p no team
+team('slogon')
p Good job!
//结果
<h4>slogon</h4>
<p>Good job!</p>
- 传递属性
mixin attr(name)
p(class!=attributes.class) #{name}
+attr('attr')(class='magic')
//结果
<p class="magic">attr</p>
//
mixin attrs(name)
p&attributes(attributes) #{name}
+attrs('attrs')(class='magic2', id='attrid')
//结果
<p id="attrid" class="magic2">attrs</p>
//在不确定传入参数个数
mixin attrs2(name, ...items)
ul(class!=name)
each item in items
li= item
+attrs2('node','jade','express')
jade学习01的更多相关文章
- Python学习--01入门
Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...
- Java虚拟机JVM学习01 流程概述
Java虚拟机JVM学习01 流程概述 Java虚拟机与程序的生命周期 一个运行时的Java虚拟机(JVM)负责运行一个Java程序. 当启动一个Java程序时,一个虚拟机实例诞生:当程序关闭退出,这 ...
- Android Testing学习01 介绍 测试测什么 测试的类型
Android Testing学习01 介绍 测试测什么 测试的类型 Android 测试 测什么 1.Activity的生命周期事件 应该测试Activity的生命周期事件处理. 如果你的Activ ...
- Java学习01
Java学习01 第一章 1.JRE与JDK JDK(JAVA Develop Kit,JAVA开发工具包)提供了Java的开发环境和运行环境,主要用于开发JAVA程序,面向Java程序的开发者; J ...
- ThinkPhp学习01
原文:ThinkPhp学习01 一.ThinkPHP的介绍 MVC M - Model 模型 工作:负责数据的操作 V - View 视图(模板 ...
- 【iScroll源码学习01】准备阶段 - 叶小钗
[iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文 http://www.cnblogs.com/yexiaochai/p/3 ...
- JVM学习01：内存结构
JVM学习01:内存结构 写在前面:本系列分享主要参考资料是 周志明老师的<深入理解Java虚拟机>第二版. 内存结构知识要点Xmind梳理 案例分析 分析1 package com.h ...
- webservice学习01：wsdl文档结构
webservice学习01:wsdl文档结构 wsdl文档结构 WSDL文档示例 <wsdl:definitions xmlns:xsd="http://www.w3.org/200 ...
- spring学习(01)之IOC
spring学习(01)之IOC IOC:控制反转——Spring通过一种称作控制反转(IOC)的技术促进了低耦合.当应用了IOC,一个对象依赖的其它对象会通过被动的方式传递进来,而不是这个对象自己创 ...
随机推荐
- python2.x和3.x的区别
这个星期开始学习Python了,因为看的书都是基于 Python2.x,而且我安装的是Python3.1,所以书上写的地方好多都不适用于Python3.1,特意在Google上search了一下 3. ...
- mybatis一对多查询
18 <!-- 19 方式一:嵌套结果:使用嵌套结果映射来处理重复的联合结果的子集 20 封装联表查询的数据(去除重复的数据) 21 select * from class c, teacher ...
- nginx配置负载
一.系统优化 1.修改/etc/sysctl.conf,优化tcp连接数 net.ipv4.tcp_fin_timeout = 30 net.ipv4.tcp_keepalive_time = 120 ...
- 定时器(NSTimer)
iOS中定时器NSTimer的使用 1.初始化 + (NSTimer *)timerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget sel ...
- 【转】字符集和字符编码（Charset & Encoding）
相信大家一定碰到过,打开某个网页,却显示一堆像乱码,如"бЇЯАзЪСЯ"."�????????"?还记得HTTP中的Accept-Charset.Accept ...
- Swift - UIViewController
UIViewController类详解: 通过Nib文件初始化 init(nibName nibName: String?, bundle nibBundle: NSBundle?) println( ...
- NYOJ题目57 6174问题
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAscAAAJLCAIAAACE5qzaAAAgAElEQVR4nO3dMXKrutvH8XcT6bOQ1C ...
- Retrofit与RXJava整合
Retrofit 除了提供了传统的 Callback 形式的 API,还有 RxJava 版本的 Observable 形式 API.下面我用对比的方式来介绍 Retrofit 的 RxJava 版 ...
- 列出zip文件内全部内容 当前目录下的所有文件压缩成zip格式的文件(file.zip)
[root@ok Desktop]# zip -r image.zip ./*.jpg adding: 20161007_113743.jpg (deflated 0%) adding: 201610 ...
- Linux系统启动过程分析
[原创]Linux系统启动过程分析-wjlkoorey258-ChinaUnix博客http://blog.chinaunix.net/uid-23069658-id-3142047.html 经过对 ...