简介
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>";
.quote
p 李华:!{riskyBusiness}
// 空格处理
p
| 如果我不用嵌入功能来书写,一些标签比如
strong strong
| 和
em em
| 可能会产生意外的结果。
p.
如果用了嵌入,在 #[strong strong] 和 #[em em] 旁的空格就会让我舒服多了。
3. 混入 Mixin
// 定义
mixin skus(name)
td
a-image(:src=`${name}.skuImage` :width="48" :height="48")
td= `{{${name}.skuName}}`
td= `{{${name}.skuNo}}`
td
div= `网销:{{${name}.priceNetwork}}`
div= `零售:{{${name}.priceRetail}}`
div= `批发:{{${name}.priceTrade}}`
div= `吊牌:{{${name}.priceHangTag}}`
div= `成本:{{${name}.priceCost}}`
td
div= `{{ ${name}.weightRough }}`
div= `{{ ${name}.weightNet }}`
td 0
td
.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 日志]
table
tr(v-for="it2 in skus")
// 使用
+skus('it2')