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