Nodejs中的模板引擎之jade2
上节中我们讲了一些jade的基本用法，这一节，我们继续补充jade的一些用法。
jade可以自动识别单双标签，看如下jade代码
div
input
js代码
const jade=require('jade');
var str=jade.renderFile('./views/1.jade',{pretty:true});
console.log(str);
然后我们执行以上js代码，我们会发现input自动被解析成了单标签
1.png
如果我们的代码不符合规范，jade在解析的时候也会自动报错，假如我们有如下jade代码
input
div
我们再次执行上面的js，我们发现会报错
2.png
在jade中，所有自定义的标签都默认为双标记
假如我们有如下jade代码,我们添加了自定义标签aaa
div
input
aaaa
然后我们再次执行上面的js代码
1.png
我们发现aaaaa会自动被解析成双标签
通过上一个案例我们知道如果我们在div下面再添加一个aaa,那么会被自动解析为一个双标记，但是如果我们只想把aaa作为div中的内容，而不是标签，这时我们需要做以下操作
html
head
body
|aaa
|bbb
|ccc
我们想要让什么成为内容，即在当前内容前面添加“|”即可
“|” 在jade中代表原样输出
这时我们发现aaa bbb ccc已经成为body中的内容，而不是标签
2.png
但是这样比较麻烦，如果我们的内容比较多，那么我们要添加很多“|”，所以还有比如上方法更简单的
看如下代码：
html
head
script.
window.onload=function (){
var oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
alert('aaaa');
};
};
body
|abc
|ddd
|213
script中的内容我们想要原样输出。这时我们只需要在script后面加个点就可以了
这时我们会发现输出了我们想要的
3.png
但是上面的方法还是有点麻烦，因为日如果我们的js代码比较多，我们不可能把所有的js代码都放在头部，这时就需要引入一个外部的js了。
我们新建一个1.js,把上面的js代码放进去，
jade代码
html
head
script
include a.js
body
|abc
|ddd
|213
然后我们再次执行一下如下代码
const jade=require('jade');
var str=jade.renderFile('./views/13.jade',{pretty:true});
console.log(str);
然后我们会发现输出的js代码同样在scripet中
3.png
如何在Jade中解析变量
有如下jade代码：
html
head
body
div 我的名字叫：#{name}
现在我们要把name解析出来，所以我们需要创建一个js，代码如下
const jade=require('jade');
console.log(jade.renderFile('./views/jade13-2.js',{pretty:true,name:'amy'}));
1.png
jade中不仅可以输出变量，还可以做运算
假如我们有如下jade代码：
html
head
body
div 我的年龄是:#{a+b}
js代码如下:
const jade=require('jade');
console.log(jade.renderFile('./views/133.jade',{pretty:true,a:3,b:5}));
执行以上js代码我们会发现jade给我们自动做运算了
2.png
接下来我们要给一个元素添加样式或class
有如下js代码
const jade=require('jade');
console.log(jade.renderFile('./views/134.jade',{pretty:true,
json:{width:'100px',height:'100px',background:'red'},
arr:['box','content']
}))
现在我们要把json中的样式添加给div,把arr中的值天加给元素作为class
jade代码如下
html
head
body
div(style=json)
div(class=arr)
div(class=arr class='active')
代码执行完的结果如下：
3.png
我们发现json中的样式与arr中的class自动添加到了div中
在jade语法中想要解析并执行一段js代码该怎么做,接下来有如下 jade代码
html
head
body
var a=13;
var b=12;
div：结果是：#{a+b}
jade中解析变量的两种方法:
有如下js代码:
const jade=require('jade');
console.log(jade.renderFile('./views/135.jade',{pretty:true,a:3,b:5}));
1.png
我们是想把var a=13;var b=12;当成一段js代码来解析，但是我们发现程序给我们解析成了标签。所以我们需要对jade代码做以下操作，代码如下：
html
head
body
-var a=13;
-var b=12;
div：结果是：#{a+b}
2.png
这才是我们所要的结果
我们现在要把a 和b解析到标签中去
jade代码如下
html
head
body
span #{a}
span #{b}
div=a
div=b
执行上述代码，输出的结果如下
1.png
我们发现使用span #{a}和使用span=a这种方式解析出来的结果一样，而且第二种方式还更简单
jade中的循环
有如下js代码
const jade=require('jade');
console.log(jade.renderFile('./views/137.jade',{pretty:true,
arr:['a','b','c','d','e','f','g']
}));
现在我们要把arr中的值分别输出在7个div中，在jade代码中该如何实现呢，看如下代码：
html
head
body
-for(var i=0;i<arr.length;i++)
div=arr[i]
上述代码执行完的结果如下图所示
3.png
在jade中如何解析标签
有如下js代码：
const jade=require('jade');
console.log(jade.renderFile('./views/138.jade',{pretty:true,
content:'<h1>标题</h1><p>这是一段内容这是一段内容这是一段内容</p>'
}));
jade代码如下
html
head
body
div!=content
使用
div!=content那解析出来的标签是标签，内容是内容
结果如下图所示
在jade中使用if条件判断
有如下jade代码：
html
head
body
-var a=19;
if(a%2==0)
div(style={background:'red'}) 偶数
else
div(style={background:'green'}) 奇数
执行完如下代码输出的结果如下
2.png
在jade中使用switch.....case语句
jade中的switch和原生js中的switch语句不一样，jade中的switch.....case语法
case a
when 0
div aaa
when 1
div bbb
when 2
div ccc
default
|不靠谱
有如下 jade代码
html
head
body
-var a=1;
case a
when 0
div aaa
when 1
div bbb
when 2
div ccc
default
|不靠谱
