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.id
  • each 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);