1.模板引擎：模板引擎编译成html，静态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})；
实例：
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结尾的为模板引擎，在jade里面用Tab键空格，以此来区分层级)
html
heade
body
ul
li
li
li
4.jade中的属性：
style属性在jade里面可用来解析对象；
class属性在jade里面可用来解析数组格式；
注：多个属性间用逗号隔开
注：在jade中通过缩进来区分层级结构
实例：
3.jade
html
head
body
a(href='http://www.baidu.com')
input(type='text',name='uname',value='用户名')
jade2.js
//使用jade解析文本
const jade=require('jade');
var str=jade.renderFile('./content/3.jade',{pretty:true});
console.log(str);
5.如何把jade语法写入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(href='http://www.baidu.com')
input(type='text',name='uname',value='用户名')
div(style="width:1234px;height:50px;")
div(style="{width:1234px;height:50px;}")
p(class=rose nav banner)
p(class=['rose','nav','banner'])
6.如何在jade语法中给元素添加内容：
实例：
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后加.) 内容前加|
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里不允许强制换行
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中做运算
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 #{b}
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中如何循环
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中如何解析标签
7.js
const jade=require('jade');
var str=jade.renderFile('./content/7.jade',{pretty:true,contents:"dfglkfdkbl;gfblgf;lbhgf;lhbk
"});
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 偶数
-else
div 奇数