jade模板引擎簡介

模板引擎是一個庫凉蜂,或者一個使用一定的規(guī)則或者語言來解釋數(shù)據(jù)并渲染試圖的框架恨课。模板引擎處理過的最終結果是一個視圖頁面险胰,也就是HTML頁面或者用戶圖形界面GUI。在MVC框架中屯援,模板屬于View層猛们。
使用模板的好處:一個模板可以動態(tài)生成無限多個頁面,而且方便全局性的修改狞洋。
jade是nodejs的模板引擎阅懦,采用空格縮進的規(guī)則
標簽
jade每行開頭都會被默認解釋成HTML標簽,不用<></>和配對徘铝,可以節(jié)省很多鍵盤輸入
變量與數(shù)據(jù)
默認jade傳入的數(shù)據(jù)稱為locals,如果要輸入一個變量需要使用=表示怕午。
例如:

h1=title
p= body

** 屬性**
jade屬性可以通過在標簽后面添加()完成淹魄,格式是(name=value)郁惜,多個屬于通過甲锡,分隔開
例如:

div(id="content", class="main")
//如果屬性value為變量,只需要書寫變量的名字即可缤沦,例如下面的url虎韵,isActive缸废,isChecked
a(herf=url, data-active=isActive)
label
    input(type="checkbox", checked=isChecked)
    //如果一行輸入不完驶社,可以通過|繼續(xù)在新的一行中輸入HTML內容亡电,入下處的|
    | yes/no

字面量
為了方便id和class可以使用#和.代替
例如:

//div(id="content")等同于如下
div#content
//p(class="lead center")等同于如下
p.lead.center

文本
通過使用|可以輸出原始文本
script或style代碼塊
可以使用script或style標簽寫入內容塊
例如:

  script.
      //下面可以寫入js代碼
      console.log("Test");

javascript代碼
可以使用-硅瞧,=腕唧,四苇!=開頭表示注入js代碼方咆。不過這個需要注意避免跨站腳本XSS攻擊瓣赂。
不過if, unless語句可以不用使用前綴也表示標準js代碼
例如:

- var arr = ["a", "b", "c"]
//if語句可以不用-,=,!=符號標注  
if(arr.length!=0)
  p "arr is null"
else 
  p "arr is not null"

注釋
通過//顯示注釋內容妓肢,//-不顯示注釋內容

each語句
與if相似苫纤, 在jade中的迭代可以簡單的寫each語句,規(guī)則:each arg index in args

過濾器
文本塊的過濾需要安裝第三方的過濾器

讀取變量
讀取方法:#{name}

case
用法:

case value
when value1
defaule

函數(shù)mixin
mixin產生一些HTML代碼的函數(shù)喊废,并且可以帶參數(shù)污筷。
聲明語法:mixin name(param, param2,...)
使用語法:+name(data)

include
include是把邏輯提取到單獨文件里面的一種方式瓣蛀,主要是為了讓多個文件重用它雷厂。
例如:include ./include/header
注意改鲫, 這里并不需要給名字或者路徑添加雙引號或者單引號。
include操作是在編譯時處理诊县,因此措左,不能在文件名和文件路徑中使用變量怎披。

extend
extend是一種自底而上的方法,與include相反性宏,包含的文件決定要替換的主文件的哪一部分毫胜。
格式:extend filename, block blockname

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末酵使,一起剝皮案震驚了整個濱河市口渔,隨后出現(xiàn)的幾起案子穿撮,更是在濱河造成了極大的恐慌悦穿,老刑警劉巖咧党,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件傍衡,死亡現(xiàn)場離奇詭異蛙埂,居然都是意外死亡,警方通過查閱死者的電腦和手機叠赐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進店門芭概,熙熙樓的掌柜王于貴愁眉苦臉地迎上來罢洲,“玉大人惹苗,你說我怎么就攤上這事×芨伲” “怎么了洽瞬?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵片任,是天一觀的道長。 經(jīng)常有香客問我氛濒,道長鹅髓,這世上最難降的妖魔是什么窿冯? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任醒串,我火速辦了婚禮芜赌,結果婚禮上,老公的妹妹穿的比我還像新娘膘壶。我一直安慰自己颓芭,他們只是感情好,可當我...
    茶點故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著万矾,像睡著了一般慎框。 火紅的嫁衣襯著肌膚如雪笨枯。 梳的紋絲不亂的頭發(fā)上馅精,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天洲敢,我揣著相機與錄音,去河邊找鬼睦优。 笑死汗盘,一個胖子當著我的面吹牛询一,可吹牛的內容都是我干的健蕊。 我是一名探鬼主播绊诲,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼掂之,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了槽卫?” 一聲冷哼從身側響起胰蝠,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤躲庄,失蹤者是張志新(化名)和其女友劉穎钾虐,沒想到半個月后效扫,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了闪盔。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片泪掀。...
    茶點故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡异赫,死狀恐怖塔拳,靈堂內的尸體忽然破棺而出靠抑,到底是詐尸還是另有隱情适掰,我是刑警寧澤,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布肌似,位于F島的核電站川队,受9級特大地震影響睬澡,放射性物質發(fā)生泄漏煞聪。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望迈套。 院中可真熱鬧桑李,春花似錦窿给、人聲如沸崩泡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至姐军,卻和暖如春奕锌,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背固惯。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工葬毫, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留贴捡,地道東北人烂斋。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓汛骂,卻偏偏與公主長得像评腺,于是被迫代替她去往敵國和親蒿讥。 傳聞我的和親對象是個殘疾皇子芋绸,可洞房花燭夜當晚...
    茶點故事閱讀 43,697評論 2 351

推薦閱讀更多精彩內容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理廷蓉,服務發(fā)現(xiàn)舷夺,斷路器给猾,智...
    卡卡羅2017閱讀 134,638評論 18 139
  • 1. Java基礎部分 基礎部分的順序:基本語法敢伸,類相關的語法恒削,內部類的語法,繼承相關的語法每币,異常的語法琢歇,線程的語...
    子非魚_t_閱讀 31,602評論 18 399
  • Express框架里內嵌了Jade模板引擎揭保。正好項目里也要用到魄宏,本篇整理了下Jade的相關用法。 安裝與執(zhí)行 標簽...
    張歆琳閱讀 25,500評論 8 42
  • 作者:楊會會 拍攝:楊會會 是的匕得,我不知道這是什么花汁掠,它俘獲了我的心,我想知道它的名字翠忠。 [從學校里走過乞榨,看到滿樹...
    楊會會_9ece閱讀 298評論 9 1
  • GL考榨,工程師鹦倚,相識十年,因為他總是嘻嘻哈哈說自己不愛讀書散休,我們都忘記了他是某航空研究所的正牌博士乐尊,研究科目就不說了...
    老神在在_曾用名蓮葉田田閱讀 502評論 0 1