一次基于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路径直接运行
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
5 <meta charset="utf-8">
6 <title></title>
7 <meta name="keywords" content="" />
8 <meta name="description" content="" />
9
10 <style>
11 .select-item {
12 background-color: #5bc0de;
13 display: inline-block;
14 text-align: center;
15 border-radius: 3px;
16 margin-right: 10px;
17 cursor: pointer;
18 padding: 6px 20px;
19 color: #fff;
20 }
21
22 .cursored {
23 cursor: default;
24 }
25
26 .project-content, .people-content {
27 margin: 30px 50px;
28 }
29
30 .people-content {
31 margin-top: 30px;
32 }
33
34 .drag-div {
35 border: 1px solid#5bc0de;
36 padding: 10px;
37 margin-bottom: 10px;
38 width: 800px;
39 cursor: pointer;
40 }
41
42 .select-project-item {
43 display: inline-block;
44 text-align: center;
45 border-radius: 3px;
46 }
47
48 .drag-people-label {
49 margin-bottom: 0;
50 padding-right: 10px;
51 }
52
53 [v-cloak] {
54 display: none;
55 }
56 </style>
57 </head>
58 <body>
59
60 <div class='drag-content' id="dragCon">
61 <div class='project-content'>
62 <div class='select-item' draggable='true' @dragstart='drag($event)' v-for="pjdt in projectdatas">{{pjdt.name}}</div>
63 </div>
64 <div class='people-content'>
65 <div class='drag-div' v-for="ppdt in peopledata" @drop='drop($event)' @dragover='allowDrop($event)'>
66 <div class='select-project-item'>
67 <label class='drag-people-label'>{{ppdt.name}}:</label>
68 </div>
69 </div>
70 </div>
71 </div>
72 <script src="../../../content/lib/vue/vue.min.js"></script>
73 <script type="text/javascript">
74 var dom;
75 var ss = new Vue({
76 'el': '#dragCon',
77 data: {
78 projectdatas: [{
79 id: 1,
80 name: '葡萄'
81 }, {
82 id: 2,
83 name: '芒果'
84 }, {
85 id: 3,
86 name: '木瓜'
87 }, {
88 id: 4,
89 name: '榴莲'
90 }],
91
92
93 peopledata: [{
94 id: 1,
95 name: '小颖'
96 }, {
97 id: 2,
98 name: 'hover'
99 }, {
100 id: 3,
101 name: '空巢青年三 '
102 }, {
103 id: 3,
104 name: '一丢丢'
105 }]
106
107 },
108 mounted: function () {
109 this.$nextTick(function () {
110
111 })
112 },
113 watch: {
114 projectdatas: {
115 handler: function (val, oldval) {
116
117 },
118 deep: true
119 },
120 peopledata: {
121 handler: function (val, oldval) {
122
123 },
124 deep: true
125 }
126 },
127
128 methods: {
129 drag: function (event) {
130 dom = event.currentTarget
131 },
132 drop: function (event) {
133 event.preventDefault();
134 event.target.appendChild(dom);
135 },
136 allowDrop: function (event) {
137 event.preventDefault();
138 }
139 }
140
141 });
142
143
144 </script>
145 </body>
146 </html>
写在最后
如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下加【推荐】按钮。
如果，您希望更容易地发现我的新博客，不妨点击下方红色【关注】的。
因为，我的分享热情也离不开您的肯定支持。
感谢您的阅读，我将持续输出分享，我是蜗牛, 保持学习，谨记谦虚。不端不装，有趣有梦。
一次基于Vue.Js用户体验的优化的更多相关文章
- 基于vue.js的简单用户管理
功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core，如何
基于 Vue.js 之 iView UI 框架非工程化实践记要 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...
- 基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]
基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1] 原文:基于Vue JS, Webpack 以及Material Design的渐进式web应 ...
- 基于Vue.js的Web视频播放器插件vue-vam-video@1.3.6 正式发布
前言 今日正式发布一款基于Vue.js的Web视频播放器插件.可配置,操作灵活.跟我一起来体验吧! 线上地址体验 基于vue3.0和vue-vam-video,我开发了一款在线视频播放器. 网址: h ...
- Vue项目中使用基于Vue.js的移动组件库cube-ui
cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- 新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...
- [译]基于Vue.js的10个最佳UI框架，用于构建移动应用程序
原文查看10 Best Vue.js based UI Frameworks for Building Mobile Apps 如果您期待使用Vue.js构建移动应用程序,那么您可以选择许多可用的UI ...
- 基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计『转』
本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...
随机推荐
- Python之路-计算机基础
一·计算机的组成 一套完整的计算机系统分为:计算机硬件,操作系统,软件. 硬件系统:运算器,控制器和存储器 ,输入设备,输出设备. 1.运算器:负责算数运算和逻辑运算,与控制器一起组成CPU. 2 ...
- EntityFramework Core不得不注意的性能优化意外收获，你会用错？
前言 这两天在着实研究EF Core项目当中对于一些查询也没实际去检测,于是想着利用放假时间去实际测试下,结果本文就出来了,too young,too simple,后续博主会从底层翻译表达式树弄起, ...
- 性能调优案例分享：jvm crash的原因 2
3.core dump分析 有了core dump文件,接下来要做的就是通过命令去解析此文件,定位具体问题了,主要有以下三个命令: (1)先执行gdb $JAVA_HOME$/bin/java cor ...
- VC加载显示bmp图片的函数
void ShowBitmap(HDC hdc,const char *srcpath) { HBITMAP hBitmap = (HBITMAP)::LoadImage(0, srcpath, IM ...
- 微软 深度学习 cntk ，我目前见过 安装方式最简单的一个框架，2.0之后开始支持C# 咯
嗨,你也是我这种手残党么?之前试着安装着mxnet和tensorflow,但是因为时间比较短所以往往来不及安装完就失去兴趣,今天看到微软的cntk可以用了,一次性安装好了,并且测试通过 本人环境: W ...
- Centos安装MySql、Java、Tomcat
一.安装MySql 安装MySql yum install -y mysql-server mysql mysql-devel 启动MySql服务 service mysqld start 为root ...
- Android 布局（线性布局、相对布局）
一.线性布局(LinearLayout) <LinearLayout****</LinearLayout>1. orientation(布局方向)value=0 horizontal ...
- 2017.3.12 H5学习的第一周
本周我开始了H5的学习,在这一周里我们从html的基本标签开始一直讲到了才算css的用法,接下来我将记录下来本周我学到的H5的内容. 首先是声明文档,声明文档类型是HTML5文件,它在HTML文档必不 ...
- 跨web浏览器的IC卡读卡器解决方案
BS结构的程序,如果要与IC卡读卡器通信本身就是件不容易解决的事情.微软的activex ocx技术将这种应用限制在IE浏览器上了,不兼容其它的浏览器.而Chrome使用插件也不兼容IE和其他的浏览器 ...
- stm32中断学习总结
经过了两天,终于差不多能看懂32的中断了,由于是用的库函数操作的,所以有些内部知识并没有求甚解,只是理解知道是这样的.但对于要做简单开发的我来说这些已经够了. 我学习喜欢从一个例程来看,下面的程序是我 ...