jade 学习笔记

特别注意: 缩进要么用空格,要么用tab,不能同时用两种 子元素和父元素要有缩进 标签和文本之间要有空格

doctype html html head title this is title body

section div p ul strong hr

br

加class

h1.className1.className2

h1#idName

h1.className(id=’titile’,class = ‘class2’)

a(href = ‘www.baidu.com’,title=’tip’ data-uid=’xxxx’) this is link

img(src = ”)

input(name=’xxx’,type = ‘text’ ,value= ”)

p. 后跟代码块 | 表示换行

jade 也可以嵌套html标签

style. body{color:#ff6600}

script.

var a = 1

//单行注释

//- 非缓冲注释 不会编译到html中

//- p 块注释

//条件注释

---

变量申明 和 数据传递

var a = ‘hello’ title #{a.toUpperCase()} //读取命令行中的变量 //文档中的变量优先级更高 //jade -O xx.json 传入json 文件

---

安全转义 和 非安全转义 doctype html html head title body -var data = ‘

text

’ p #{data}//&xxx …. p= data p !{data}//不转义 p!= data

输出 # ! {}

p # ! {

input(value= newData)//没值不会打印undifined

---

流程 条件分支/循环

var obj = {a:1,b’2’}

for (var k in obj) p= obj[k]

each value,key in obj p= #{key}:#{value}

var arrays = [‘a’,’b’,’c’]

each item in arrays p= item

//嵌套循环 注意dt dd必须包含在dl中,dt是列表标题,dd是内容 -var sections = [{id:1,items:[‘a’,’b’]},{id:2,items:[‘aa’,’bb’]}] dl

each section in sections dt= section.ideach item in section.items dd= item

-var n = 0 ul while n < 4 li= n++

var lessons = [‘english’,’math’]

if lessons if lessons.length > 1 p #{lesson.join(‘, ‘)} else if lessons.length > 2 p= lesson.join(‘, ‘)

else p no lesson

//反向判断 unless

var isOk = false unless !isOk p ‘xxxxx’

var age = 10 case age when 10 when 20 p hello 10 or 20 when 30 : p hello 30 default : p other

---

mixins jade 代码块重用 是一个函数

mixin lesson p hello mixin +lesson //调用lesson

mixin study(arg1,arg2) p #{arg1} ul.courses each c in arg2 li= c +sdudy(‘xxx’,[a,b,c])

//嵌套调用 mixin group(student) +study(student.name,student.courses) +group({xxxxxx})

//mixin就相当于函数 接下来不同说,当代码太多的时候 //难免会出现多个文档的维护 感觉这些个概念完全是用来组织代码的

---

//模版继承 block desc p hello world block desc

extends layout

//模版包含

include head//head.jade include title.html

jade.js 里面的complie render readFile

还可以反编译 html 编译为 jade

filters 与其它插件共同使用 //不能传动态数据 :markdown Hi,this is a markdown [link] (http://wwww.baidu.com)

:less body{ p{ color:#ccc } }

script :coffee console.log ‘hello,coffee’

================================ jade -P index.jade// 编译成index.html

chrome index.html

注意:为了模块化管理,通常把router写在一个单独的文件夹routers里面.如果要使用router可以用: express的use 进行设置: app.use(‘/’, routes); app.use(‘/users’, users);