脚本宝典收集整理的这篇文章主要介绍了

当大多数人对Vue理解到炉火纯青的时候,是不是该思考一下怎么让vue页面骚气起来

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h3 id="articleHeader0">写在前面</h3> <p>当大多数人<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>理解的炉火纯青的时候,你应该思考怎么让vue页面骚气起来,下面就我个人在接触Vue两年的时间里,在实际工作中门户网站在前端页面交互应用和技巧,炒几道“小菜”给大家分享一哈,我把它封装成一个项目<a href="https://github.com/HongqingCao/vue-portal-webUI" rel="nofollow noreferrer" target="_blank">vue-portal-webUI(github源码)</a>,不敢说是UI,但也是各种常见常遇到的情景吧,看懂代码需要一些vue、ax<a href="http://www.js-code.com/tag/ios" title="浏览关于“ios”的文章" target="_blank" class="tag_link">ios</a>、<a href="http://www.js-code.com/tag/es6" title="浏览关于“es6”的文章" target="_blank" class="tag_link">es6</a>、scss基础、数据基本上是mock,功能和场景的话,会在空闲的时候慢慢加上来,废话不多说,直接上菜单:</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000016033211" src="/img/remote/1460000016033211" alt="" title="" style="cursor: pointer; display: inline;"></span></p> <h3 id="articleHeader1">小菜0、页面布局之五彩斑斓的类似标签栏</h3> <p>先来个效果热热身</p> <p>上菜:</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000016033212?w=1390&amp;h=353" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span><br />场景需求:最近设计湿丢来这样的页面设计,要求响应式。正常老铁们看到类似标签栏的设计,作为前端要切出来估计头皮一发麻,基本上实现的话要么简单粗暴上背景图,要么几个<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a>,作为对代码有的洁癖的我就直接上v-<a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a>表单渲染,把中间这块封装了一个公用的容器组件wapper,(完整代码,见本文后github链接)</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000016033213" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br />原理:v-for去遍历<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a>,把颜色加在背景上,样式部分就不贴代码了,原理就是<a href="http://www.js-code.com/tag/css3" title="浏览关于“css3”的文章" target="_blank" class="tag_link">css3</a>的计算属性calc分成6等分,然后各种阴影、圆角之类的一上效果杠杠的。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display:inline-table;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>[题外话:至于性能方面没有做过多的思考,v-for表单渲染与其他实现方式的性能对比,这里也不做过多讲,这样看起来代码是优雅的]</p> <h3 id="articleHeader2">小菜1、爱心点赞,七夕特别贡献</h3> <p>点赞场景,七夕了给相爱的ta一个赞吧</p> <p>上菜:<br /><span class="img-wrap"><img data-src="/img/remote/1460000016033214?w=697&amp;h=364" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>场景需求:七夕马上就要到了,开始估计又要虐狗了,根据喜欢程度可以进行多次点击,从因为人群中偶然的一个回眸,平常到like,到love,再到love+,在到平常(点击通过爱心颜色和文字提示表示亲密度),项目中也常常出现,比如评论点赞,图书推荐点赞等场景,这里我把爱心抽离出一个heart组件</p> <p>原理:点赞功能究竟是怎么实现的呢,其实我在前一篇文章《从青铜到王者10个css3伪类使用技巧和运用,了解一哈》已经提到了,其实就是用伪类实现鼠标经过提示,点击修改循环heart.level,切换class来修改提示(伪类透明度),和爱心颜色(完整代码,见本文后github链接)</p> <p>[题外话:以上数据都是mock模拟,其实请求的是github里面的数据,github提供的api可以看到很多数据,感兴趣的同学可以拿取githubapi里自己的数据做一个关于自己的'大数据分析页面',很赞哦]</p> <h3 id="articleHeader3">小菜2、让新闻选项卡动起来</h3> <p>新闻选项卡,门户网站出现概率贼高,告别枯燥无味翻动新闻选项卡,鼠标经过动起来</p> <p>上菜:<br /><span class="img-wrap"><img data-src="/img/remote/1460000016033215?w=692&amp;h=347" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>场景需求:选项卡标题鼠标经过,对应切换新闻内容列表。jq深度患者,通常看到类似滚动推动效果的效果,肯定在想操作<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>啊,so easy。还是那句话,代码强迫症,es6和vue相结合,让你尽可能告别DOM操作(完整代码,本文后github链接)</p> <p>原理:让新闻内容区<a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a>s-listbox的宽度300%(因为有三个选项),超出部分隐藏,这边标题选项只需要鼠标经过的时候带上<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>dex,计算margin-left多少,配合<a href="http://www.js-code.com/tag/css3%e5%8a%a8%e7%94%bb" title="浏览关于“css3动画”的文章" target="_blank" class="tag_link">css3动画</a>,寥寥几行ES6就实现了以上效果!<br />[题外话:以上数据都是mock模拟,里面其实很多值得大家可以看的亮点,比如怎么样让新闻第一条数据是和其他li有区别,时间截取、li超出部分显示更多按钮,等等都可下载源码看看]</p> <p>小菜3、让新闻卡片图片点击放大<br />新闻卡片,点击图片平滑过渡放大,关闭缩小</p> <p>上菜:<br /><span class="img-wrap"><img data-src="/img/remote/1460000016033216" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>场景需求:其实就是一个查看点击查看大图插件</p> <p>原理:通过trans<a href="http://www.js-code.com/tag/form" title="浏览关于“form”的文章" target="_blank" class="tag_link">form</a>:属性scale实现图片缩放,其中图片是两张图小大图切换,目前只是实现了功能,有待优化,所以不贴代码了(完整代码,本文后github链接)</p> <h3 id="articleHeader4">小菜4、轮播图</h3> <p>轮播图,现在基于vue的开源的很多优秀的轮播图插件,比如vue-awesome-swiper,这个功能就不多讲, 这边的话我自己写的:1、支持浏览器任意放缩,兼容移动端,2、支持自动切换,鼠标经过停止切换,分页/任意页点击切换,左右切换,3、支持文字介绍(超过一行自动省略)</p> <p>上菜:<br /><span class="img-wrap"><img data-src="/img/remote/1460000016033217" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>值得一提的是:如果加载轮播图组件(其他组件有这种报错可能)在加载的过程中出现“Error in render: "TypeError: Cannot read property 'url' of <a href="http://www.js-code.com/tag/undefined" title="浏览关于“undefined”的文章" target="_blank" class="tag_link">undefined</a>"<br /><span class="img-wrap"><img data-src="/img/remote/1460000016033218" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>这是由于axios请求和组件渲染顺序的问题引起的,这时候,你只需要在axios请求到数据后,再去加载组件,这里我推荐用v-<a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a>,判断当数据的长度大于0,表示请求出来了数据,再去加载轮播组件,如此就不会报错了。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_5_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_5_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_5" name="aswift_5" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>对应轮播组件,感兴趣的同学可以看我之前发的文章《从开发到发布一款基于Vue2x的响应式自适应轮播组件插件VueSliderShow》</p> <h3 id="articleHeader5">小菜5、即时检索</h3> <p>上菜:</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000016033219?w=799&amp;h=474" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>场景需求:通过输入即时检索列表里面的内容,列表的检索过滤(完整代码,本文后github链接)</p> <p>原理:通过computed计算input框的内容,然后再展示内容</p> <h3 id="articleHeader6">最后:(未完待续)</h3> <p>因为前一份工作的关系,做的项目大多数都是门户网站项目,最近提了离职,偷闲现在这是阶段,总结了这两年来的一些前端经验和一些小技巧,也有参考踏得网一些资源。 本来是想着写一个基于Vue的门户网站UI组件的,后来觉得写UI范围太大,就分享一些通用的vue在前端页面交互上一些小技巧吧,目前由于时间和工作关系,暂时更新比较慢,当然目前这个项目里还有其他的一些小组件,比如返回顶部、github小挂件....,当然这些所谓“骚气”的页面效果,在性能上和实用性上没有做过多的测试,包括文章写的仓促,描述有误之处,谢谢大家指正,后续会持续更新和优化,分享一些新的有趣的小组件小东西,都会发布更新在这篇文章和<a href="https://github.com/HongqingCao/vue-portal-webUI" rel="nofollow noreferrer" target="_blank">vue-portal-webUI(github源码)</a>上,可下载体验,也期待大家的交流....</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

当大多数人对Vue理解到炉火纯青的时候,是不是该思考一下怎么让vue页面骚气起来

全部内容,希望文章能够帮你解决

当大多数人对Vue理解到炉火纯青的时候,是不是该思考一下怎么让vue页面骚气起来

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过