一、认识pug
pug 是一个高性能的模板引擎，它是用 JavaScript 实现的，并且可以供 Node 使用。通过一套语法把某一段静态的模板，通过模板引擎将动态的数据替换进去，然后将生成的html交给浏览器去解析和渲染。pug是jade的升级版。
二、pug的特点
1）超强的可读性
2）客户端支持
3）灵活易用的缩进
4）安全，默认代码是转义的
5）命令行下编译jade模板
6）模板继承
7）块扩展
8）编译及运行时的上下文错误报告
9）HTML5模式
10）可选的内存缓存
11）联合动态的静态标记类
12）利用过滤器解析树的处理
13）没有前缀的标签
14）原生支持 express 模块
三、pug的安装
1、全局安装。
npm i pug -g
npm i pug-cli -g
2、在项目中使用pug，需要局部安装pug。
首先，创建一个package.json文件。
npm init -y
再安装pug，并写入到package.json文件中。
npm i pug --save-dev
四、编译
编译语法：pug pug文件名 -o 目标路径 -P -w
Tips:
-P：编译成非压缩格式
-w：实时监听
五、pug基本语法
1、文档声明
doctype html
2、标签语法
每层级标签之间都采用多一个缩进表示嵌套关系，无需闭合标签，无需尖括号。
3、属性
4、文本
5、注释
6、安全转义与安全非转义
doctype html
html
head
title pug语法
body
p.body.p1.hello 这是段落
ul
li 选项一
li 选项二
div.box box1
div(class='box2') box2
-var cls=true
div(class=cls?'box3':'box4') box3
.box4 box4
input(
type='text'
class="username"
name="username"
id="username"
)
input(type='checkbox',checked)
p(style="color:red;font-size:18px")
h2(style="color:yellow;font-size:20px")
div.foo
.foo.bar
div(class="foo bar")
-var classes=['box1','box2','box3']
div(class=classes)
div.bing(class=classes)
div#box
div(id='box')
.oh
#no
#foo.oh.no
h1 这是一个h1标签
.box hello pug
-var obj={name:'tom'}
p #{obj.name} is a man
-var url='http://www.baidu.com'
a(href=url) 百度一下
p
| hello pug
| hello node
| hello worlds
p.
hello <b>pug</b>
hello node
hello worlds
//注释1
//-注释2
六、条件语句
1、if...else
2、if...else if...else
3、unless
4、case
doctype html
html
head
meta(charset='utf-8')
title 条件语句
body
//if...else
-var flag =true
if flag
p=flag
else
p=flag
//if...else if.else
-var num=1
if num >1
p 10
else if num==1
p 2
else
p=num
//unless：相当于取反
-var num =3
//表示num不等于10
unless num==10
p this num is #{num}
//case
-var friends =5
case friends
when 0
p nobody
when 1
p one
default
p #{friends}
七、循环语句
for
for...in
while
each
doctype html
html
head
meta(charset='utf-8')
title 循环语句
body
//for迭代数组
-var arr=[1,2,3,4]
ul
-for(var i=0;i<arr.length;i++)
li=i+':'+arr[i]
//for..in迭代对象
-var obj={id:'001',name:'tom'}
ul
-for(var key in obj)
li=key+':'+obj[key]
//each 迭代数组
-var arr=[1,2,3,4]
ul
each val in arr
li=val
-var arr=[1,2,3,4]
ul
each val,idx in arr
li=idx+':'+val
//each 迭代对象
-var obj={id:'001',name:'tom'}
ul
each val in obj
li=val
-var obj={id:'001',name:'tom'}
ul
each val in obj
li=key+':'+val
//while
-var num=1
ul
while num<=10
li=num++
八、mixin混合
mixin类似一个函数，可传参也可不传。
定义mixin语法：
mixin mixin名([形参列表])
代码块
调用mixin语法：
+mixin名(实参列表)
doctype html
html
head
meta(charset='utf-8')
title 循环语句
body
//基本用法
mixin study
p test
+study
//传参
mixin study(name,courses)
p=name
ul.course.box
each course in courses
li=course
+study('zs',['web','pug'])
//代码块
mixin show(time)
h3=time
//判断是否存在block
if block
block
else
p no show
+show('2021-11-11')
//传递属性
mixin attrs(name)
p&attributes(attributes) #{name}
+attrs('attrs')(class='p',id='p')
//列表传递
mixin show(name,...shows)
p=name
ul
each show in shows
li=show
+show('binge','sing','dance','sleep')
九、模板继承
用extends继承父模板，哪个文件继承，就调用哪个文件的block为content的模块。
//-extends继承语法，common为继承的文件
extends common
block content
mixin fn(name,...shows)
p=name
ul
each show in shows
li=show
+fn('binge','sing','dance','sleep')
common.pug
doctype html
html
head
title pug模板继承
body
h1 这是pug父模板的内容
//哪个文件继承，就调用哪个文件的block为content的模块
block content
十、包含(include)
允许在文件中插入另一个文件内容。
extends public
block content
//-block index自身模板
mixin show(name,...shows)
p=name
ul
each show in shows
li=show
+show('binge','sing','dance','sleep')
header.pug
meta(charset='utf-8')
title pug模板包含
link(rel="stylesheet",href="css/style.css" target="_blank" rel="external nofollow" )
public.pug
doctype html
html
head
//-引入header.pug
include header
body
h1 pug模板
block content
![JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明 三、函数的调用[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)