上一节-node.js学习（12）—nodejs模板引擎jade(1)
1.使用#{}传递变量以及js表达式
目录结构如下：
20190528171452.png
我们在1.js中添加如下代码：
const pug=require('pug');
var str=pug.renderFile('./views/1.pug',{
pretty:true,
name:'test',
a:1,
b:2
})
console.log(str)
在1.pug中添加如下代码：
div #{name}
div #{a+b}
执行jade.js，输出str结果为
<div>test</div>
<div>3</div>
由上面的例子，我们可以看出jade使用#{}来传递变量或者表达式
2.属性传递变量
//1.js
const pug=require('pug');
var str=pug.renderFile('./views/1.pug',{
pretty:true,
face:{width:'100px',height:'100px'},
name:['test1','test2'],
title:'aa'
})
console.log(str)
//1.pug
div(class=name)
div(class=name class="active active1")
div(style=face)
div(title=title)
执行1.js，输出结果为
<div class="test1 test2"></div>
<div class="test1 test2 active active1"></div>
<div style="width:100px;height:100px;"></div>
<div title="aa"></div>
- 属性传递变量直接
等于变量即可，不能写成#{}形式，会报错。 - class属性比较特殊，可以写多个class，jade会自动合并，其他属性不能重复
4. - 执行符
上面我们的数据是从js中传递过来的，假如我不想传递过来，想直接写在页面可以吗？当然可以！
//1.js
const pug=require('pug');
var str=pug.renderFile('./views/1.pug',{
pretty:true,
})
console.log(str)
//1.jade
html
body
-var a=1;
-var b=2;
-var arr=['test1','test2'];
div #{a+b}
div(class=arr)
执行1.js，输出结果为
<html>
<body>
<div>3</div>
<div class="test1 test2"></div>
</body>
</html>
- 在jade中，如果使用
-+js代码，代码会被按js来编译，不会像html一样被输出
5. = 执行符
上面我们将传递变量是类似div #{name}这样的写法的，当然也可以使用另一种简单写法。
//1.js
const pug=require('pug');
var str=pug.renderFile('./views/1.pug',{
pretty:true,
})
console.log(str)
//1.jade
html
body
-var a=1;
-var b=2;
div=a
div=a+b
=a
执行1.js，输出结果为
<html>
<body>
<div>1</div>
<div>3</div>
1
</body>
</html>
- jade可以直接使用
=传递变量
6.for循环
//1.js
const pug=require('pug');
var str=pug.renderFile('./views/1.pug',{
pretty:true,
arr:['test1','test2','test3']
})
console.log(str)
//1.jade
html
body
- for(var i=0;i<arr.length;i++)
div=arr[i]
执行1.js，输出结果为
<html>
<body>
<div>test1</div>
<div>test2</div>
<div>test3</div>
</body>
</html>
7.使用 ! 渲染dom节点
有时候后台传过来的是个html字符串，那么我们怎么渲染成dom节点呢？
//1.js
const pug=require('pug');
var str=pug.renderFile('./views/1.pug',{
pretty:true,
str:'<p>11</p><p>22</p>'
})
console.log(str)
//1.jade
html
body
div=str
执行1.js，输出结果为
<html>
<body>
<div><p>11</p><p>22</p></div>
</body>
</html>
我们运行代码，发现html中的<>被转义了，那么怎么才能不让转义呢？我们修改1.jade为下面代码
//1.jade
html
body
div!=str
再次执行1.js，输出结果为
<html>
<body>
<div><p>11</p><p>22</p></div>
</body>
</html>
- 上面，我们使用
!来声明不转义dom节点，使用=str渲染变量（这里可和我们js中的不等于不一样）
8.if判断渲染不同dom节点
//1.js
const pug=require('pug');
var str=pug.renderFile('./views/1.pug',{
pretty:true,
str:'<p>11</p><p>22</p>'
})
console.log(str)
//1.jade
-var a=2
if(a%2==0)
div 偶数
else
div 奇数
执行1.js，输出结果为
<div>偶数</div>
9.switch
jade中switch条件语句和js的语法有点不同，其用case...when...
//1.js
const pug=require('pug');
var str=pug.renderFile('./views/1.pug',{
pretty:true,
})
console.log(str)
//1.jade
-var a=2
case a
when 0
div 0
when 2
div 2
default
div 1
执行1.js，输出结果为
<div>2</div>
10.转换html
//1.js
const pug=require('pug');
const fs=require('fs')
var str=pug.renderFile('./views/index.pug',{
pretty:true
})
fs.writeFile('./build/index.html',str,function(err){
if(err){
console.log('编译失败',err);
}else{
console.log('编译成功');
}
})
//1.jade
doctype
html
head
meta(charset='utf-8')
body
div test
在和1.js同级目录建好build文件夹用于放置打包的文件。
执行1.js，会发现build文件夹生成了index.html，index.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>test</div>
</body>
</html>
到这里，jade的基本语法已经讲解差不多了，实际工作过程中可能还需要了解jade的其他功能，具体可以参考jade官网
网友评论