• 欢迎访问佰阅部落
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

VUE中使用PUG语法技巧汇总

开发工具 佰阅 3年前 (2020-04-18) 2697次浏览 0个评论

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

VUE中使用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代码里的花括号、冒号、分号可有可无。

 


佰阅部落 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:VUE中使用PUG语法技巧汇总
喜欢 (0)

您必须 登录 才能发表评论!