node-express-2-jade

1,Jade裏能夠省略尖括號，直接寫標籤名

2,標籤間的嵌套關係用換行加空格來實現

3,緊接在標籤名後加上.xx或#xx，就能給標籤添加css類名和id,若是不寫標籤名默認就是div

4,標籤屬性寫入()括號內，多個屬性用逗號隔開

5,多行文本有兩種寫法。第一種寫法是在標籤名後緊接一個.點,這樣後面的內容會被Jade模板視做文本域而保留換行符

p.
  第1行文本
  第2行文本
  第3行文本
  第4行文本

//因爲是文本域，裏面要嵌套標籤時，只能寫原生的HTML標籤了

多行文本的第二種寫法是在每行前加上|豎線符

p
  span 第1行文本
  | 第2行文本
  | 第3行文本
  | 第4行文本

不只可用於p標籤等，也常見於style和script標籤

script.
  console.log("open mind");
  console.log("learning quick");
  console.log("work hard");

6，變量

變量聲明很簡單，前面加上-橫槓，變量只要#{變量名}

- var cs = 'UTF-8' meta(charset='#{cs}')

//注意用#{}輸出的變量數據會執行HTML轉碼

- var alertData = '<script>alert(1);</script>'
p #{alertData}

// 標籤後面緊接=等號（不轉義用!=）來輸出變量
p= alertData
p!= alertData

//若是不想HTML轉碼，能夠將#改爲!歎號：

- var alertData = '<script>alert(1);</script>'
p !{alertData}

　//若是頁面就想輸出#{}和!{}呢？能夠前面加\反斜槓來讓Jade引擎不編譯變量

p \#{alertData}
p \!{alertData}

 //#{}若是變量未定義，將會編譯成undefined做爲初始值。但用=等號來編譯變量的話，若是變量未定義就忽略

7,語句，Jade模板支持JavaScript語句,

• if-else
• unless
• case-when
• for-in
• each-in
• while

//if-else

- var author = 'Jack';
if author
  p 做者：#{author} else
  p 無做者

//編譯出來的結果
<p>做者：Jack</p>

//case-when

- var authors = ['Jack', 'Bill'];
case authors[0]
  when 'Jack'
    p 做者是Jack
  when 'Bill'
    p 做者是Bill
  default
    p 無做者

//循環遍歷用for-in（注意上面的if-else，case-when語句前不用像變量那樣加上-橫槓，但for的前面要加上-橫槓。若是漏寫-橫槓，會被解析

- var person = {name:'Jack', gender: 'Male'}
- for (var prop in person)
  p= person[prop]

//編譯出來的結果
<p>Jack</p>
<p>Male</p>

//循環遍歷也能夠用each-in

- var employee = {name:'Jack', gender: 'male'}
- each value, key in employee
  p #{key}: #{value}
- var language = ['Java', 'JavaScript', 'C++']
ul
  each item in language
    li #{item} //編譯出來的結果
<p>name: Jack</p>
<p>gender: male</p>
<ul>
  <li>Java</li>
  <li>JavaScript</li>
  <li>C++</li>
</ul>

//循環遍歷也能夠用while

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

 8,Jade也支持Mixin，能夠理解爲function

//調用時函數名前加上+加號
 mixin sayHi
  p Hi
+sayHi //編譯出來的結果
<p>Hi</p>

mixin personInfo(name, hobbies)
　+sayHi
  p #{name}'s hobbies:
    ul.hobby
      each hobby in hobbies
        li= hobby
+personInfo('Jack', ['movie', 'music'])

9,模板，Jade用block和extends來實現模板的繼承

//xblock真正的做用在於佔位，供子文件繼承，能夠理解爲傳統OO語言裏的虛函數。父文件裏定義的block，子文件裏用extends來繼承並重寫。
//header.jade
doctype html
html
  head
    meta(charset='#{charset}')
    block scripts
      script(src='jquery.js')
      script(src='underscore.js')
      script(src='backbone.js')
  body
    block content
      p please write content

//繼承上面的文件header.jade
extends header //重寫header.jade中的content
block content
  h1.titleClass#titleID #{title}
  a(href='http://www.jackzxl.net', target='_blank') 個人主頁
  ……

//除繼承外還能夠用include包含。Include會將內容全拷貝進去,不會像extend能進行替換

10，過濾器

只要npm安裝好後，用:冒號+模塊名就能聲明使用這些模塊

:markdown
  ...
:less
  ...
:coffee
 ...