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