- 編譯
-
jade index.jade,得到壓縮后的代碼（也就是沒有空格） -
jade -P index.jade,得到格式化的代碼轻掩，縮進(jìn)都正常 -
jade -P -w index.jade,對(duì)jade文件實(shí)時(shí)編譯抄谐，就不用改一次然后命令行敲一次了，直接自動(dòng)編譯
-
- 一個(gè)最簡(jiǎn)單的jade
doctype html
html
meta(charset="utf-8")
head
title meng
body
h1 jade
- 標(biāo)簽語法
- class
h1.classname - id
h1#idname - class + id
div.classname#idname可以連著寫,順序無所謂 -
div,很特殊如果直接寫#id,前面不寫div標(biāo)簽名邻耕，自動(dòng)生成一個(gè)id=id的div - 屬性寫法
a(class='title',),類和id也可以這樣寫在括號(hào)里面奶赔，注意逗號(hào)分隔终吼。 - 大段純文本
p. ＃這個(gè)點(diǎn)必須緊緊跟著p烛愧，表示下面的是一個(gè) wenben weben wenben p ＃這叫管道文本 |weneb |wene- 帶標(biāo)簽的大段文本
p. wenbwne <strong>wenwbe</strong> ＃直接寫標(biāo)簽名 或者 p | dss strong asdf ＃豎線的話元素不用寫尖括號(hào) | dsdfsf - class
- 注釋
- 單行注釋酪惭，直接在前面加
// - 非緩沖注釋希痴，完全不會(huì)被編譯到html代碼中
//- - 塊注釋，也是
//-或者//
- 單行注釋酪惭，直接在前面加
- 寫樣式
style.
body{color:red}
- 寫js代碼
script.
var i = 0
或者
－ var i = 'hello'
－ for (var k in value)等等
- 聲明變量和替換
- 第一種方式（寫在頁面里）
－ var course = 'jade' ＃把變量聲明在頁面里
＃這樣course就可以在整個(gè)文檔中被訪問了
＃使用的時(shí)候#{course}就代表jade這個(gè)字符串了
＃并且可以用js方法春感，#{course.toUpperCase()}砌创，將字符串變成大寫
- 第二種方式（寫在命令行）
＃命令行里面也可以傳一個(gè)變量
jade index.jade -P -w --obj'{"course":"jade"}' ＃注意語法
當(dāng)前文檔里聲明的變量?jī)?yōu)先級(jí)比命令行傳的變量高
- 第三種方式（寫在json文件里)(命令行升級(jí)版)
json文件,index.json
{
"course":"jade"
}
命令行
jade index.jade -P -w -O index.json
- 插入一個(gè)值（轉(zhuǎn)義）
＃什么時(shí)候會(huì)轉(zhuǎn)義，比如說要寫一個(gè)script標(biāo)簽放在一個(gè)變量里
－ var htmlData = '<script>alert(1)</script>'這樣尖括號(hào)就會(huì)被轉(zhuǎn)義成<
- 非轉(zhuǎn)義
p !{htmlData} p后面必須有空格這樣尖括號(hào)還是尖括號(hào)鲫懒，并且等同于p!= htmlData p后面緊跟嫩实，不能有空格 - 安全轉(zhuǎn)義
p #{htmlData}常規(guī)引入變量，尖括號(hào)會(huì)被轉(zhuǎn)義,并且等同于p= htmlData - tip 如果要輸出窥岩！和＃甲献，就得轉(zhuǎn)義
\! \# - 存在一種特殊情況，當(dāng)值不存在或者未定義的時(shí)候颂翼，那么就不用寫#{}
input(value=newData),這樣newData不論有沒有值晃洒，都可以，沒有值就相當(dāng)于沒有朦乏，不會(huì)顯示undefined
- 代碼嵌入總結(jié)
-
-,eg- for (var x=0;x<3 x ++) -
=,
p = 'This is <p>' ＃特殊字符會(huì)被轉(zhuǎn)義球及，也就是尖括號(hào)-
!=,特殊字符不會(huì)被轉(zhuǎn)義
-
- 流程代碼
-
for each遍歷
－ var course = {course:"jade",level:"high"} － for (var k in course) p= course[k] ＃這樣就被直接執(zhí)行了-
each遍歷，數(shù)組集歇，對(duì)象都可以
each value in arr p= value- 選擇
case
case friends when 0 when 1 default p balalala-
while循環(huán)
while n < 4 li= n++- 選擇
if ...else if ... else
還有－ var user = { description: 'foo bar baz' } － var authorised = false ＃user if user.description h2 Description p.description= user.description else if authorised h2 Description p.description. User has no description, why not add one... else h1 Description p.description User has no descriptionunless語句,不符合才執(zhí)行－var con = flas unless con p Hello,world＃結(jié)果會(huì)生成p標(biāo)簽 -
-
mixins桶略，需要用+標(biāo)識(shí)符使用
mixin list
ul
li foo
li bar
li baz
+list
+list
帶參數(shù)的混合宏
mixin pet(name)
li.pet= name
ul
+pet('cat')
+pet('dog')
...表示不定數(shù)量的參數(shù)
mixin list(id,...items)
ul(id=id)
each item in items
li= item
+list('mylist',1,2,3,4)
-
includes，實(shí)現(xiàn)高度復(fù)用诲宇，將代碼片段保存在不同的文件中际歼，需要哪個(gè)，導(dǎo)入哪個(gè)
＃在需要的地方寫includes
html
./includes/head.jade
-
extends,實(shí)現(xiàn)繼承姑蓝，繼承與復(fù)用的區(qū)別在于繼承可以修改代碼鹅心，而復(fù)用是原原本本的代碼- 使用
block標(biāo)識(shí)符，設(shè)置一個(gè)可修改代碼片段纺荧，緊跟block后面的是該代碼片段的名字
block codename title Default title - 使用
-
Mixins,制造可重復(fù)使用的代碼段- 沒有變量的mixins
//語法 mixin list ul li foo li bar li baz //使用 +list 即可- 傳入變量的mixins
mixin pet(name) li.pet = name //使用 ul +pet('cat')- 更復(fù)雜的mixins
mixin article(title) .article .article-wrapper h1 = title if block blcok //存放可變的代碼塊 else p no content //使用 +article("hello") 或者 +article("hello block") p this is my block- mixins傳入的變量也可以用“rest arguments”語法
mixin list(id,...items) ul(id=id) each item in items li= item //使用 +list('my-list',1,2,3,4)
- 坑坑坑旭愧！
- 用webstorm有時(shí)正常有時(shí)報(bào)錯(cuò)空格和tab不能混合用，解決辦法：webstorm->preference->code style->jade->Tabs and Indents->勾選use tab charactor就行了宙暇！
