Pug
簡(jiǎn)介
Pug，原名 Jade， 是一個(gè)很流行的 HTML 模板引擎，后來(lái)由于 Jade 被注冊(cè)為商標(biāo)的原因，改名為 Pug，中文官網(wǎng)在這里。
安裝和使用
npm install pug -g如果需要使用命令行對(duì) pug 模板進(jìn)行編譯，還需要安裝 pug-cli
npm install pug-cli -gPug 和原來(lái)用過(guò)的 Smarty 模板、Ractive 模板類(lèi)似，都是通過(guò)一個(gè)函數(shù)（Pug中是 pug.compile()）將模板便以為 JavaScript 函數(shù)，函數(shù)中通過(guò){}傳入變量。最終編譯結(jié)果就是 HTML 代碼。
創(chuàng)建一個(gè) hello.pug
divp Hello Pug在命令行輸入：
pug hello.pug -w就會(huì)編譯出 hello.html
<div><p>Hello Pug</p> <div>其中 -w 選項(xiàng)為監(jiān)聽(tīng)模式，自動(dòng)相應(yīng)模板的改動(dòng)并且實(shí)時(shí)編譯
使用 pug --help 查看命令行幫助
看一些基本的用法：
# 編譯 templates 文件夾下所有模板 $ pug templates# 編譯 foo 文件夾下和 bar 文件夾下的模板至 tmp 文件夾（絕對(duì)路徑） $ pug foo bar --out /tmp# 編譯 foo.pug 并美化 html 代碼 $ pug foo.pug -P在 webtorm 中配置 pug 的 watcher
關(guān)鍵點(diǎn)就是找到 pug.cmd 文件的全局位置：
C:\Users\xxxxx\AppData\Roaming\npm\pug.cmd
其中 xxxx 是用戶(hù)名
這樣在 pug 模板的同級(jí)目錄下， websotrm就會(huì)自動(dòng)編譯一份 HTML
這樣的缺點(diǎn)是代碼的格式還需要手動(dòng)調(diào)整，并且 pug 文件改變，HTML 格式又自動(dòng)變回去了
在 Arguments 增加 -P 參數(shù)也同樣可以美化代碼
在線轉(zhuǎn)換
html2jade 這個(gè)網(wǎng)站可以在線將 HTML 代碼轉(zhuǎn)換為 jade 代碼
語(yǔ)法
基礎(chǔ)
pug 模板中省略了 HTML 中的標(biāo)簽<>，并且使用縮進(jìn)代表包含關(guān)系，標(biāo)簽后空格內(nèi)容表示標(biāo)簽中內(nèi)容
doctype html headmeta(charset='utf-8')title Hello Pug bodydivp Hello Pug編譯結(jié)果
<!DOCTYPE html> <head><meta charset="utf-8"><title>Hello Pug</title> </head> <body><div><p>Hello Pug</p></div> </body>標(biāo)簽
Pug知道那個(gè)元素自閉合的，當(dāng)然如果想要手動(dòng)添加，可以直接在標(biāo)簽后緊接一個(gè) / 來(lái)聲明此標(biāo)簽是自閉合的
labelinput(type="text")/: 是一種省略寫(xiě)法，目的僅僅是節(jié)省空間
label: input(type="text")/屬性
HTML 標(biāo)簽中的屬性用 () 包圍起來(lái)，屬性之間用 , 隔開(kāi)，屬性值用 ‘’包裹
a(href='//www.baidu.com', title='百度一下') 百度一下編譯后：
<a href="//www.baidu.com" title="百度一下">百度一下</a>文本
上面提到了，利用空格分割表示文本，多行文本需要在標(biāo)簽后加 ., 文本內(nèi)容保持同樣縮進(jìn)
如果文本中還包含標(biāo)簽，則需要直接添加標(biāo)簽
p.line1line2line3 <strong>strong</strong>編譯后
<p>line1line2line3 <strong>strong</strong> </p>這種情況一般適用于大段文字的例子，比如 <script> 中的內(nèi)容：
script.(function test() {alert(123)})()編譯后
<script>(function test() {alert(123)})() </script>也可以使用 | 來(lái)書(shū)寫(xiě)，效果相同
p| line1| line2| line3 <strong>strong</strong>如果一行的開(kāi)頭是尖括號(hào) <，那么正行都會(huì)當(dāng)做純文本，即便當(dāng)中的內(nèi)容包含 HTML 標(biāo)簽，也會(huì)原樣輸出：
<span>123</span>注釋
單行注釋：
// 這個(gè)注釋會(huì)被編譯到HTML //- 這個(gè)注釋不會(huì)被編譯到HTML塊注釋
//塊注釋塊注釋IE注釋
<!--[if IE 8]><html class='ie8'><[endif]--> <!--[if IE 9]><html class='ie9'><[endif]--> <!--[if IE]><html class='ie8'><[endif]-->變量
利用 - 開(kāi)始一段不直接進(jìn)行輸入的代碼
- for (var i = 0; i<3; i++) p #{i}利用 = 開(kāi)始一段帶有輸出的代碼（注意 = 前后不能有空格）
- for (var i = 0; i<3; i++)p=i編譯后
<p>1</p> <p>2</p> <p>3</p>聲明變量使用 -var varName = varValue, 使用變量 #{varName}
- var text='Pug' p Hello #{text}編譯后
<p>Hello Pug</p>默認(rèn)情況下，所有屬性都經(jīng)轉(zhuǎn)義，目的是為了防止跨站腳本攻擊等攻擊方式
- var unescaped = '<strong>Hello</strong>' p #{unescaped}編譯后
<p><strong>Hello</strong></p>如果需要使用特殊字符，即未經(jīng)過(guò)轉(zhuǎn)義的字符， 在引用變量時(shí)使用 !{} 代替 #{}（在定義屬性時(shí)用 != 代替 =）
- var unescaped = '<strong>Hello</strong>' p !{unescaped}編譯后
<p><strong>Hello</strong></p>未經(jīng)定義的變量輸出結(jié)果是空值，而非 undefined
類(lèi)
class 可以是一個(gè)字符串，也可以是一個(gè)包含多個(gè)類(lèi)名的數(shù)組
p(class=['class1', 'class2']) class編譯后
<p class="class1 class2">class</p>也可以是一個(gè)對(duì)象
p(class={class3: false, class4: true}) class編譯后
<p class="class4">class</p>類(lèi)和ID的字面量
類(lèi)可以使用 .classname 語(yǔ)法來(lái)定義， ID 使用 #idname 來(lái)定義，在省略標(biāo)簽名是默認(rèn)是 div
// p.class5 class p#id1 id .class6 class編譯后
<p class="class5">class</p> <p id="id1">id</p> <div class="class6">class</div>&attributes
&attributes 語(yǔ)法可以將一個(gè)對(duì)象轉(zhuǎn)化為一個(gè)元素的屬性列表。
p#id2(class='class7')&attributes({'data-url': '//www.baidu.com'})編譯后
<p class="class7" id="id2" data-url="//www.baidu.com"></p>流程控制
條件控制
可以省略語(yǔ)句開(kāi)頭的 -, 類(lèi)似常規(guī)的 JavaScript 語(yǔ)法形式
- var number = function() {return 15};if(number() < 0)p number < 0 else if(number() > 5)p number > 5 elsep number between (0,5)unless varA 等同于 if(!varA)
就按照字面意思理解，如果不，這樣便于記憶
循環(huán)
使用 each 實(shí)現(xiàn)循環(huán)是最常見(jiàn)的方式，第二個(gè)參數(shù)就是循環(huán)時(shí)的索引值
uleach val in [1,2,3,4,5]li #{val + 'index' + index} // 等同于 li=val + 'index' + index編譯后
<ul><li>1index0</li><li>2index1</li><li>3index2</li><li>4index3</li><li>5index4</li> </ul>也可以對(duì)對(duì)象進(jìn)行循環(huán)
- var object = {name: 'chow', age:22};uleach value, key in objectli=key + ':' + value編譯后
<ul><li>name:chow</li><li>age:22</li> </ul>用于迭代的對(duì)象或數(shù)組僅僅是個(gè) JavaScript 表達(dá)式，因此它可以是變量、函數(shù)調(diào)用的結(jié)果
each value, key in friends > 110 ? object : ''可以為 each 添加一個(gè) else 塊，用于當(dāng)被循環(huán)對(duì)象無(wú)法提供被循環(huán)內(nèi)容時(shí)調(diào)用
- var friends = 100 uleach value, key in friends > 110 ? object : ''li=key + ':' + valueelseli nothing也可以使用 while 來(lái)創(chuàng)建循環(huán)
- var n = 0; ulwhile n < 4li= n++分支條件
case 是 JavaScript 中 switch 中的縮寫(xiě)
- var friends = 1case friendswhen 1p you only have 1 friendwhen 2p you have 2 friendsdefaultp you have a lot of friends可以使用塊展開(kāi)的語(yǔ)法：
- var friends = 11case friendswhen 1: p you only have 1 friendwhen 2: p you have 2 friendsdefault: p you have a lot of friends包含
相當(dāng)于 JavaScript 中的 import 功能
// - index.pug doctype html htmlinclude includes/head.pugbodyh1 我的網(wǎng)站p 歡迎來(lái)到我這簡(jiǎn)陋得不能再簡(jiǎn)陋的網(wǎng)站。include includes/foot.pug// - includes/head.pug headtitle 我的網(wǎng)站編譯后：
<!DOCTYPE html> <html><head><title>我的網(wǎng)站</title><script src="/javascripts/jquery.js"></script><script src="/javascripts/app.js"></script> </head><body><h1>我的網(wǎng)站</h1><p>歡迎來(lái)到我這簡(jiǎn)陋得不能再簡(jiǎn)陋的網(wǎng)站。</p><footer id="footer"><p>Copyright (c) foobar</p></footer> </body></html>被包含的如果不是 Pug 文件，那么就只會(huì)當(dāng)作文本內(nèi)容來(lái)引入。
scriptinclude say.js// say.js alert('hello');編譯后：
<script>alert('hello'); </script>模板繼承
Pug 支持使用 block 和 extends 實(shí)現(xiàn)繼承，一個(gè)稱(chēng)之為“塊”（block）的代碼塊，可以被子模板覆蓋、替換。這個(gè)過(guò)程是遞歸的。
簡(jiǎn)單來(lái)說(shuō)就是，b.pug 通過(guò) extends a.pug 關(guān)鍵詞來(lái)繼承 a.pug 中的全部代碼，再通過(guò)聲明與 a.pug 中相同的 block 來(lái)替代原來(lái)模板中的內(nèi)容
Pug 允許您去替換（默認(rèn)的行為）、prepend（向頭部添加內(nèi)容），或者 append（向尾部添加內(nèi)容）一個(gè)塊。
Pug 模板繼承是一個(gè)非常強(qiáng)大的功能，您可以借助它將復(fù)雜的頁(yè)面模板拆分成若干個(gè)小而簡(jiǎn)潔的文件。然而，如果您將大量的模板繼承、鏈接在一起，那么有可能會(huì)反而把事情弄得更加復(fù)雜。
Mixin
Mixin 實(shí)現(xiàn)了代碼的復(fù)用
mixin myMixinli This should be repeated編譯后：
uleach n in [1,2,3]+myMixin<ul><li>This should be repeated</li><li>This should be repeated</li><li>This should be repeated</li> </ul>可以向 myMixin中傳入?yún)?shù)
mixin myMixin(text)li This should be #{text}編譯后：
uleach n in [1,2,3]+myMixin(n)<ul><li>This should be 1</li><li>This should be 2</li><li>This should be 3</li> </ul>其實(shí)可以將 Mixin 理解為一個(gè)函數(shù)，返回值是一段 HTML 代碼，每次調(diào)用都會(huì)返回相同值
function myMixin(text){return `<li>This should be ${text}</li>` }也可以通過(guò) block 關(guān)鍵字將外部?jī)?nèi)容傳入到 Mixin 中
mixin article(name)if blockblockelsep 默認(rèn)內(nèi)容 +article p ------------------ +articlep 隨便寫(xiě)點(diǎn)什么編譯后：
<p>默認(rèn)內(nèi)容</p> <p>------------------</p> <p>隨便寫(xiě)點(diǎn)什么</p>可以向 Mixin 中引入 rest 參數(shù)
mixin rest(name, ...others)each other in othersp='剩余參數(shù)是' + other +rest('old_chow', 1,2,3,4,5) <p>剩余參數(shù)是1</p> <p>剩余參數(shù)是2</p> <p>剩余參數(shù)是3</p> <p>剩余參數(shù)是4</p> <p>剩余參數(shù)是5</p>當(dāng)然是 arguments 對(duì)象在 Mixin 中也是可以使用的
arguments 是傳入函數(shù)的所有參數(shù)，rest是對(duì)應(yīng)位置的參數(shù)
Vue 中使用 Pug
在 Vue 的單文件組件中的 <template> 中可以使用 Pug 進(jìn)行模板的編寫(xiě)（JADE步驟相同）
首先安裝 Pug 依賴(lài)
npm install pug pug-loader pug-filters -D安裝成功后，在 webpack 的配置文件 webpack.base.conf.js 的 modules 中的 rules 節(jié)點(diǎn)下添加如下配置：
{test: /\.pug$/,loader: 'pug' }這樣，.vue 單文件組件 就支持 Pug 并實(shí)時(shí)編譯了。
<template lang="pug">ul- var arr = [1,2,3]each value in arrli(id="test" + value) value + {{this.name}} </template> <script>exportdefault {data() {return {name: 'chow'}},computed: {},methods: {},components: {}} </script>參考
- https://segmentfault.com/a/1190000006198621
- https://pug.bootcss.com/api/getting-started.html
- http://blog.csdn.net/piglet1963/article/details/72723545
- https://www.cnblogs.com/gudi/p/8080736.html
總結(jié)
- 上一篇： js pug 代码_前端开发nodejs
- 下一篇： 网络工程师还吃香吗？