当前位置: 首页 > Web前端 > HTML

Vue进阶课《从HTML到Pug》

时间:2023-04-02 20:15:48 HTML

中的Pug是什么,听上去可能有些陌生,但说起她的前世,相信大家一定有所耳闻:Jade。每当你不停地点击<><><><>/>时,你有没有想过这个该死的箭头是否可以被移除?这不仅看起来不舒服,有时还会因为太多的线条而让你头晕目眩。可能你知道有一个东西叫emmet,它解决了你写的时候多写的内容,但是并没有解决多余的代码行,更不用说在你完全熟练使用emmet之前脑子里的需求了。做很多预翻译!那么有没有一种不用预翻译就可以减少代码量的方案呢?咦,后台模板Jade出现了,然后更名为Pug。现在Vue也支持这种语法。详情请阅读下文。如何使用npmi-Dpugpug-loader我喜欢用Pug,CoffeeScript,Sass,前两者有共同的理念,CoffeeScript说自己是JavaScript,同理,Pug是HTML,你可以理解为句法糖。先看一段HTML代码

95个字符,5行,和3个结束标签到一个Puglabelinput(type="checkbox")span记住密码。show-box54个字符,4行,无结束标记。它们是有区别的。你惊喜吗?再来!我是卖家注册卖家我是买家
点击登录
reset15行,671个字符,9个结束标签.container.ver.sellerinput.storeId(type='number'v-model='storeId'placeholder='输入商店ID'@focus='passwordShow=false').navbutton.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')Reset11行,481个字符,无结束标记(这里我个人的书写习惯是输入和剪切,统一比较用这种写法)。简单计算可以节省大约30%的代码量和20%的行数。如果公司的业绩是看行数或者代码的,就不要用太多--tipsVue使用Vue有什么需要注意的吗?一点都不。“:”是冒号,“@”是shift+2。一些小坑。注意使用“|”用于剪切文本的符号。如:spanispan.redlove|you//这里不需要再用span了,用"|"toPug其他功能这里我记得Pug起家是做后台模板的,所以功能肯定不是简化语法那么简单,她还有变量,混合,过滤等功能,但其实这些函数与正在使用的Vue函数重复。我们主要是用Vue搭建项目,所以会用Vue就用Vue。对于我们的项目来说,Pug最大的作用就是简化和整理代码。以后会有Sass和CoffeeScript教程。这三者结合在一起。嗯,基本上就是一个没有冗余代码的极简风格。其他功能请访问官网:Pug官网强烈推荐Pug与CoffeeScript、Sass一起使用,会有奇效!另外两种方案我会在后续文章中跟进,敬请期待!,期待大家多多关注,积极评价。只有沟通才能进步!我会尽力把自己会的小技巧奉献给大家。我刚开始写,希望你能理解写作风格。谢谢