-
5. 傳遞屬性 比如,傳遞單個(gè)屬性(attributes為關(guān)鍵字,) mixin attr(name) p(class!=attributes.class) #{name} //這里的！是非轉(zhuǎn)義的意思，不是“不等于” +attr('attr')(class='magic') 解析后: <p class="magic">attr</p> 比如,傳遞多個(gè)屬性 mixin attrs(name) p&attributes(attributes) #{name} +attrs('attrs')(class='magic2', id='attrid') 解析后： <p id="attrid" class="magic2">attrs</p> 6. 傳遞未知個(gè)數(shù)參數(shù) mixin magic(name, ...items) ul(class='#{name}') each item in items li= item +magic('magic', 'node', 'jade', '..') 解析后： <ul class="magic"> <li>node</li> <li>jade</li> <li>..</li> </ul>查看全部
-
mixin 1. 通過(guò)mixin name來(lái)聲明 通過(guò)加號(hào)+來(lái)調(diào)用 mixin lesson p imooc jade study +lesson 解析后: <p>imooc jade study</p> 2. 聲明的時(shí)候可以通過(guò) mixin name(參數(shù)列表) 來(lái)聲明帶參數(shù)的mixin 調(diào)用時(shí)要傳入?yún)?shù) mixin study(name, courses) p #{name} study ul.courses each course in courses li= course +study('tom', ['jade', 'node']) 解析后： <p>tom study</p> <ul class="courses"> <li>jade</li> <li>node</li> </ul> 3. 可以嵌套調(diào)用(配合上面的 study 使用) mixin group(student) h4 #{student.name} +study(student.name, student.courses) +group({name: 'tom', courses: ['jade', 'node']}) 解析后: <h4>tom</h4> <p>tom study</p> <ul class="courses"> <li>jade</li> <li>node</li> </ul> 4. 可以帶代碼塊式的內(nèi)聯(lián)調(diào)用(block為關(guān)鍵字) mixin team(slogon) h4 #{slogon} if block block else p no team +team('slogon') p Good job! 解析后： <h4>slogon</h4> <p>Good job!</p>查看全部
-
1. if...else if...else 和原生的一致，無(wú)需加前綴“－” 2. unless,if的反向判斷,當(dāng)值為false的時(shí)候,去做某些事情。 3. case ...when等價(jià)于原生的switch case 例如: - var name = 'jade' case name when 'java' when 'node' p Hi node! when 'jade': p Hi jade! default p Hi #{name} 輸出: <p>Hi jade!</p>查看全部
-
1.原生語(yǔ)法遍歷對(duì)象： -for(var attr in obj) ; 調(diào)用 obj[attr] 如： - var imooc = {course:'jade', level:'high'} - for(var k in imooc) p= imooc[k] 輸出: <p>jade</p> <p>high</p> 2.each語(yǔ)法糖 遍歷對(duì)象: -each value,key in obj 遍歷數(shù)組: -each item in items 如: - var imooc = {course:'jade', level:'high'} - each value,key in imooc p #{key}: #{value} 輸出: <p>course: jade</p> <p>level: high</p> 如： - var courses = ['node','jade','express'] - each item in courses p= item 輸出： <p>node</p> <p>jade</p> <p>express</p> 3.while語(yǔ)句 -var n = 0 ul while n < 4 li= n++ 輸出: <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> </ul>查看全部
-
變量默認(rèn)是自動(dòng)轉(zhuǎn)義的，轉(zhuǎn)義后的代碼 < 會(huì)被解析成 < 而 > 會(huì)被解析成 > 加感嘆號(hào)則是不轉(zhuǎn)義的,顯示的代碼就是代碼原文； 同理, = 和 != 也可以起到轉(zhuǎn)義和非轉(zhuǎn)義的作用。 - var data = '<script>alert(1)</script>' p #{data} p !{data} p= data p!= data 解析完html代碼后表現(xiàn)為 <p><script>alert(1)</script></p> <p><script>alert(1)</script></p> <p><script>alert(1)</script></p> <p><script>alert(1)</script></p> 當(dāng)然,有時(shí)候也需要輸出特殊字符,比如 #{} ,我們需要單純的輸出這個(gè)字符，而非把它當(dāng)作一個(gè)變量,這時(shí)候需要用到轉(zhuǎn)義字符 \ 。 如, #{data} 這個(gè)會(huì)輸出 變量 data , \#{data} 則會(huì)保證其不會(huì)被解析,輸出的依舊是 #{data} 。 有時(shí)候,我們希望變量如果定義了,解析后變成正常定義的內(nèi)容,如果沒(méi)有定義,我們希望其返回空,而不是undefined,這個(gè)時(shí)候我們一般采用 = ,而不是采用 #{} 如(newData變量未定義)： input(value='#{newData}') input(value= newData) 解析為: <input value="undefined"> <input>查看全部
-
1. 頁(yè)面中定義變量(- var的形式來(lái)定義變量) - var course = 'jade' 調(diào)用變量( #{} 的形式來(lái)調(diào)用變量) h3 #{course.toUpperCase()} 輸出結(jié)果 <h3>JADE</h3> 2.命令行傳參 jade index.jade -P -w --obj "{'course':'hello'}" 通過(guò)命令行工具以對(duì)象的形式傳入?yún)?shù)(字符串),可以在 index.jade 里面直接調(diào)用 #{course},輸出字符串 hello 如果命令行傳入的變量和文檔內(nèi)部定義的變量重名,則文檔內(nèi)部定義的變量?jī)?yōu)先級(jí)高。 3.可以從json文件中，調(diào)用已聲明的鍵值 { "course": "imooc" } 命令行輸入 jade index.jade -P -w -O imooc.json查看全部
-
.表示文本塊開(kāi)始 | 文本行開(kāi)始 // 單行注釋 ：解析為<!--單行注釋--> //- 非緩沖注釋 ：不顯示在編譯后的 html中 //- 塊注釋,注釋掉外層標(biāo)簽,就相當(dāng)于注釋掉整個(gè)標(biāo)簽所代表的代碼塊 IE里面的條件注釋： <!--[if IE 8]><html class='ie8'><![endif]--> <!--[if IE 9]><html class='ie9'><![endif]--> <!--[if !IE]><!--><html><!--<![endif]--> </html> 注意：添加條件注釋需要閉合html標(biāo)簽查看全部
-
多行文本(以p標(biāo)簽為例) 方式一：縮進(jìn)加豎線和空格(分行) p | 1.aa | 2.bb | 3.cc 解析為: <p> 1.aa 2.bb 3.cc </p> 方式二：標(biāo)簽后面緊跟. (無(wú)需豎線和空格) p. 1.aaa<strong>11</strong> 2.bbb 3.ccc 解析為: <p> 1.aaa<strong>11</strong> 2.bbb 3.ccc </p>查看全部
-
div.title2#title 解析為 <div id='title' class='title2'></div> h1.title.title1(id='title2',class='title3') imooc 解析為: <h1 id="title2" class="title title1 title3">imooc</h1> jade 中div標(biāo)簽可以省略，直接寫(xiě)類名或者id #nav.wrapper解析為 <div id="nav" class="wrapper"></div> a(imooc jade study', data-uid='1000') 點(diǎn)我點(diǎn)我 解析為 <a title="imooc jade study" data-uid="1000">點(diǎn)我點(diǎn)我</a> input(name='course', type='text', value='jade') 解析為 <input name="course" type="text" value="jade"> input(name='type', type='checkbox', checked) 解析為 <input name="type" type="checkbox" checked>查看全部
-
jade index.jade 編譯文件 jade -P index.jade 編譯成帶格式的html文件 jade -P -w index.jade 實(shí)時(shí)編譯查看全部
-
doctype html html head title imooc jade study body查看全部
-
Jade環(huán)境配置查看全部
-
命令行查看全部
-
jade的環(huán)境配置查看全部
-
jade環(huán)境配置：Mac 和 window查看全部
舉報(bào)
0/150
提交
取消