pug渲染模板语法
pug标签属性和html类似,因此说明pug语法的时候会和html进行对比
1属性
用法标签名(属性名=属性值)
多行属性之间可以用逗号和空格隔开
a(herf='baidu.com')
div(style={color:#ffffff})
等效与
<a href="baidu.com"></a>
<div style="color:#ffffff">
2插入代码
使用‘-’开始一段不直接输出的代码
- for(var x=0;x<3;x++)
li item
等效于
<li>item</li>
<li>item</li>
<li>item</li>
3条件分支
case和switch
- var friends=0
case friend
when 0
p 没有朋友
等效于
<p>你没有朋友</p>
3文档头申明
doctype html
等效与
<!DOCTYPE html>
4文档内容包含
使用include 将外部pug文档内容引入
比如index.pug文件内容如下
注意pug中每个标签左对齐表示在同一等级,前面多出一个空格就会被上一个标签自动渲染为内部标签
doctype html
html
include includes/head.pug
body
h1 第一个网站
head.pug内容
head
script(src='./image')
最终渲染成为html
<!DOCTYPE html>
<html>
<head>
<script src='./image'></script>
</head>
<body>
<h1>第一个网站</h1>
</body>
</html>
迭代
ul
each val in [1,2,3,4,5]
li=val
等效与
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
参考资料
pug中文文档