VUE中使用PUG语法技巧汇总

众所周知，现有的HTML代码在书写和阅读的时候，其实非常不人性化，即便是借助vs-code里的Emmet语法,总会有种输入时非常爽，输完后又变繁琐的感觉。那么能否去掉html中的各种花括号、开头与结尾标签？答案是当然可以，使用pug语法就行。

0.简介

pug原名叫jade，用于编写HTML模板的简洁语言。主要思路借鉴yaml格式的缩进代替各种花括号、冒号等等。

官方网站：http://jade-lang.com/

中文介绍：https://pugjs.org/zh-cn/api/getting-started.html

模板语法非常简洁，建议多看几遍中文介绍，稍微操作一下，我保证，从此再也不会去写原始的HTML代码了。

1.特点

• 用简洁语法生成HTML
• 支持动态JavaScript代码
• 支持重用（DRY）

2.vue案例展示

<template lang="pug">
    div.nav-bg
        ul.nav
            li: a(href='apple.com'): i.fa.fa-apple
            li: a(href='#') Mac
            li: a(href='#') iPad
            li: a(href='#') iPhone
            li: a(href='#') Watch
            li: a(href='#') Tv
            li: a(href='#') Music
            li: a(href='#') Surpport
            li: a(href='apple.com'): i.fa.fa-search
            li: a(href='apple.com'): i.fa.fa-shopping-bag
          
</template>

<style lang="stylus" scoped>

.nav-bg
    background-color #333333
.nav
    height 44px
    display flex
    flex 1
    justify-content space-between
    width 80%
    max-width 1183px
    margin auto     //与宽度并存
    //background-color #333333
    a 
        color #fff
        line-height 2.82em


</style>

这是一段模仿苹果首页header的代码，首行div.nav-bg最终会转换为<div class="nav-bg"><div>.案例中还使用了继承语法，例如li: a(href='apple.com'): i.fa.fa-apple最终会转换为<li><a href="apple.com"><i class="fa fa-apple"><i></a></li>.如果不用pug语法，仅仅是一句代码，在html里格式化后可以长达5行左右。

3.使用总结

用pug写html代码：

• yaml格式缩进：格式简洁、工整
• 去除各种花括号、开头结尾标签，代码一目了然，非常便于理解
• 因格式非常工整，节约代码空间，查找修改方便

下期介绍stylus语法，一种css的预处理语法，也是类似yaml格式的。让传统的css代码里的花括号、冒号、分号可有可无。