一、認識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=)