Jade快速入门
Jade是Node的一个模板引擎，借鉴了Haml，语法上和Haml有很多类似之处，Jade的主要优势为HTML元素同事渲染闭合和开始标签，当然也会添加符号<>和< />。
标签
一行开头的任何文本都会被默认解释称HTML标签，标签后的文本和空格会被解析成内联的HTML，即元素的文本内容：
-
body -
div -
h1 Hello node -
p jade语法 -
div -
footer ©App
上述模板会被解析成：
-
<body> -
<div> -
<h1>Hello node</h1> -
<p>jade 语法</p> -
</div> -
<div> -
<footer> App</footer> -
</div> -
</body>
变量/数据
传给Jade模板的数据称为 locals 。有输出一个变量，使用等号 = :
-
h1= title -
p= body -
//传递的locals -
{ -
title:'数据1', -
body: 'body变量' -
}
输出地HTML:
-
<h1>数据1</h1> -
<p>body变量</p>
如果要在文本中读取变量的值，则通过 #{name} 语法实现：
-
- var title = 'node.js' -
p I am studying #{title}.
在模板编译时变量的值会被处理，因此，不要在可执行的Javascript(-)使用。
属性
属性紧跟在标签的名字之后，用括号括起来，格式是 name=value ，多个属性用逗号分开：
-
div(id='content', class='main') -
a(href='http://www.ido321.com', title='我的博客') 博客地址 -
form(action='/login') -
button(type='submit') -
div(class='hero') Learn Node
输出地HTML为：
-
<div id="content" class="main"> -
<a href="http://www.ido321.com">博客地址</a> -
<form action="/login"> -
<button type='submit'></button> -
</form> -
<div class="hero">Learn Node</div> -
</div>
属性值可以用 locals 中的变量代替，符号 | 允许在新的一行中写HTML中的内容，即 该符号之后的那行内容会变成文本内容 ：
-
a(href=url, data-active=isActive) -
label -
input(type='checkbox',checked=isChecked) -
| yes/no -
-
//locals数据 -
{ -
url: '/login', -
isActive:true, -
isChecked:false -
}
输出地HTML为：
-
<a href="/login" data-active='true'></a> -
<label> -
<input type='checkbox' />yes/no -
</label>
可以输出多行文本内容：
-
div -
| 文本1 -
| 文本2
字面量
在Jade中，如果没有写标签名，则默认是 div ，因而，可以直接在元素后写类和id来生成元素：
-
div#center -
p.lead.test -
| web app -
#side.pull-right -
span.contact.span4 -
a(href="/contact") contact me
输出地HTML为：
-
<div id="center"> -
<p class="lead test"> -
web app -
<div id="side" class="pull-right"></div> -
<span class="contact span4"> -
<a href="/contact">contact me</a> -
</span> -
</p> -
</div>
Script和Style块
使用 . ，可以直接在模板中输入Javascript和Style：
-
script. -
console.log('hello'); -
setTimeout(function(){ -
console.log('script'); -
},1000);
被编译后，输出内容为：
-
<script> -
console.log('hello'); -
setTimeout(function(){ -
console.log('script'); -
},1000); -
</script>
Javascript
上述是通过 script 标签嵌入js，如果要在模板编译时使用Javascript，可以使用符号 - 、 = 和 != ：
-
- var arr=['<a>','<b>','<c>'] -
ul -
- for(var i =0;i < arr.length' i++) -
li -
span= i -
span!= "unescaped: " + arr[i] + "vs. " -
span= "escaped: " + arr[i]
输出地HTML内容：
-
<ul> -
<li> -
<span>0</span><span>unescaped:<a>vs.</span><span>escaped:<a> -
</li> -
<li> -
<span>1</span><span>unescaped:<b>vs.</span><span>escaped:<b> -
</li> -
<li> -
<span>2</span><span>unescaped:<c>vs.</span><span>escaped:<c> -
</li> -
</ul>
还可以加入注释。如果要输出注释，则使用 // ，如果不输出注释，则使用 //- :
-
// 输出注释 -
p 上面是注释 -
//- 不输出注释 -
div 上面注释没有输出
对应输出地HTML内容是:
-
<!-- 输出注释--> -
<p>上面是注释</p> -
<div>上面注释没有输出</div>
if和unless
通过符号 - 能在模板中嵌入js，还有一种不需要前缀 - 和括号的简洁写法：
-
- var user = {} -
- user.admin = Math.random() > 0.5 -
if user.admin -
button(class = "test") 这是按钮 -
else -
| 文本
unless 的判断则和 if 相反。
each
改语句用于迭代数组或对象，比 for 更简洁的语法：
-
- var language = ['php', 'node', 'java']; -
div -
each value, index in language -
p= index + '. ' + value
输出地HTML为:
-
<div> -
<p>0. php</p> -
<p>1. node</p> -
<p>2. java</p> -
</div>
case
有多个选择区分时，可以用 case 实现：
-
- var coins = Math.round(Math.random() * 10) -
case coins -
when 0 -
p You hava no money -
when 1 -
p You have a coin -
default -
p You hava #{coins} coins
函数mixin
mixin 是带参数，并产生一些HTML的函数。声明的语法是 mixin name(param1, param2...) ，用法是 +name(data) ：
-
mixin row(items) -
tr -
each item, index in items -
td= item -
mixin table(tableData) -
table -
each row, index in tableData -
+row(row) -
- var node = [{name: "express"}, {name: 'hapi'}, {name: "derby"}] -
+table(node)
输出地HTML为：
-
<table> -
<tr> -
<td>express</td> -
</tr> -
<tr> -
<td>hapi</td> -
</tr> -
<tr> -
<td>derby</td> -
</tr> -
</table>
include
include 是自顶向下的方法，用于引入其他的Jade模板，实现模板的复用，语法： include /path/filename 。
比如，在A文件中：
-
include ./includes/header
不用给模板名字和路径加上单引号和双引号，支持相对路径：
-
//从父目录开始查找 -
include ../xxx
extend
extend 是自底向上的方法，包含的文件决定它要替换主文件的哪一个部分，语法： extend filename 和 block filename 。
在文件A中:
-
block header -
p default text -
block content -
p Loading.... -
block footer -
p copyright
在文件B中：
-
extend A -
block header -
p 这是文件B -
block content -
.main-content
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
