注：以下代码都没有做缩进处理···
安装
npm install -g jade
直接编译
jade index.jade
不压缩
jade -P index.jade
不压缩且监控
jade -P -w index.jade
语法：
h1.title(id=”title”,class=”title2”) //括号内一定要用这种写法，括号内一般都是html直接的写法
h1.title#title.title2
以上两种方法是一样的
标签中有大段的块内容
方式一：在标签后面添加 .
比如一段js代码，注意是script后面有一个.
script.
console.log(‘Welcome to join wandoujia-fe’)
console.log(‘We want you’)
方式二：每段前面添加|
script
| console.log(‘Welcome to join wandoujia-fe’)
| console.log(‘We want you’)
上边可以直接插入标签1,这个不会改变，会被浏览器解析
注释：
单行会编译成、 //h3
多行不会编译 //-h3
块注释 //-
h3
不换行嵌套
:
兼容ie
<!– [if IE 8]><html class=’ie8’><![endif]–>
<!– [if !IE]><!–><!–<![endif]–>
声明变量：
-var course = ‘jade’
title #{course}
//支持js 例如写成
title #{course.toUpperCase()}
输出大写
引入：
1.内嵌-权重最高
2-命令行可以在命令行控制变量，当同时存在的时候文档内嵌权重最高
3-也可以从外部json文件引入
jade index.jade -P -w -O test.json //通过test.json来输入
转义：
-var data=’test’
-var htmlData=’<script>aler-t(1)</script>’
p #{data} //test
p #{htmlData} // <会被转义
p !{htmlData} // <不会被转义
p=data //和#一样
p=htmlData //和#一样
p!=htmlData //和#一样
p \#{htmlData} //避免编译#{}
p \!{htmlData} //避免编译#{}
input (value=’#{newData}’) //当newData没有给赋值的时候，这里应该写成input (value=newData) 这样就不会初始一个undefined了
流程：
1、for
-var peng = {course:’jade’,level:’high’}
-for(var k in peng) //遍历peng
p= peng[k]; //显示jade 和high
2、each
-var peng = {course:’jade’,level:’high’}
-each value,key in peng //遍历peng
p #{key}:#{value} //显示course:jade level:high
数组遍历
-var courses=[‘node’,’jade’,’expess’]
-each item in courses
p= item
嵌套循环
-var sections=[{id:1,items:[‘a’,’b’]},{id:2,items:[‘c’,’d’]}]
dl
-each section in sections
dt= section.id
-each item in section.items
dd= item
显示结果
1ab2cd
while用法
-var n = 0
ul
while n<4
li= n++
if else用法
-var isPeng = true
-var lessons = [‘jade’,’node’]
if lessons
if lessons.length>2
p more than 2: #{lessons.join(‘,’)}
else if lessons.length>1
p more than 1: #{lessons.join(‘,’)}
else
p no lesson
else
p no lesson
unless用法–其实就是if的反向判断
unless !isPeng
p #{lessons.length} //2
switch语句(用case和when代替)
-var name = ‘jade’
case name
when ‘java’
when ‘node’
p Hi node!
when ‘jade’
p Hi jade!
when ‘express’: p Hi express! //这个和jade的结果一样，就是写法不同
default
p #{name}
mixin-其实就和function差不多
mixin lesson
p peng jade study
+lesson //这个是调用，不调用，不显示
传参
mixin study(name,courses)
p #{name} stydy
ul.courses
each course in courses
li=course
+study(‘tom’,[‘jade’,’node’])
嵌套（接上）
mixin group(student)
h4 #{student.name}
+study(student.name,student.courses)
+group({name:’tom’,courses:[‘jade’,’node’]})
显示结果：
tom stydy
- jade
- node
内敛代码块
mixin team(slogon)
h4 #{slogon}
if block
block
p 在上边 //自己测试下上边那个block就是指的下边那个p Gbod job，显示的也是这个，这是判断team内是否有元素
else
p no team
+team(‘slogon’)
p Gbod job!
可以传属性
mixin attr(name)
p(class!=attributes.class) #{name}
+attr(‘attr’)(class=’magic’)
显示结果：
attr
简单一点写法
mixin attrs(name)
p$attributes(attributes) #{name}
+attrs(‘attrs’)(class=’magic2’,id=’attrid’)
显示结果
attrs
当不确定传参个数的时候
mixin magic(name,…items)
ul(class=’#{name}’)
each item in items
li= item
+magic(‘magic’,’node’,’jade’)
显示结果
- node
- jade
继承（文件和文件共用）用的不多
block desc
p imooc jade study extends //定义
block desc //调用
block desc
引用文件
extend layout //这个layout是文件名，不是block的名，如果有层级关系，前边加/来寻址就行了
block content
被引用个文件
最下边写上
block content //这样引用才能接着写
如果在被引用文件内有
block desc
然后在引用文件内又定义了一次
block desc
那么引用文件内定义的新属性会覆盖掉被引用文件的属性
实例：
layout.jade
//继承-头部+尾部
doctype html
html(lang=”en”)
head
meta(charset=”UTF-8”)
body
block content
footer END
index.jade
//这个用的是继承方法
extends layout
block content
p 这里写内容
包含：文件和区块的内嵌关系
head.jade
//包含-头部
doctype html
html(lang=”en”)
head
meta(charset=”UTF-8”)
body
block content
footer.jade
//包含-尾部
footer END
index.jade
//这个用的是包含de方法
include head
p haha
include footer
render和renderFile
compile用法
var fn = jade.compile(‘div #{course}’,{})
var html = fn({course:’jade’})
res.end(html)
结果
jade
render方法
var html=jade.render(‘div #{course}’,{course:’jade’})
后边直接放入参数，结果和第一个相同
renderFile方法
var html=jade.renderFile(‘index.jade’,{course:’jade’},pretty:true)
pretty:true格式化
改文件头就可以改变显示形式 content-type:text/plain 把plain改成html