首頁 > web前端 > js教程 > 詳解基於模板引擎Jade的應用

詳解基於模板引擎Jade的應用

小云云
發布: 2017-12-14 09:06:42
原創
1769 人瀏覽過

本文小編就為大家分享一篇基於模板引擎Jade的應用程式詳解,具有很好的參考價值,希望對大家有幫助。一起跟著小編過來看看吧,希望能幫助大家。

有用的符號:

| 豎槓後的字元會被原樣輸出· 點表示下一層的所有字元都會被原樣輸出,不再被識別。 (就是|的升級版,實現批次) include 表示引用外部文件

短槓說明後面跟著的字元只是一段程式碼(與|的差別就是,|後面的內容會被顯示,而短槓後面的內容直接不顯示了! #'|'的應用


'.'的應用程式

include的應用程式

#呼叫變數做運算

##呼叫變數做運算

p的class

#'-' 的應用程式

變數的直接引用

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

jade中的for迴圈

jade:

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

js檔案:

-for(var i=0;i<arr.length;i++)
 p=arr[i]
登入後複製

運行結果:

#'!' 的應用程式


'!' #

console.log(jade.renderFile(&#39;./views/11.jade&#39;,{pretty:true,name:&#39;singsingasong&#39;,
 arr:[&#39;aaa&#39;,&#39;bbb&#39;,&#39;ccc&#39;,&#39;ddd&#39;]
}));
登入後複製

運行結果:

jade的if...else...


html
 head
 body
 p(class=&#39;1&#39;)!=content
 p(class=&#39;2&#39;)
登入後複製

case語句


#

html
 head
 body
 -var a=19;
 if(a%2==0)
  p(style={background:&#39;red&#39;}) 偶数
 else
  p(style={background:&#39;green&#39;}) 奇数
登入後複製


################################################################################################################################################################# #綜合的來一個###############小提示:######之前的jade檔案我們都沒有寫DOCTYPE,這裡給它加上####### ########這個執行結果的是:如果檔案讀寫順利就輸出'成功',如果出錯,就回傳'錯誤'。 ######相關推薦:############學習 Jade_html/css_WEB-ITnose###########node+express+jade製作簡單網站指南_node .js############Nodejs express框架一個工程同時使用ejs模版和jade模版_node.js######

以上是詳解基於模板引擎Jade的應用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板