關於 Pug
Pug 筆記
pug 指令
註解:於跟目錄上建立一個 index.pug 檔案
- 安裝
- npm install pug-cli -g / yarn global add pug-cli
- // npm 或 yarn 安裝 pug
- 基礎編譯
- pug index.pug
- // 開始執行編譯，於當前目錄下生成一個被壓縮過的 index.html 檔案
- 自動編譯
- pug index.pug -w
- // 在編輯 index.pug 的同時，index.html 也會更新到最新的編譯檔案
- 標準版HTML
- pug index.html -P
- // 將編譯後的檔案為標準版的 HTML 檔案
- 路徑設定
- pug index.pug -o a
- // 希望更改當前目錄下輸出編譯後的 HTML 檔案，則需要設定 -o 引數
- // index.html 將輸入到 a 目錄下面，如果 a 目錄不存在，則會新建立 a 目錄
- 快速使用
- pug index.pug -P -w //index 自動編譯為標準版 HTML
Vue cli 使用 pug
安裝 loader
npm install pug-loader pug-filters --save
開始使用 pug
要用 pug 的 template 必須加上 lang="pug"
pug 標籤使用
樹狀 元素與元素之間以縮排表示巢狀關係，內容以空一個空白為撰寫
index.pug
ul
li itme A
li item B
li item C
index.html
<ul>
<li>itme A</li>
<li>itme B</li>
<li>itme C</li>
</ul>
index.pug
ul
li itme A
li item B
li item C
index.html
<ul>
<li>itme A</li>
<li>itme B</li>
<li>itme C</li>
</ul>
內聯 元素內包覆元素以內聯語法
index.pug
a: img
index.html
<a><img/></a>
index.pug
a: img
index.html
<a><img/></a>
DOCTYPE
index.pug
doctype html
index.html
<!DOCTYPE html>
index.pug
doctype html
index.html
<!DOCTYPE html>
內容
pug 提供三種常用的方式來放置內容
管道文字
這是最簡單的模板新增純文字的方法。只需要在每行前面加一個 | 字元
index.pug
|純文字當然也是 HTML 可以撰寫的
p |單它必須單獨在一行|
|純文字當然也是 HTML 可以撰寫的
p |單它必須單獨在一行|
標籤內文字
標籤與文字之間留一個空白，即可將內容放在標籤內
index.pug
p 後面是在 p 標籤內的內容
index.html
<p>後面是在 p 標籤內的內容</p>
標籤與文字之間留一個空白，即可將內容放在標籤內
index.pug
p 後面是在 p 標籤內的內容
index.html
<p>後面是在 p 標籤內的內容</p>
嵌入大段文字
有時可能需要寫一個大段文字塊，比如嵌入指令碼或者樣式。只需要標籤後面接一個 . 即可[不可有留空白]
index.pug
script.
if(useIngPug)
console.log('這不錯')
else
console.log('請用 Pug')
index.html
<script>
if(useIng
</script>
有時可能需要寫一個大段文字塊，比如嵌入指令碼或者樣式。只需要標籤後面接一個 . 即可[不可有留空白]
index.pug
script.
if(useIngPug)
console.log('這不錯')
else
console.log('請用 Pug')
index.html
<script>
if(useIng
</script>
屬性
標籤屬性和 HTML 語言非常相似，它們的值就是普通的 JavaScript 表示。可以用逗號作為屬性分隔符。
a(href="yahool") 雅虎
a(href="yahool") 雅虎
特殊字元
如果屬性名稱中含有某些奇怪的字元，可能會與 JavaScript 語法產生衝突的話，可以將它們使用 "" 或者 '' 括起來。還可以使用逗號來分割不同的屬性
index.pug
div(class='div-class', (click)='play()')
index.html
<div class="div-class" (click)="play()"></div>
如果屬性名稱中含有某些奇怪的字元，可能會與 JavaScript 語法產生衝突的話，可以將它們使用 "" 或者 '' 括起來。還可以使用逗號來分割不同的屬性
index.pug
div(class='div-class', (click)='play()')
index.html
<div class="div-class" (click)="play()"></div>