jade是html的一种变体写法
doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) {
bar(1 + 5)
}
body
h1 Jade - node template engine
#container.col
if youAreUsingJade
p You are amazing
else
p Get on it!
p.
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
jade –> html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jade</title>
<script type="text/javascript">
if (foo) {
bar(1 + 5)
}
</script>
</head>
<body>
<h1>Jade - node template engine</h1>
<div id="container" class="col">
<p>You are amazing</p>
<p>
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
</p>
</div>
</body>
</html>
1.语法
1.所有的标签都不用<>包裹
2.所有的属性用()包裹
3.没有开始和结束标记,用缩进来表示层级
div
a(href="http://www.google.com", target="_blank") Google
转移后
<div>
<a href="http://www.google.com" target="_blank">Google</a>
</div>
可以用“=”设置元素包含的内容。“=”后可跟任何“表达式”,可以是一个字符串、一个“变量”,也可以是“函数”或“表达式”的运算结果。“=”后的内容会被转码
// =后的内容会被转码,标签同样会被转码
div= 'If you think you can, <b>you can</b>.'
// =后的内容可以像js一样,进行字符串拼接
div= 'If you think you can' + ', <b>you can</b>.'
–>
<div>If you think you can, <b>you can</b>.</div>
// 如果不想被转码,可以 != 表示
div!= 'If you think you can, <b>you can</b>.'
–>
<div>If you think you can, <b>you can</b>.</div>
// 布尔属性,“真”时加上属性,“假”时不加上
button(disabled=true) Click Me
button(disabled=false) Click Me
–>
<button disabled>Click Me</button>
<button>Click Me</button>
// ()里面写属性 {}里面也可以写变量
div(style={color:red, padding:'10px 5px'}) Style attributes
<div style="color:red; padding:'10px 5px'">Style attributes</div>
html文本注意:
<div>
<a href="http://google.com">Google</a>
If you think you can, you can.
</div>
–>jade写法:
div
a(href="http://google.com")Google
|If you think you can, you can.
“|”告诉Jade模板解析器:将后面的内容原样输出。因此,“|”后面也可以包含HTML元素。
需要注意的是,“|”的“作用域”只有一行,若需要按原样输出多行文本,则要用到Jade的另一个特殊字符“.”。“.”一般用在填充<\script>或<\style>元素包含的内容。
script(type="text/javascript").
window.onload = function(){
console.log('hello jade');
};
–>
<script type="text/javascript">
window.onload = function(){
console.log('hello jade');
};
</script>
如果希望在一段纯文本中插入Jade语句,则需要引入“#[]”语法:
div.
My name is #[b CYF]
–>
<div>My name is <b>CYF</b></div>
2.jade逻辑语法
// 遍历 each...in
- var ary = ['One', 'Two', 'Three'];
each item, index in ary
div= index + ':' + item
==>
<div>1:One</div>
<div>2:Two</div>
<div>3:Three</div>
-----------------------------
- var obj = {'one': 1, 'two': 2, 'three': 3};
each val, key in obj
div= key + ':' + val
==>
<div>one:1</div>
<div>two:2</div>
<div>three:3</div>
while 语法:
- var n = 0;
while n < 3
div= n++
==>
<div>0</div>
<div>1</div>
<div>2</div>
条件判断if
- var bl0 = false, bl1 = true;
if bl0
div bl0 is true
else if bl1
div bl1 is true
else
div all are false
==>
<div>bl1 is true</div>
case语句:
- var gender = 0;
case gender
when 0
div you are a girl
default
div you are a boy
==>
<div>you are a girl</div>
复用块
“复用块”用关键字“mixin”定义,用“+”调用。
mixin showName
div CYF
+showName
+showName
==>
<div>CYF</div>
<div>CYF</div>
// 可将“复用块”理解为“函数”,它可接收“参数”,使“复用块”更具灵活性
mixin showName(name)
div= name
+showName('CYF')
+showName('Cao Yongfeng')
==>
<div>CYF</div>
<div>Cao Yongfeng</div>
填充数据
// = 与 #{}效果一样
- var str = 'my name is <b>CYF</b>';
div= str
div #{str}
==>
<div>my name is <b>CYF</b></div>
<div>my name is <b>CYF</b></div>
- var str = 'my name is <b>CYF</b>';
div!= str
div !{str}
==》
<div>my name is <b>CYF</b></div>
<div>my name is <b>CYF</b></div>
// #{}对比于= 更加灵活,类似于es6 ${}的用法
- var name = 'CYF';
div my name is #{name}
==》
<div>my name is CYF</div>
注释
// 单行注释
// if you think you can, you can
==》
<!-- if you think you can, you can -->
---------------------------------------
// 多行注释
//
if you think you can, you can
you can
==》
<!--
if you think you can,
you can
-->
// jade识别到//- ,会自动忽略后面的语句
//- if you think you can,
div you can
==》
<div>you can</div>
常见的简写
#theId ==》 div(id="theId")
div#theId if you think you can, you can ==》 div(id="theId") if you think you can, you can
.theClass ==》 div(class="theClass")
div.theClass if you think you can, you can ==》 div(class="theClass") if you think you can, you can
div&attributes({id:'theId', class:'theClass'}) ==> div(id="theId", class="theClass")