簡介

Pug 模板引擎中文文檔
pug 大大簡化了 html 的格式，并且在pug模板里面可以使用js代碼
一下我只列出來了我使用的一些屬性，具體的語法還是去官方看

1. 屬性

標簽屬性和 HTML 語法非常相似，但它們的值就是普通的 JavaScript 表達式。您可以用逗號作為屬性分隔符，不過不加逗號也是允許的。

a(href='baidu.com') 百度// 單行屬性 - var authenticated = true body(class=authenticated ? 'authed' : 'anon')// 多行屬性 input(type='checkbox'name='agreement'checked ) // 用引號括起來的屬性 div(class='div-class' '(click)'='play()')// 模板字符串 button(type='button' class=`btn btn-${btnType} btn-${btnSize}`)// 不轉義的屬性 div(escaped="<code>") div(unescaped!="<code>")

2. 嵌入

- var title = "On Dogs: Man's Best Friend"; - var author = "enlore"; - var theGreat = "<span>轉義!</span>";h1= title p #{author} 筆下源于真情的創作。 p 這是安全的：#{theGreat}// 轉義 如果您需要表示一個 #{ 文本，您可以轉義它，也可以用嵌入功能來生成（可以，這很元編程） p Escaping works with \#{interpolation}// 字符串嵌入，不轉義 - var riskyBusiness = "<em>我希望通過外籍教師 Peter 找一位英語筆友。</em>"; .quotep 李華：!{riskyBusiness}// 空格處理 p| 如果我不用嵌入功能來書寫，一些標簽比如strong strong| 和em em| 可能會產生意外的結果。 p.如果用了嵌入，在 #[strong strong] 和 #[em em] 旁的空格就會讓我舒服多了。

3. 混入 Mixin

// 定義 mixin skus(name)tda-image(:src=`${name}.skuImage` :width="48" :height="48")td= `{{${name}.skuName}}`td= `{{${name}.skuNo}}`tddiv= `網銷：{{${name}.priceNetwork}}`div= `零售：{{${name}.priceRetail}}`div= `批發：{{${name}.priceTrade}}`div= `吊牌：{{${name}.priceHangTag}}`div= `成本：{{${name}.priceCost}}`tddiv= `{{ ${name}.weightRough }}`div= `{{ ${name}.weightNet }}`td 0td.flex_center.mb-1(v-for=`it3 in ${name}.combinesSkus`)a-image(:src="it3.skuImage" :width="32" :height="32").ml-1 {{it3.skuName}}td= `{{${name}.createTime}}`td= `{{${name}.sourceName}}`td #[a.blue 打包] #[.line] #[a.blue 拆包] #[.line] #[a.blue 日志]tabletr(v-for="it2 in skus") // 使用+skus('it2')

總結

以上是生活随笔為你收集整理的vue 中使用 pug的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。