jade學習筆記

2022-03-09 12:48:28 字數 1491 閱讀 4086

1、編譯檔案

jade 檔名 -p -w

2、大段文字的寫法:

| 內容前加「|」  或者採用. 元素名.  內容    例:

3、注釋:

單行注釋  //    -->

jade注釋   //-   僅在jade中注釋,不會顯示在html檔案裡

塊注釋   //- 下面一行並縮排的** 都會被解釋成塊注釋     僅在jade中注釋,html中不顯示    例:

4、宣告變數和替換資料

1.直接在jade檔案中宣告資料:

-var course="jade";

title #;

2.命令列的形式傳入資料:jade index.jade -p -w   --obj ''

3.通過json檔案傳入資料:jade index.jade -p -w -o data.json                //將資料寫入json檔案

5、安全轉義與非安全轉義:

- var htmldata='';

#   -->  將html標籤及《等符號都轉義成安全的字串;              簡寫:p=htmldata 

!   -->  不轉義資料中的字串                                            簡寫:p!=htmldata ;

特殊情況:輸出#        

-->

!input( value = newdata )    如果newdata不存在,則會輸出

input( value='#')  如果 ewdata不存在,則會輸出

6、流程控制:

jade支援原生js**

1.for

-var data =

-for( var k in data )

p= data[k]

2.each 

-var data =

-each value key in data

p #:#

3.陣列遍歷:

var course=[node,jade,sass]

each item in course 

p = item ;

巢狀示例:

var sections = [ , ]

dleach section in sections

dt=section.id

each item in section.items

dd=item 

7、條件判斷語句

1. if...else...

2. unless... 除非...

3.case

8、**重用:mixins

(未完待續……)

jade 學習筆記

特別注意 縮排要麼用空格,要麼用tab,不能同時用兩種 子元素和父元素要有縮排 標籤和文字之間要有空格 doctype html html head title this is title body section divp ulstrong hr加class p.後跟 塊 表示換行 jade 也可...

學習前端模板引擎 jade 一

通常大部分前端開發工作者一開始步入前端開發的時候,都是直接簡單的寫html頁面然後丟給後台開發,後台開發在來嵌入模版。對於日益龐大的前端頁面來說,還是用老的字串拼接的方法來嵌入html內容已經不適應當下的開發趨勢了。廢話不多說,直接切入正題。第二步我要安裝npm包管理工具,在node環境下,不裝gr...

Jade高階使用

要使用jade,其實不是那麼容易接受的,幾個優點我列出來。1.熟悉的話,開發確實比較快,適合全棧開發。2.強制使用縮排,但比較簡潔,也不像html又要寫開頭又要寫結尾。3.模板繼承方便 pages 放置頁面 layout.jade var express require express var po...