写在前面
当大多数人Vue理解的炉火纯青的时候，你应该思考怎么让vue页面骚气起来，下面就我个人在接触Vue两年的时间里，在实际工作中门户网站在前端页面交互应用和技巧，炒几道“小菜”给大家分享一哈，我把它封装成一个项目vue-portal-webUI（github源码），不敢说是UI，但也是各种常见常遇到的情景吧，看懂代码需要一些vue、axios、es6、scss基础、数据基本上是mock，功能和场景的话，会在空闲的时候慢慢加上来，废话不多说，直接上菜单：
小菜0、页面布局之五彩斑斓的类似标签栏先来个效果热热身
上菜：
场景需求：最近设计湿丢来这样的页面设计，要求响应式。正常老铁们看到类似标签栏的设计，作为前端要切出来估计头皮一发麻，基本上实现的话要么简单粗暴上背景图，要么几个div，作为对代码有的洁癖的我就直接上v-for表单渲染，把中间这块封装了一个公用的容器组件wapper，（完整代码，见本文后github链接）
原理：v-for去遍历数组，把颜色加在背景上，样式部分就不贴代码了，原理就是css3的计算属性calc分成6等分，然后各种阴影、圆角之类的一上效果杠杠的。
[题外话：至于性能方面没有做过多的思考，v-for表单渲染与其他实现方式的性能对比，这里也不做过多讲，这样看起来代码是优雅的]
小菜1、爱心点赞，七夕特别贡献点赞场景，七夕了给相爱的ta一个赞吧
上菜：
场景需求：七夕马上就要到了，开始估计又要虐狗了，根据喜欢程度可以进行多次点击，从因为人群中偶然的一个回眸，平常到like,到love,再到love+,在到平常（点击通过爱心颜色和文字提示表示亲密度），项目中也常常出现，比如评论点赞，图书推荐点赞等场景，这里我把爱心抽离出一个heart组件
原理：点赞功能究竟是怎么实现的呢，其实我在前一篇文章《从青铜到王者10个css3伪类使用技巧和运用，了解一哈》已经提到了，其实就是用伪类实现鼠标经过提示，点击修改循环heart.level，切换class来修改提示（伪类透明度），和爱心颜色（完整代码，见本文后github链接）
[题外话：以上数据都是mock模拟，其实请求的是github里面的数据，github提供的api可以看到很多数据，感兴趣的同学可以拿取githubapi里自己的数据做一个关于自己的"大数据分析页面"，很赞哦]
小菜2、让新闻选项卡动起来新闻选项卡，门户网站出现概率贼高，告别枯燥无味翻动新闻选项卡，鼠标经过动起来
上菜：
场景需求：选项卡标题鼠标经过，对应切换新闻内容列表。jq深度患者，通常看到类似滚动推动效果的效果，肯定在想操作DOM啊，so easy。还是那句话，代码强迫症，es6和vue相结合，让你尽可能告别DOM操作（完整代码，本文后github链接）
原理：让新闻内容区news-listbox的宽度300%（因为有三个选项），超出部分隐藏，这边标题选项只需要鼠标经过的时候带上index，计算margin-left多少，配合css3动画，寥寥几行ES6就实现了以上效果！
[题外话：以上数据都是mock模拟，里面其实很多值得大家可以看的亮点，比如怎么样让新闻第一条数据是和其他li有区别，时间截取、li超出部分显示更多按钮，等等都可下载源码看看]
小菜3、让新闻卡片图片点击放大
新闻卡片，点击图片平滑过渡放大，关闭缩小
上菜：
场景需求：其实就是一个查看点击查看大图插件
原理：通过transform:属性scale实现图片缩放，其中图片是两张图小大图切换，目前只是实现了功能，有待优化，所以不贴代码了（完整代码，本文后github链接）
小菜4、轮播图轮播图，现在基于vue的开源的很多优秀的轮播图插件,比如vue-awesome-swiper，这个功能就不多讲， 这边的话我自己写的：1、支持浏览器任意放缩，兼容移动端，2、支持自动切换，鼠标经过停止切换，分页/任意页点击切换，左右切换，3、支持文字介绍（超过一行自动省略）
上菜：
值得一提的是：如果加载轮播图组件（其他组件有这种报错可能）在加载的过程中出现“Error in render: "TypeError: Cannot read property "url" of undefined"
这是由于axios请求和组件渲染顺序的问题引起的，这时候，你只需要在axios请求到数据后，再去加载组件，这里我推荐用v-if，判断当数据的长度大于0，表示请求出来了数据，再去加载轮播组件，如此就不会报错了。
对应轮播组件，感兴趣的同学可以看我之前发的文章《从开发到发布一款基于Vue2x的响应式自适应轮播组件插件VueSliderShow》
小菜5、即时检索上菜：
场景需求：通过输入即时检索列表里面的内容，列表的检索过滤（完整代码，本文后github链接）
原理：通过computed计算input框的内容，然后再展示内容
最后：（未完待续）因为前一份工作的关系，做的项目大多数都是门户网站项目，最近提了离职，偷闲现在这是阶段，总结了这两年来的一些前端经验和一些小技巧，也有参考踏得网一些资源。 本来是想着写一个基于Vue的门户网站UI组件的，后来觉得写UI范围太大，就分享一些通用的vue在前端页面交互上一些小技巧吧，目前由于时间和工作关系，暂时更新比较慢，当然目前这个项目里还有其他的一些小组件，比如返回顶部、github小挂件....，当然这些所谓“骚气”的页面效果，在性能上和实用性上没有做过多的测试，包括文章写的仓促，描述有误之处，谢谢大家指正，后续会持续更新和优化，分享一些新的有趣的小组件小东西，都会发布更新在这篇文章和vue-portal-webUI（github源码）上，可下载体验，也期待大家的交流....
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/108235.html
摘要：众所周知，前端近几年闹了一场革命。这些问题反应了什么现象确实前端很火，引来了一批批新人。前端小白们如火如荼的学习着现在前端流行的新技术栈。写在最后所以啊，在目睹了很多白痴问题后，我终于发出了一声呐喊，答题救不了前端新人。 众所周知，前端近几年闹了一场革命。前端在编程领域也掀起了学习潮。至少在中国，从2013年下半年至今，在搜索指数上，有着爆炸式的增长。可以看下数据：百度指数，Googl...
摘要：众所周知，前端近几年闹了一场革命。这些问题反应了什么现象确实前端很火，引来了一批批新人。前端小白们如火如荼的学习着现在前端流行的新技术栈。写在最后所以啊，在目睹了很多白痴问题后，我终于发出了一声呐喊，答题救不了前端新人。 众所周知，前端近几年闹了一场革命。前端在编程领域也掀起了学习潮。至少在中国，从2013年下半年至今，在搜索指数上，有着爆炸式的增长。可以看下数据：百度指数，Googl...
摘要：老实说我不是第一次想歪了而且很慢总是不能很快抓住要点当别人用后端从做博客做论坛联系完成的应用的时候我跑去学单页面应用还很久挣扎在的思路当中我想说的是走大多数人走的路的确是可以减少浪费的时间和错误的走少数人在的路当然也刺激的我最近才明白原来前 老实说我不是第一次想歪了, 而且很慢, 总是不能很快抓住要点. 当别人用后端 MVC 从做博客做论坛, 联系完成 MVC 的应用的时候 我跑去学单...
摘要：管理后台，日常就是提交各种表单了，这部分现有的方案，比如表单提交或者收集信息提交。，可以用于前端开发的工程构建。带了人的前端团队，你的精力开始在配合公司其他部门做用户数据增长了。开始考虑使用的。 hi,大家伙，我是佛系大大，很高兴与你们一起沟通，学习，进步。 很久不更新博客了，现在回来再写博客，尽然是有些怀念的感觉，幸福的感觉。因为写博客，内心会很宁静，沉浸在自己的...
阅读 1504·2023-04-25 17:41
阅读 3022·2021-11-22 15:08
阅读 824·2021-09-29 09:35
阅读 1567·2021-09-27 13:35
阅读 3295·2021-08-31 09:44
阅读 2695·2019-08-30 13:20
阅读 1916·2019-08-30 13:00
阅读 2542·2019-08-26 12:12
