模板引擎Jade詳解

有用的符號：

| 豎槓後的字符會被原樣輸出
· 點表示下一級的全部字符都會被原樣輸出，再也不被識別。（就是|的升級版，實現批量）
include 表示引用外部文件

• 短槓說明後面跟着的字符只是一段代碼（與|的區別就是，|後面的內容會被顯示，而短槓後面的內容直接不顯示了！）

例子:

js：

const jade = require('jade');
console.log(jade.renderFile('./xxx.jade',{pretty:true,name:'singsingasong'}))

jade：

'|'的應用

'.'的應用

include的應用

調用變量作運算

div的class

'-' 的應用

變量的直接引用

span#{a}和span=a效果是同樣的。

jade中的for循環

jade：

-for(var i=0;i<arr.length;i++)
    div=arr[i]

js文件:

console.log(jade.renderFile('./views/11.jade',{pretty:true,name:'singsingasong',
    arr:['aaa','bbb','ccc','ddd']
}));

運行結果：

'!' 的應用

html
  head
  body
    div(class='1')!=content
    div(class='2')

運行結果：

jade的if...else...

html
  head
  body
    -var a=19;
    if(a%2==0)
      div(style={background:'red'}) 偶數
    else
      div(style={background:'green'}) 奇數

case語句

html
  head
  body
    -var a=1;
    case a
      when 0
        div aaa
      when 1
        div bbb
      when 2
        div ccc
      default
        |不靠譜

綜合的來一個

小提示:以前的jade文件咱們都沒有寫DOCTYPE,這裏給它加上

這個執行結果的是：若是文件讀寫順利就輸出‘成功’，若是出錯，就返回‘錯誤’。