众所周知,现有的HTML代码在书写和阅读的时候,其实非常不人性化,即便是借助vs-code里的Emmet
语法,总会有种输入时非常爽,输完后又变繁琐的感觉。那么能否去掉html中的各种花括号、开头与结尾标签?答案是当然可以,使用pug
语法就行。
0.简介
pug
原名叫jade
,用于编写HTML模板的简洁语言。主要思路借鉴yaml
格式的缩进代替各种花括号、冒号等等。
中文介绍: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代码里的花括号、冒号、分号可有可无。