一、转义与非转义
jade模板文件代码：
1 doctype html
2 html
3 head
4 meta(charset=‘utf-8‘)
5 title jade学习-by ghostwu
6 body
7 h3 转义与非转义
8 - var userName = ‘ghostwu‘
9 - var str = ‘<script>alert("ghostwu");</script>‘
10 div #{userName}
11 div #{str}
12 div !{str}
13 div= userName
14 div= str
15 div!= str
16 div \#{userName}
17 div \!{str}
18 div(data-innerHTML=age)
19 div(data-innerHTML=‘#{age}‘)
20 div(data-innerHTML=‘#{userName}‘)
编译之后的效果：
解释：
#{} : 带有转义效果的输出
!{}: 不转义输出
= : 与#{}效果相同
!= : 与!{}效果相同
\#{}：原样输出#{}
属性后面跟#{age}，会把变量解释出来，如果这个变量没有定义，就会输出undefined。在实际情况中，如果没有定义的变量就不要输出，我们可以直接这样做 属性=变量名，他会自动判断该变量是否设置，决定是否输出变量的值或者不要输出属性，如 div(data-innerHTML=userName) userName我们设置了，所以会编译输出<div data-innerHTML="ghostwu"></div>
二、流程控制（循环）
jade文件代码：
1 doctype html
2 html
3 head
4 meta(charset=‘utf-8‘)
5 title jade学习-by ghostwu
6 body
7 h3 流程控制(for...in)
8 - var userInfo = { userName : ‘ghostwu‘, age : 22 };
9 ul 用户信息
10 - for ( var key in userInfo )
11 li= userInfo[key]
12 h3 流程控制(for...each语法糖)
13 ul 用户信息
14 - each val, key in userInfo
15 li #{key}->#{val}
16 h3 for..each遍历数组
17 - var skills = [‘php‘,‘linux‘,‘javascript‘,‘node.js‘];
18 ul 技能
19 - each item in skills
20 li #{item}
21 h3 嵌套for...each循环
22 -
23 var userList = [
24 {
25 user : ‘ghostwu‘,
26 skill : [‘javascript‘,‘node.js‘,‘linux‘]
27 },
28 {
29 user : ‘八戒‘,
30 skill : [‘吹牛b‘, ‘泡妞‘]
31 }
32 ];
33 ul 用户信息
34 - each val, key in userList
35 li #{userList[key][‘user‘]}
36 ul 该用户技能
37 - each v, k in userList[key][‘skill‘]
38 li #{v}
编译之后的结果：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>jade学习-by ghostwu</title> 6 </head> 7 <body> 8 <h3>流程控制(for...in)</h3> 9 <ul>用户信息 10 <li>ghostwu</li> 11 <li>22</li> 12 </ul> 13 <h3>流程控制(for...each语法糖)</h3> 14 <ul>用户信息 15 <li>userName->ghostwu</li> 16 <li>age->22</li> 17 </ul> 18 <h3>for..each遍历数组</h3> 19 <ul>技能 20 <li>php</li> 21 <li>linux</li> 22 <li>javascript</li> 23 <li>node.js</li> 24 </ul> 25 <h3>嵌套for...each循环</h3> 26 <ul>用户信息 27 <li>ghostwu 28 <ul>该用户技能 29 <li>javascript</li> 30 <li>node.js</li> 31 <li>linux</li> 32 </ul> 33 </li> 34 <li>八戒 35 <ul>该用户技能 36 <li>吹牛b</li> 37 <li>泡妞</li> 38 </ul> 39 </li> 40 </ul> 41 </body> 42 </html>
循环的语法跟原生js差不多，each这里的val, key是当前数组的值和键.
三、条件判断语句
编译之后的结果:
if.else很好理解，跟原生js一样
unless: 给定条件是否不符合要求，如果不符合，就执行下一步.
switch...case语句在jade中的写法
1 doctype html
2 html
3 head
4 meta(charset=‘utf-8‘)
5 title jade学习-by ghostwu
6 body
7 h3 条件语句
8 - var skill = ‘linux‘;
9 case skill
10 when php
11 p 你会php
12 when java
13 p 你会java
14 when linux
15 p 你会linux
16 default
17 p #{skill}
编译之后：
时间： 2024-10-14 01:15:31