Vue进阶课堂之《从HTML到Pug》
是啥
Pug听起来或许比较陌生,但是如果说起她的前生,相信各位多少会有耳闻:Jade。
每当你不停的敲打<><><><></></></></>
的时候,可曾想过,这该死的箭头是不是可以拿掉?这不单单是看着不舒服,有时候还会因为行数过多,而导致你头晕眼花。
或许你知道,有个东西叫emmet,它是解决了你写的时候多写的那些内容,但是并没有解决冗余的代码行数,更不要提在你没有完全熟练使用emmet前,脑子里面需要进行大量的预翻译!
那么是否有一种既能减少代码量,又能不做预翻译的方案呢,呐呐呐,Jade这个后端模板出现了,然后改名叫Pug了,现在Vue也支持这个语法,具体请往下看。
如何使用
npm i -D pug pug-loader
<template lang='pug'>
即可
本人喜欢使用Pug、CoffeeScript、Sass,前两者有共有的哲学,CoffeeScript说自己就是JavaScript,同样的,Pug也就是HTML,你可以理解成语法糖。
功力如何
我们先来看一段HTML代码
<label>
<input type='checkbox' />
<span>记住密码</span>
<div class='show-box'></div>
</label>95个字符,5行,3个结束标签
整成Pug
label
input(type="checkbox")
span 记住密码
.show-box54个字符,4行,没有结束标签
差别有了,惊不惊喜?再来!
<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>15行,671个字符,9个结束标签
.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') 重置11行,481个字符,没有结束标签(这里我个人书写习惯是回车切割,为了统一对比采用这种写法)
简单推算
大约代码量节省30%,行数节省20%。如果公司绩效算行数或代码量的千万别用- -
tips
Vue 使用有没有什么需要注意的地方
没有,完全没有,该“:”就冒号,该“@”就shift+2
一些小坑
注意使用“|”符号来切割文字,如:
span
i
span.red love
| you // 这里没必要再用一个span,使用“|”即可Pug其他功能
这里记得Pug是后端模板起家,所以功能肯定不单单是简化语法这么简单,她也有变量、混合、过滤等等等等功能,但是实际上这些功能在使用中跟Vue功能重复,我们搭建项目主要还是Vue,所以能用Vue的就用Vue的,Pug对于我们项目来说,最大的功能就是精简和整理代码。
后续还会有Sass与CoffeeScript教程,这三个搭配在一起,恩,基本就是无多余代码的极简风了。
如需了解其他功能,请前往官网查阅:Pug官网强烈建议
Pug,CoffeeScript,以及Sass联合使用,会有奇效!其他两个方案,我会在后续文章中跟进,敬请期待!、
期待
希望各位大大关注以及积极评论,只有交流才有进步!我会努力把自己知道的小技巧奉献给大家,刚开始写文,文笔希望各位谅解。谢谢
最新文章
- Servlet和CGI的区别
- Objective-C( block的使用)
- 【转载】关于Linux Shell 特殊字符
- 课堂Scrum站立会议演示
- HDU 4031 Attack(线段树/树状数组区间更新单点查询+暴力)
- 从一个小项目看return 引用 重载运算符
- IOS知识小记
- 项目管理Point
- ORACLE调度之基于事件的调度(二)【weber出品】
- .net通用权限框架B/S (三)--MODEL层(1)
- windows下架设SVN服务器并设置开机启动
- [iOS]C语言技术视频-02-程序分支结构(if...else)
- C语言对齐
- (NO.00001)iOS游戏SpeedBoy Lite成形记(六)
- python json按输入顺序输出内容
- 禁止用su切换到root
- 省钱版----查找 IoT 设备TTL线序__未完待续
- nopCommerce 3.2新功能
- Metaspace 之一:Metaspace整体介绍(永久代被替换原因、元空间特点、元空间内存查看分析方法)
- 2019.01.03 bzoj3456: 城市规划(生成函数+多项式取对)