簡(jiǎn)介

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

1. 屬性

標(biāo)簽屬性和 HTML 語(yǔ)法非常相似，但它們的值就是普通的 JavaScript 表達(dá)式。您可以用逗號(hào)作為屬性分隔符，不過(guò)不加逗號(hào)也是允許的。

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

2. 嵌入

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

3. 混入 Mixin

// 定義 mixin skus(name)tda-image(:src=`${name}.skuImage` :width="48" :height="48")td= `{{${name}.skuName}}`td= `{{${name}.skuNo}}`tddiv= `網(wǎng)銷：{{${name}.priceNetwork}}`div= `零售：{{${name}.priceRetail}}`div= `批發(fā)：{{${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')

總結(jié)

以上是生活随笔為你收集整理的vue 中使用 pug的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。