摘要:是啥听起来或许比较陌生,但是如果说起她的前生,相信各位多少会有耳闻。如何使用即可本人喜欢使用,前两者有共有的哲学,说自己就是,同样的,也就是,你可以理解成语法糖。后续还会有与教程,这三个搭配在一起,恩,基本就是无多余代码的极简风了。
是啥
Pug听起来或许比较陌生,但是如果说起她的前生,相信各位多少会有耳闻:Jade。
每当你不停的敲打<><><><>>>>>的时候,可曾想过,这该死的箭头是不是可以拿掉?这不单单是看着不舒服,有时候还会因为行数过多,而导致你头晕眼花。
或许你知道,有个东西叫emmet,它是解决了你写的时候多写的那些内容,但是并没有解决冗余的代码行数,更不要提在你没有完全熟练使用emmet前,脑子里面需要进行大量的预翻译!
那么是否有一种既能减少代码量,又能不做预翻译的方案呢,呐呐呐,Jade这个后端模板出现了,然后改名叫Pug了,现在Vue也支持这个语法,具体请往下看。
npm i -D pug pug-loader
即可
本人喜欢使用Pug、CoffeeScript、Sass,前两者有共有的哲学,CoffeeScript说自己就是JavaScript,同样的,Pug也就是HTML,你可以理解成语法糖。功力如何
我们先来看一段HTML代码
95个字符,5行,3个结束标签
整成Pug
label input(type="checkbox") span 记住密码 .show-box
54个字符,4行,没有结束标签
差别有了,惊不惊喜?再来!
重置
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联合使用,会有奇效!其他两个方案,我会在后续文章中跟进,敬请期待!、期待
希望各位大大关注以及积极评论,只有交流才有进步!我会努力把自己知道的小技巧奉献给大家,刚开始写文,文笔希望各位谅解。谢谢
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/52586.html
摘要:相关的内容为这样对于一个处理的第二阶段也就结束了,通过去拦截不同类型的,并返回新的,跳过后面的的执行,同时在内部会剔除掉,这样在进入到下一个处理阶段的时候,不在使用的范围之内,因此下一阶段便不会经由来处理。 文章首发于个人github blog: Biu-blog,欢迎大家关注~ Webpack 系列文章: Webpack Loader 高手进阶(一)Webpack Loader 高手...
摘要:前端日报精选我是如何实现的在线升级热更新功能的张鑫旭鑫空间鑫生活翻译表单的运用第期晋升评审的套路异步编程的四种方式黄博客精选组件设计和分解思考掘金中文译使登录页面变得正确掘金前端从强制开启压缩探究插件运行机制掘金个常用的简 2017-06-28 前端日报 精选 我是如何实现electron的在线升级热更新功能的? « 张鑫旭-鑫空间-鑫生活【翻译】React 表单: Refs 的运用【...
摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...
摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...
阅读 1973·2023-04-25 15:24
阅读 1546·2019-08-30 12:55
阅读 1586·2019-08-29 15:27
阅读 428·2019-08-26 17:04
阅读 2368·2019-08-26 10:59
阅读 1769·2019-08-26 10:44
阅读 2138·2019-08-22 16:15
阅读 2546·2019-08-22 15:36