-
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(href='http://imooc.com',title='imooc jade study', data-uid='1000') 点我点我 解析为 <a href="http://imooc.com" 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
提交
取消