vue 中使用 pug

简介

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')