Vue进阶课堂之《从HTML到Pug》（vue跳转到html）

前言

Pug听起来或许比较陌生，但是如果说起她的前生，相信各位多少会有耳闻：Jade。 每当你不停的敲打> > > > /> /> /> /> 的时候，可曾想过，这该死的箭头是不是可以拿掉？

这不单单是看着不舒服，有时候还会因为行数过多，而导致你头晕眼花。 或许你知道，有个东西叫emmet，它是解决了你写的时候多写的那些内容，但是并没有解决冗余的代码行数，更不要提在你没有完全熟练使用emmet前，脑子里面需要进行大量的预翻译！ 那么是否有一种既能减少代码量，又能不做预翻译的方案呢，呐呐呐，Jade这个后端模板出现了，然后改名叫Pug了，现在Vue也支持这个语法，具体请往下看。

如何使用

1. npm下载包

npm i -D pug pug-loader

2. lang这里改成pug使用

template lang='pug'>
     

使用Pug、CoffeeScript、Sass，前两者有共有的哲学，CoffeeScript说自己就是JavaScript；

同样的，Pug也就是HTML，你可以理解成语法糖。

功力如何

1. 我们先来看一段HTML代码

常规写法：

label>
     
    input type='checkbox' />
     span>
    记住密码/span>
    
    div class='show-box'>
    /div>
     
/label>
    

pug写法：

label input(type="checkbox") span 记住密码 .show-box

对比分析：

传统：95个字符，5行，3个结束标签整成Pug

pug：54个字符，4行，没有结束标签

2. 差别有了，惊不惊喜？再来！

常规写法：

div class="container">
    
    div class="ver seller">
     input type="number" v-model="storeId" placeholder="输入店号" @focus="passwordShow=false"
            class="storeId" />
    
        div class="nav">
     button @click="clickGo(0)" class="go">
    我是卖家/button>
     button @click="clickRegist"
                class="little">
    注册卖家/button>
     button @click="clickGo(1)" class="go">
    我是买家/button>
     /div>
    
    /div>
    
    div v-if="passwordShow" class="ver password">
     input type="password" v-model="password" placeholder="输入你的6位密码"
            class="storeId" />
     button @click="login" class="go">
    点击登录/button>
     /div>
    span v-if="passwordShow"
        @click="passwordShow=false" class="buyer-show">
    重置/span>
    
/div>
    

pug写法：

.container.ver.seller input.storeId(type = 'number' v - model = 'storeId' placeholder = '输入店号' @focus = 'passwordShow=false') 
.nav button.go(@click = 'clickGo(0)') 我是卖家 button.little(@click = 'clickRegist') 注册卖家 button.go(@click = 'clickGo(1)') 我是买家
.ver.password(v - if = 'passwordShow') input.storeId(type = 'password' v - model = 'password' placeholder = '输入你的6位密码') 
button.go(@click = 'login') 点击登录 span.buyer - show(v-if = 'passwordShow' @click = 'passwordShow=false')

对比分析：

传统：15行，671个字符，9个结束标签

pug：只有11行，481个字符，没有结束标签

3. 简单推算大约代码量节省30%，行数节省20%。如果公司绩效算行数或代码量的千万别用

温馨提示：

1. Vue 使用有没有什么需要注意的地方没有，完全没有，该“：”就冒号，该“@”就shift+2

2. 一些小坑注意使用“|”符号来切割文字，如：span i span.red love | you // 这里没必要再用一个span，使用“|”即可

3. Pug其他功能这里记得Pug是后端模板起家，所以功能肯定不单单是简化语法这么简单，她也有变量、混合、过滤等等等等功能，但是实际上这些功能在使用中跟Vue功能重复，我们搭建项目主要还是Vue，所以能用Vue的就用Vue的，Pug对于我们项目来说，最大的功能就是精简和整理代码。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！