vue.js的用户体验优化
关键词：
一.写在前面
半年以前，第一次在项目上实践VueJs,由于在那之前，没有Angular,avalon等框架的实践经验，所以在Vue的使用上，没有给自己总结出更多的经验和体验。随着项目进行和优化改版，无论是新代码的增加还是旧代码，在功能的实现和代码的书写上，Vue逐渐替代了Jquery，除了有些不容易替换和没有找到基于vue更合适的组件。Vue的使用，在我个人的感受中减轻了我操作dom的负担，我不需要从dom中获取数据，然后拼装数据，也不需要向dom中回写展示数据。更不需要我各种拼接html，即使简单的html可以忍受，复杂的也将导致无法维护。组件化的开发，更能让我们js分割，职责清晰，比模块化开发的复用性更强，最后再通过工具打包。
二.本次优化内容：第一版的体验
先上第一版体验的gif图吧，说实话，当时强行做出来之后，我自己都不爱用，更不想看自己的代码和修改拼接一堆的html。截图中所体现的功能，实际上只是将教案的详细安排和每一个课时对应匹配起来。当课时数量比较多的时候，那么有多少个课时，用户可能就需要点击多少下复选框。当时，只用了vue computed来计算红色部分的文字应该如何显示，所以也能一并监控到教学方案和课时数量的改变情况数据，当教学方案和课时都已经选择的时候，会生成下方的操作内容，内容则是html拼接的。
三.完全改版
先上改版的页面效果，由于做成单课时依然需要用户操作多次，所以增加了上方几个快速操作的方式。这里使用纯Vue来实现。在这里如果有一点dom操作，将会扰乱vue的Vmodel数据，所以必须要以数据为驱动，每一个教案的详细课时，都是一个数组，操作永远都是push和splice。最后则可以直接将页面的vmodel提交。
四.上一段简单的拖动demo吧
这段demo是有很多不足支出的，是我最初参考网上其他人写法实现所用到的。你可以看到，我把榴莲拖动到小颖里面，我把它放在葡萄里面，结果这个元素apppend到了葡萄div当中。所以在实际情况中，你可能需要做很多判断，比如如果是葡萄这种div的class,则你将其放到其父元素中之类的。另外这段代码的操作，没有完全脱离dom,依然使用了appendChild。所以你的操作可以根据html上做下某些标记，来找到对应的list,并向其中push数据，或者splice数据，这样一来就是数据驱动了。
这里是代码，copy并修改vue路径直接运行
View Code
vue按需加载提升用户体验
Vue官方文档异步组件：在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了让事情更简单，Vue.js允许将组件定义为一个工厂函数，动态地解析组件的定义。Vue.js只在组件需要渲染时触发工厂函数，并... 查看详情
mvc+vue.js初体验(实现表单操作)
...jshttp://cn.vuejs.org/Vue.js（读音/vju?/,类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合... 查看详情
使用 AMP 缓存优化用户体验
】使用AMP缓存优化用户体验【英文标题】：UsingtheAMPcachetooptimizetheuserexperience【发布时间】：2017-02-0818:37:29【问题描述】：我最近一直在阅读AMP-CACHE，虽然URL将在2017年第一季度发生变化，但我想了解的问题是如何优化移动用户的... 查看详情
vue初体验
...址：https://cn.vuejs.org/v2/guide/installation.htmlVue.js是一套构建用户界面的渐进式框架，不支持IE8及其以下版本的浏览器，因为其使用IE8不能模拟的ECMAScript5特性，Vue.js支持所有 兼容ECMAScript5的浏览器。1.使用1.1一般情况下是使用<... 查看详情
网站优化讲的是搜索引擎优化和用户体验优化
...维护和优化。一般来说，网站优化讲的是搜索引擎优化和用户体验优化。网站优化搜索引擎优化搜索引擎优化顾名思义讲的就是企业网站在搜索引擎中的排名优化，这一方面，也是现在许多企业在进行网站宣传推广时最关注的部... 查看详情
优化个人主页的用户体验
...近人们打开我的个人主页看作品的时候，我观察到主页的用户体验不是很好，我就对以下几点进行了改善： 1，点击作品列表到后面的页数，比如第三页的作品，因为我的个人主页都是全站统一在当前页打开，小站嘛，所以... 查看详情
浅谈前端视角下的用户体验
...话题，每谈及性能优化，我们一定会提到的就是用户体验，用户体验的好坏是决定产品成功与否的关键。性能优化是为了提升用户体验，从这个角度出发，“快”即是好的用户体验，但我们知道，用户... 查看详情
解锁高评分|ebay深耕用户体验，优化大屏幕设备应用
作者/ Android团队深耕用户体验对于拥有全球数百万买家和卖家的庞大购物网站eBay而言，提供优质的用户体验是提升销量的关键。因此，当eBay架构团队的Android工程师意识到，通过优化大屏幕设备(如平板电脑和可折叠... 查看详情
解锁高评分|ebay深耕用户体验，优化大屏幕设备应用
作者/ Android团队深耕用户体验对于拥有全球数百万买家和卖家的庞大购物网站eBay而言，提供优质的用户体验是提升销量的关键。因此，当eBay架构团队的Android工程师意识到，通过优化大屏幕设备(如平板电脑和可折叠... 查看详情
企业怎样优化用户体验？f5给出三条专业建议
互联网时代，用户体验无疑是第一位。2020年F5的一份研究报告中发现，96%的亚太受访者表示相比“安全”更加看中“便利性”。因此当我们步入数字化的世界中，“精简化”，“支持性”和“便利性”已经成为企... 查看详情
现代图片性能优化及体验优化指南(代码片段)
...懒加载是一种网页性能优化的常见方式，它能极大的提升用户体验。到今天，现在一张图片超过几M已经是常见事了。如果每次进入页面都需要请求页面上的所有的图片资源，会较大的影响用户体验，对用户的带宽也是一种极大... 查看详情
前端性能优化
...们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢？其实应该是属于功能的表现。并且影响用户访问体验的绝大部分来自前端页面。 前端优化的目的：1.从用户角度... 查看详情
cdn高级技术专家周哲:深度剖析短视频分发过程中的用户体验优化技术点
...度介绍整体方案，并且重点讲解短视频加速的注意事项和用户体验优化要点。讲解从三个部分展开：短视频应用场景，阿里云短视频解决方案，阿里云对短视频用户体验优化的相关优化。短视频应用场景短视频比图片和文字包含... 查看详情
文字溢出省略和用户体验优化(代码片段)
这是我又一次探究文字溢出相关问题，也是我在用户体验道路上踏出的又一小步。之前提到“文字溢出”瞬间就能想到ellipsis。再接触的多了一点会同时想到display:-webkit-box;（多行溢出）。你一定欣喜若狂，认为掌... 查看详情
大会回顾丨游戏用户体验优化如何实践，看大咖怎么说（附ppt下载）
...专场】期间，腾讯WeTest产品总监周可菁带来了《游戏用户体验在性能优化上的实践与应用》的主题演讲，分享了玩家愈发重视游戏体验的当下，腾讯WeTest如何助力游戏厂商应对游戏研发运营过程中的质量问题。游戏体... 查看详情
现代图片性能优化及体验优化指南(代码片段)
...忽视它。在一些重交互、重逻辑的网站中，我们需要考虑用户的使用习惯、使用场景，从高可访问性的角度考虑，譬如假设用户没有鼠标，仅仅使用键盘，能否顺畅的使用我们的网站？非常重要的一点是，提高可访问性也能让普... 查看详情
vue.js能做pc端单页式网站开发吗
...端网站在不需要优先考虑SEO和首屏渲染时间时，单页式在用户体验和开发体验(开发效率)上是完胜多页式的。3、vue.js作为主流框架之一，同样支持SSR，vue.js的PC端网站开发时服务端渲染编译比较慢，使用用单页式效率更高。扩展... 查看详情
高性能极致用户体验前端开发实战
课程介绍高性能极致用户体验前端开发实战课程适合所有前端开发学习或者从业者，结合目前前端开发的最佳实践，提供前端网页性能分析优化知识，结合实际项目经验分析可以采用的优化思路，并给出开发高性能极致体验网页... 查看详情