1.模板引擎：模板引擎編譯成html瘟仿，靜態(tài)js甜攀，css；
jade與pug同名
2.如何使用jade解析字符串：
1.》下載jade：cnpm install jade
2.》引入jade：const jade=require（‘jade’);
3.》用jade解析字符串：var str=jade.render('html');
3.如何使用jade解析文本：
1.》引入jade：const jade=require（‘jade’);
2.》用jade解析文本：var str=jade.renderFile('文件路徑'刹衫，{pretty：true})所灸；
實(shí)例：
jade.js
//使用jade解析字符串
const jade=require('jade');
var str=jade.render('html');
console.log(str);
jade2.js
//使用jade解析文本
const jade=require('jade');
var str=jade.renderFile('./content/1.jade',{pretty:true});
console.log(str);
1.jade(以jade結(jié)尾的為模板引擎，在jade里面用Tab鍵空格譬胎，以此來(lái)區(qū)分層級(jí))
html
heade
body
ul
li
li
li
4.jade中的屬性：
style屬性在jade里面可用來(lái)解析對(duì)象差牛；
class屬性在jade里面可用來(lái)解析數(shù)組格式命锄；
注：多個(gè)屬性間用逗號(hào)隔開(kāi)
注：在jade中通過(guò)縮進(jìn)來(lái)區(qū)分層級(jí)結(jié)構(gòu)
實(shí)例：
3.jade
html
head
body
a()
input(type='text',name='uname',value='用戶(hù)名')
jade2.js
//使用jade解析文本
const jade=require('jade');
var str=jade.renderFile('./content/3.jade',{pretty:true});
console.log(str);
5.如何把jade語(yǔ)法寫(xiě)入html中：
引用fs模塊
3.js
const jade=require('jade');
const fs=require('fs');
var str=jade.renderFile('./content/3.jade',{pretty:true});
fs.writeFile('b.html',str,function(err){
if(err){
console.log('失敗')
}else{
console.log('成功')
}
})
3.jade
html
head
body
a()
input(type='text',name='uname',value='用戶(hù)名')
div(style="width:1234px;height:50px;")
div(style="{width:1234px;height:50px;}")
p(class=rose nav banner)
p(class=['rose','nav','banner'])
6.如何在jade語(yǔ)法中給元素添加內(nèi)容：
實(shí)例：
4.jade
html
head
body
a("http://www.baidu.com") 去百度
div aaa
span bbb
h3 ccc
jade2.js
//使用jade解析文本
const jade=require('jade');
var str=jade.renderFile('./content/4.jade',{pretty:true});
console.log(str);
7.原樣輸出：
5.jade (script后加.) 內(nèi)容前加|
html
head
body
div
|aaa
|bbb
|ccc
script.
var btn=document.getElementById('botton');
var btn=document.getElementById('botton');
var btn=document.getElementById('botton');
var btn=document.getElementById('botton');
var btn=document.getElementById('botton');
jade2.js
//使用jade解析文本
const jade=require('jade');
var str=jade.renderFile('./content/5.jade',{pretty:true});
console.log(str);
注意：在jade中：script里不允許強(qiáng)制換行
8.在jade中解析變量
2.js
const jade=require('jade');
var str=jade.renderFile('./content/2.jade',{pretty:true,uname:'jack'});
console.log(str);
2.jade
html
body
div
|我的名字叫#{uname}
9.在jade中做運(yùn)算
3.js
const jade=require('jade');
var str=jade.renderFile('./view/3.jade',{pretty:true,a:3,b:5});
console.log(str);
3.jade
html
head
body
div a+b=#{a+b}
div #{a}
div #
h1=a
h1=b
10.在jade中解析style和class
4.js
const jade=require('jade');
var str=jade.renderFile('./content/4.jade',{pretty:true,
json:{width:'200px',height:'200px',background:'red'},
arr:['box','banner','nav']});
console.log(str);
4.jade
html
head
body
div(style=json)
p(class=arr)
11.在jade中解析js
5.js
const jade=require('jade');
var str=jade.renderFile('./content/5.jade',{pretty:true,});
console.log(str);
5.jade
html
head
body
-var a=3;
-var b=5;
div a+b=#{a+b}
12.在jade中如何循環(huán)
5.js
const jade=require('jade');
var str=jade.renderFile('./content/5.jade',{pretty:true,});
console.log(str);
5.jade
html
head
body
-var a=3;
-var b=5;
div a+b=#{a+b}
13.在jade中如何解析標(biāo)簽
7.js
const jade=require('jade');
var str=jade.renderFile('./content/7.jade',{pretty:true,contents:"<h1>dfglkfdkbl;gfblgf;lbhgf;lhbk</h1>"});
console.log(str);
7.jade
html
head
body
div!=contents
14.在jade里面做條件判斷
8.js
const jade=require('jade');
var str=jade.renderFile('./content/8.jade',{pretty:true});
console.log(str);
8.jade
html
head
body
-var a=10;
-if(a%2==0)
div 偶數(shù)
-else
div 奇數(shù)
