jade可以自动识别单双标签
// 1.jade内容: input(type="button", value="点击") div // 此时输出❌error:input is self closing and should not have content,input为单标签不能有内容
Jade中所有自定义标签都认为是双标签
// 2.jade内容: html head body div aaa // 此时输出: <html> <head></head> <body> <div> <aaa></aaa> </div> </body> </html>
Jade中原样输出方法一使用“|”
// 3.jade内容: html head script |window.onload = function(){ // ⚠️一定要相对script缩进,才能出现在script里面 | var oBtn = document.getElementById("btn1"); | oBtn.onClick = function(){ | alert(1); | } |} body |aaa |bbb |ccc // 此时输出: <html> <head> <script> window.onload = function(){ var oBtn = document.getElementById("btn1"); oBtn.onClick = function(){ alert(1); } } </script> </head> <body> aaa bbb ccc </body> </html>
Jade中原样输出方法二使用“.”
// 4.jade内容: html head script. window.onload = function(){ var oBtn = document.getElementById("btn1"); oBtn.onClick = function(){ alert(1); } } body. aaa bbb ccc // 此时输出: <html> <head> <script> window.onload = function(){ var oBtn = document.getElementById("btn1"); oBtn.onClick = function(){ alert(1); } } </script> </head> <body> aaa bbb ccc </body> </html>
Jade中原样输出方法三使用include:可以将html、style、head部分、script等等当成一个整个文件引入到页面中
// 5.jade内容: html head script include ../a.js body include ../a.txt // a.js内容: window.onload = function(){ var oBtn = document.getElementById("btn1"); oBtn.onClick = function(){ alert(1); } } // a.txt内容: aaa bbb ccc // 此时输出: <html> <head> <script>window.onload = function(){ var oBtn = document.getElementById("btn1"); oBtn.onClick = function(){ alert(1); } } </script> </head> <body>aaa bbb ccc </body> </html>
jade中赋值使用“#{}”
// 6.jade内容: html head script body div 我的名字:#{name} // jade2.js内容: const jade = require('jade'); var str = jade.renderFile('./work/lesson13/view/6.jade',{pretty:true,name:'blue'}); console.log(str); // 此时输出: <html> <head> <script></script> </head> <body> <div>我的名字:blue</div> </body> </html>
jade中简写使用“=”赋值
// 简写: // 11.jade内容: html head script body span=a span=b // Jade7.js内容: const jade = require('jade'); var str = jade.renderFile('./work/lesson13/view/11.jade',{ pretty:true, a:12, b:56 }); console.log(str); // 此时输出: <html> <head> <script></script> </head> <body><span>12</span><span>56</span></body> </html>
jade中的数据传递(可以做一些运算)
// 7.jade内容: html head script body div 计算结果为:#{a + b} // jade3.js内容: const jade = require('jade'); var str = jade.renderFile('./work/lesson13/view/7.jade',{pretty:true,a:12,b:13}); console.log(str); // 此时输出: <html> <head> <script></script> </head> <body> <div>计算结果为:25</div> </body> </html>
jade中的数据传递(做更多的事情)
// 8.jade内容: html head script body div(style=json) div(class=arr) // jade4.js内容: const jade = require('jade'); var str = jade.renderFile('./work/lesson13/view/8.jade',{ pretty:true, json:{ width:'200px', height:'200px', background:'red' }, arr:["aaa","bbb","ccc"] }); console.log(str); // 此时输出: <html> <head> <script></script> </head> <body> <div style="width:200px;height:200px;background:red"></div> <div class="aaa bbb ccc"></div> </body> </html>
jade可以加多个class
// 9.jade内容: html head script body div(style=json) div(class=arr) div(class=arr class="active") // 这个active将融入进去 div(class=arr) div(class=arr) // 此时输出: <html> <head> <script></script> </head> <body> <div style="width:200px;height:200px;background:red"></div> <div class="aaa bbb ccc"></div> <div class="aaa bbb ccc active"></div> <div class="aaa bbb ccc"></div> <div class="aaa bbb ccc"></div> </body> </html>
jade中识别代码使用“-”(直接定义变量,直接写js)
// 10.jade内容: html head script body -var a=12; -var b=13; div 计算结果为:#{a + b} // 此时输出: <html> <head> <script></script> </head> <body> <div>计算结果为:25</div> </body> </html>
jade中的循环
// 12.jade内容: html head script body -for(var i=0; i<arr.length; i++) div=arr[i] // ⚠️一定要相对for缩进 // Jade8.js内容: const jade = require('jade'); var str = jade.renderFile('./work/lesson13/view/12.jade',{ pretty:true, arr:["jhkh","bhiysia","hihn"] }); console.log(str); // 此时输出: <html> <head> <script></script> </head> <body> <div>jhkh</div> <div>bhiysia</div> <div>hihn</div> </body> </html>
jade中如何输出html标签?
// 13.jade内容: html head script body div #{content} // jade9.js内容: const jade = require('jade'); var str = jade.renderFile('./work/lesson13/view/13.jade',{ pretty:true, content:"<div>留言</div><p>口红口红打底好看的话</p>" }); console.log(str); //此时输出: <html> <head> <script></script> </head> <body> <div><div>留言</div><p>口红口红打底好看的话</p></div> </body> </html>
⚠️此时我们发现jade自动帮我们将html标签转换成了html实体,防止注入式攻击
❗️注入式攻击:比如留言的时候写了一些标签,做了一些破坏性的操作,如果直接就显示标签会可能带来很大的危害
jade中非转义输出html标签使用“!=”或“!{}”
// 14.jade内容: html head script body div!=content ⚠️也可以写成div !{content}// 此时输出: <html> <head> <script></script> </head> <body> <div><div>留言</div><p>口红口红打底好看的话</p></div> </body> </html>
jade中使用if-else if-else
// 15.jade内容: html head script body -var a=13; -if(a%2==0) div(style={width:'200px',height:'200px'}) -else div(style="width:300px;height:300px") // 此时输出: <html> <head> <script></script> </head> <body> <div style="width:300px;height:300px"></div> </body> </html> // other - var isTrue = true - var lessons = ['jade','js'] if lessons if lessons.length>2 p more than 2: #{lessons.join(',')} else if lessons.length>1 p more than 1: #{lessons.join(',')} else p no1 lessons else p no2 lessons
jade中使用unless(为false就继续执行)
- var isTrue = true unless !isTrue ⚠️此时判读为false所以继续往下执行 p #{lessons.length}
jade中使用case-when(js的swith)
// 16.jade内容: html head script body -var a=3; ⚠️因为此处加了“-”所以下面不需要再加了,jade会自动识别代码,如果前面是代码后面也一直是代码就不需要加,目前只在此处做了实验,但10.jade不可以 case a when 1 div aaa ⚠️这些都没加“-”,原因见上面 when 2 div bbb when 3 div ccc default |不靠谱 // 此时输出: <html> <head> <script></script> </head> <body> <div>ccc</div> </body> </html>
⚠️jade都支持js中的语法
jade中使用each-in(js的for-in)
// 遍历对象 -var json={ a:1, b:2 } each value,key in json p #{key}:#{value} // 遍历数组 -var arr = ["aaa","bbb"] each value in arr p= value ⚠️也可以写成p #{value} // 嵌套循环 - var sections = [{id:0,items:['a','b']},{id:1,items:['c','d']}] dl each section in sections dt= section.id each items in section.items dd= items
jade完整实例
// index.jade内容: doctype html meta(charset="utf-8") title jade测试 head style. div{ width:100px; height:100px; line-height:100px; background:"#ccc"; text-align:center; float:left; } div.last{ background:red; } script body -var a=12; while a < 30 if(a%4==0 && a!=0) div.last=a++ / div.last #{a++} else div=a++ / div #{a++} // main.js内容: const jade = require('jade'); const fs = require('fs'); var str = jade.renderFile('./work/lesson13/view/index.jade',{ pretty:true }); fs.writeFile("./work/lesson13/build/index.html",str,function(err){ if(err){ console.log("编译失败"); }else{ console.log("成功"); } }) // build内容: <!DOCTYPE html> <html> <meta charset="utf-8"> <title>jade测试</title> <head> <style> div{ width:100px; height:100px; line-height:100px; background:"#ccc"; text-align:center; float:left; } div.last{ background:red; } </style> <script></script> </head> <body> <div class="last">12</div> <div>13</div> <div>14</div> <div>15</div> <div class="last">16</div> <div>17</div> <div>18</div> <div>19</div> <div class="last">20</div> <div>21</div> <div>22</div> <div>23</div> <div class="last">24</div> <div>25</div> <div>26</div> <div>27</div> <div class="last">28</div> <div>29</div> </body> </html>
jade中使用mixin来写代码块(有点像js函数)
案例一:基础
doctype html html head title hello jade body mixin lesson // 声明一个mixins p hello world +lesson // 使用+加上mixins的名字来调用 // 输出 <!DOCTYPE html> <html> <head> <title>hello jade</title> </head> <body> <p>hello mixin</p> </body> </html>
案例二:传参
html head script body mixin lesson2(name,arr) p #{name} ul each value in arr li #{value} +lesson2("wang",["111","222"]) // 输出 <html> <head> <script></script> </head> <body> <p>wang</p> <ul> <li>111</li> <li>222</li> </ul> </body> </html>
案例三:嵌套
html head script body mixin lesson2(name,arr) p #{name} ul each value in arr li #{value} mixin lesson3(json) p #{json.name} +lesson2(json.name,json.arr) +lesson3({name:"wang",arr:["111","222"]}) // 输出 <html> <head> <script></script> </head> <body> <p>wang</p> <p>wang</p> <ul> <li>111</li> <li>222</li> </ul> </body> </html>
案例四:传递代码块使用block
html head script body mixin lesson4(text) h4 #{text} if block block else p no text +lesson4('testing') p hello world // 输出 <html> <head> <script></script> </head> <body> <h4> testing </h4> <p>block</p> </body> </html>
案例五:传属性,实际上传过来的属性参数被存在一个attributes对象中
方法一:
html head script body mixin lesson5(text) p #{text} h4(class=attributes.class,id=attributes.id) +lesson5('testing')(class="attr",id="id") // 输出 <html> <head> <script></script> </head> <body> <p>testing</p> <h4 id="id" class="attr"></h4> </body> </html>
方法二:使用&attributes
html head script body mixin lesson5(text) p #{text} h4&attributes(attributes) +lesson5('testing')(class="attr",id="id") // 输出 <html> <head> <script></script> </head> <body> <p>testing</p> <h4 id="id" class="attr"></h4> </body> </html>
案例六:不确定传参使用"..."
html head script body mixin lesson5(text,...items) ul(class="#{text}") each value in items li= value +lesson5('testing','aa','bb','cc') // 输出 <html> <head> <script></script> </head> <body> <ul class="testing"> <li>aa</li> <li>bb</li> <li>cc</li> </ul> </body> </html>
jade中block的使用
block的默认输出
html head script body block test p 哈哈哈 // 输出 <html> <head> <script></script> </head> <body> <p>哈哈哈</p> </body> </html>
block的调用
html head script body block test p 哈哈哈 block test block test block test // 输出 <html> <head> <script></script> </head> <body> <p>哈哈哈</p> <p>哈哈哈</p> <p>哈哈哈</p> <p>哈哈哈</p> </body> </html>
⚠️block可以嵌套
jade使用extends和block实现继承
实例一:基础
// 新建一个文件extend.jade(被继承文件) html head script body block desc // 定义block h4 继承 block test // 调用blcok(test) // jade文件内容(继承文件) extends extend.jade block test // 定义block(test) p 哈哈哈 // 输出 <html> <head> <script></script> </head> <body> <h4>继承</h4> <p>哈哈哈</p> </body> </html>
实例二:继承文件里的block会覆盖被继承文件里的block
// 继承文件 extends extend.jade block test p 哈哈哈 block desc h4 覆盖 // 被继承文件 html head script body block desc h4 继承 block test // 输出 <html> <head> <script></script> </head> <body> <h4>覆盖</h4> <p>哈哈哈</p> <h4>覆盖</h4> </body> </html>
⚠️继承文件里的block必须在被继承文件里调用,否则不会输出,并且在继承文件中entends要和block同级
jade中的过滤(即使用插件语言less或sass或markdown等)
首先安装相应的插件语言
npm install less sass markdown
之后就可以在jade中使用less了,但不能在其中使用动态数据
style
:less
body{
p{
color:#ccc
}
}
⚠️使用:less、:sass、:markdown等
额外内容
1、变量还是赋值
foo = "hello" tmp = "world" + "!" h1= foo span= tmp
对于上面的代码,可能很多人第一眼看到都会有一个疑问,Jade怎么知道等号左边是变量名还是标签呢?
再仔细看看,很快就会发现,又是传说中的空格在作祟,变量后面等号前必须加空格,而标签直接接等号,不能加空格!
2、有三种方法可以原样输出文本,其中“|”和“.”有什么区分?
对于多行文本,如果同时具有子元素的话,使用.会导致无法识别子元素,故需要使用另一种标识符|,但在使用“.”时如果直接是以尖括号开头还是可以识别的
3、如果只有一个子元素,可以使用“:”来嵌套
ul#books li: a(href="#book-a") Book A li: a(href="#book-b") Book B
⚠️冒号后面一定要有空格
4、jade中可以对变量进行一些js操作
- var b = "hello" p #{b.toUpperCase()} world //编译的结果 <p>HELLO world</p>
5、jade中有四种赋值语句
-
=
-
#{}
-
!= (!=不是条件语句中的不等于逻辑运算符,而是非转义html)
- !{} (非转义输出html)
6、想要输出"#"、"!"、"{}",使用反斜线“\”
div \!{content} div \#{content} // 输出 <div>\!{content}{/div} <div>\#{content}{/div}
7、jade中的注释
-
“//”单行注释 解析后
html head // 哈哈 script body div(style=json) div(class=arr) div(class=arr class="active") div(class=arr) div(class=arr) // 输出 <html> <head> <!-- 哈哈--> <script></script> </head> <body> <div style="width:200px;height:200px;background:red"></div> <div class="aaa bbb ccc"></div> <div class="aaa bbb ccc active"></div> <div class="aaa bbb ccc"></div> <div class="aaa bbb ccc"></div> </body> </html>
⚠️单行注释要和下面的标签同级,否则下面的标签也会被注释
-
“//-”缓冲注释 解析后 不会显示,也就是不会输出
html head //- script body div(style=json) div(class=arr) div(class=arr class="active") div(class=arr) div(class=arr) // 输出 <html> <head></head> <body> <div style="width:200px;height:200px;background:red"></div> <div class="aaa bbb ccc"></div> <div class="aaa bbb ccc active"></div> <div class="aaa bbb ccc"></div> <div class="aaa bbb ccc"></div> </body> </html>
html head //- 哈哈 script body div(style=json) div(class=arr) div(class=arr class="active") div(class=arr) div(class=arr) // 输出 <html> <head> <script></script> </head> <body> <div style="width:200px;height:200px;background:red"></div> <div class="aaa bbb ccc"></div> <div class="aaa bbb ccc active"></div> <div class="aaa bbb ccc"></div> <div class="aaa bbb ccc"></div> </body> </html>
⚠️如果我们想要注释掉script,那么注释就不能与script同级,我们发现script和哈哈并没有输出,符合预期
-
“//”或“/-”块注释 解析后
html head script //body div(style=json) div(class=arr) div(class=arr class="active") div(class=arr) div(class=arr) // 输出 <html> <head> <script></script> </head> <!--body div(style=json) div(class=arr) div(class=arr class="active") div(class=arr) div(class=arr) --> </html>
-
条件注释[if IE8]......[end if]
总结:
1、单行注释和多行注释都使用“//”,至于是单行还是多行取决于“//”所在的位置,在有子元素的标签前或嵌套该标签,那么就是块注释也就是多行注释,如果在子元素的前面或嵌套该子元素,并且该子元素没有子元素,那么就是单行注释
2、对于三种注释来说,如果和标签同级,那么不会注释掉任何标签,可以在里面写我们平时写的一些注释