一次基于Vue.Js的用户体验优化 （vue drag）
一.寫在前面
? ?半年以前，第一次在項(xiàng)目上實(shí)踐VueJs,由于在那之前，沒有Angular,avalon等框架的實(shí)踐經(jīng)驗(yàn)，所以在Vue的使用上，沒有給自己總結(jié)出更多的經(jīng)驗(yàn)和體驗(yàn)。隨著項(xiàng)目進(jìn)行和優(yōu)化改版，無論是新代碼的增加還是舊代碼，在功能的實(shí)現(xiàn)和代碼的書寫上，Vue逐漸替代了Jquery，除了有些不容易替換和沒有找到基于vue更合適的組件。Vue的使用，在我個人的感受中減輕了我操作dom的負(fù)擔(dān)，我不需要從dom中獲取數(shù)據(jù)，然后拼裝數(shù)據(jù)，也不需要向dom中回寫展示數(shù)據(jù)。更不需要我各種拼接html，即使簡單的html可以忍受，復(fù)雜的也將導(dǎo)致無法維護(hù)。組件化的開發(fā)，更能讓我們js分割，職責(zé)清晰，比模塊化開發(fā)的復(fù)用性更強(qiáng)，最后再通過工具打包。
二.本次優(yōu)化內(nèi)容：第一版的體驗(yàn)
? ?先上第一版體驗(yàn)的gif圖吧，說實(shí)話，當(dāng)時強(qiáng)行做出來之后，我自己都不愛用，更不想看自己的代碼和修改拼接一堆的html。截圖中所體現(xiàn)的功能，實(shí)際上只是將教案的詳細(xì)安排和每一個課時對應(yīng)匹配起來。當(dāng)課時數(shù)量比較多的時候，那么有多少個課時，用戶可能就需要點(diǎn)擊多少下復(fù)選框。當(dāng)時，只用了vue computed來計(jì)算紅色部分的文字應(yīng)該如何顯示，所以也能一并監(jiān)控到教學(xué)方案和課時數(shù)量的改變情況數(shù)據(jù)，當(dāng)教學(xué)方案和課時都已經(jīng)選擇的時候，會生成下方的操作內(nèi)容，內(nèi)容則是html拼接的。
?
三.完全改版
? ?先上改版的頁面效果，由于做成單課時依然需要用戶操作多次，所以增加了上方幾個快速操作的方式。這里使用純Vue來實(shí)現(xiàn)。在這里如果有一點(diǎn)dom操作，將會擾亂vue的Vmodel數(shù)據(jù)，所以必須要以數(shù)據(jù)為驅(qū)動，每一個教案的詳細(xì)課時，都是一個數(shù)組，操作永遠(yuǎn)都是push和splice。最后則可以直接將頁面的vmodel提交。
?
四.上一段簡單的拖動demo吧
這段demo是有很多不足支出的，是我最初參考網(wǎng)上其他人寫法實(shí)現(xiàn)所用到的。你可以看到，我把榴蓮?fù)蟿拥叫》f里面，我把它放在葡萄里面，結(jié)果這個元素apppend到了葡萄div當(dāng)中。所以在實(shí)際情況中，你可能需要做很多判斷，比如如果是葡萄這種div的class,則你將其放到其父元素中之類的。另外這段代碼的操作，沒有完全脫離dom,依然使用了appendChild。所以你的操作可以根據(jù)html上做下某些標(biāo)記，來找到對應(yīng)的list,并向其中push數(shù)據(jù)，或者splice數(shù)據(jù)，這樣一來就是數(shù)據(jù)驅(qū)動了。
?這里是代碼，copy并修改vue路徑直接運(yùn)行
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 5 5 <meta charset="utf-8"> 6 6 <title></title> 7 7 <meta name="keywords" content="" /> 8 8 <meta name="description" content="" /> 9 9 10 10 <style> 11 11 .select-item { 12 12 background-color: #5bc0de; 13 13 display: inline-block; 14 14 text-align: center; 15 15 border-radius: 3px; 16 16 margin-right: 10px; 17 17 cursor: pointer; 18 18 padding: 6px 20px; 19 19 color: #fff; 20 20 } 21 21 22 22 .cursored { 23 23 cursor: default; 24 24 } 25 25 26 26 .project-content, .people-content { 27 27 margin: 30px 50px; 28 28 } 29 29 30 30 .people-content { 31 31 margin-top: 30px; 32 32 } 33 33 34 34 .drag-div { 35 35 border: 1px solid#5bc0de; 36 36 padding: 10px; 37 37 margin-bottom: 10px; 38 38 width: 800px; 39 39 cursor: pointer; 40 40 } 41 41 42 42 .select-project-item { 43 43 display: inline-block; 44 44 text-align: center; 45 45 border-radius: 3px; 46 46 } 47 47 48 48 .drag-people-label { 49 49 margin-bottom: 0; 50 50 padding-right: 10px; 51 51 } 52 52 53 53 [v-cloak] { 54 54 display: none; 55 55 } 56 56 </style> 57 57 </head> 58 58 <body> 59 59 60 60 <div class='drag-content' id="dragCon"> 61 61 <div class='project-content'> 62 62 <div class='select-item' draggable='true' @dragstart='drag($event)' v-for="pjdt in projectdatas">{{pjdt.name}}</div> 63 63 </div> 64 64 <div class='people-content'> 65 65 <div class='drag-div' v-for="ppdt in peopledata" @drop='drop($event)' @dragover='allowDrop($event)'> 66 66 <div class='select-project-item'> 67 67 <label class='drag-people-label'>{{ppdt.name}}:</label> 68 68 </div> 69 69 </div> 70 70 </div> 71 71 </div> 72 72 <script src="../../../content/lib/vue/vue.min.js"></script> 73 73 <script type="text/javascript"> 74 74 var dom; 75 75 var ss = new Vue({ 76 76 'el': '#dragCon', 77 77 data: { 78 78 projectdatas: [{ 79 79 id: 1, 80 80 name: '葡萄' 81 81 }, { 82 82 id: 2, 83 83 name: '芒果' 84 84 }, { 85 85 id: 3, 86 86 name: '木瓜' 87 87 }, { 88 88 id: 4, 89 89 name: '榴蓮' 90 90 }], 91 91 92 92 93 93 peopledata: [{ 94 94 id: 1, 95 95 name: '小穎' 96 96 }, { 97 97 id: 2, 98 98 name: 'hover' 99 99 }, { 100 100 id: 3, 101 101 name: '空巢青年三 ' 102 102 }, { 103 103 id: 3, 104 104 name: '一丟丟' 105 105 }] 106 106 107 107 }, 108 108 mounted: function () { 109 109 this.$nextTick(function () { 110 110 111 111 }) 112 112 }, 113 113 watch: { 114 114 projectdatas: { 115 115 handler: function (val, oldval) { 116 116 117 117 }, 118 118 deep: true 119 119 }, 120 120 peopledata: { 121 121 handler: function (val, oldval) { 122 122 123 123 }, 124 124 deep: true 125 125 } 126 126 }, 127 127 128 128 methods: { 129 129 drag: function (event) { 130 130 dom = event.currentTarget 131 131 }, 132 132 drop: function (event) { 133 133 event.preventDefault(); 134 134 event.target.appendChild(dom); 135 135 }, 136 136 allowDrop: function (event) { 137 137 event.preventDefault(); 138 138 } 139 139 } 140 140 141 141 }); 142 142 143 143 144 144 </script> 145 145 </body> 146 146 </html> View Code?
?
寫在最后
?
如果，您認(rèn)為閱讀這篇博客讓您有些收獲，不妨點(diǎn)擊一下右下加【推薦】按鈕。
如果，您希望更容易地發(fā)現(xiàn)我的新博客，不妨點(diǎn)擊下方紅色【關(guān)注】的。
因?yàn)?#xff0c;我的分享熱情也離不開您的肯定支持。
感謝您的閱讀，我將持續(xù)輸出分享，我是蝸牛, 保持學(xué)習(xí)，謹(jǐn)記謙虛。不端不裝，有趣有夢。
轉(zhuǎn)載于:https://www.cnblogs.com/tdws/p/6885604.html
總結(jié)
以上是生活随笔為你收集整理的一次基于Vue.Js的用户体验优化 （vue drag）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 内核中的内存申请:kmalloc、vma
- 下一篇： vue import组件的使用