User Experience optimization for Vue.js

One. Write in front

Six months ago, for the first time in the project to practice Vuejs, because before that, there is no Angular,avalon and other framework of practical experience, so in the use of Vue, did not give themselves summed up more experience and experience. As the project progresses and the revision is optimized, whether it is the addition of new code or the old code, Vue is gradually replacing jquery in terms of the implementation of the functionality and the writing of the code, except that some are not easy to replace and do not find a more appropriate component based on Vue. The use of Vue, in my personal experience, relieves me of the burden of manipulating the DOM, and I don't need to get the data from the DOM, assemble the data, or write back the presentation data to the DOM. I do not need a variety of stitching HTML, even if the simple HTML can endure, complex will also lead to maintenance. Components of the development, more can let us JS segmentation, clear responsibilities, more than the modular development of the reuse of more powerful, and finally through the tool packaging.

Two. The content of this optimization: the first edition of the Experience

First version of the experience of the GIF, to tell the truth, then forcibly made, I do not love to use, but also do not want to see their own code and modify the mosaic of a bunch of HTML. In fact, the detailed arrangement of the teaching plan and the corresponding match of each lesson. When the number of classes is more, then how many hours, the user may need to click on the number of check box. At that time, only the Vue computed to calculate how the red part of the text should be displayed, so you can also monitor the teaching plan and the number of hours of change data, when the teaching program and lessons have been selected, will be generated below the operation content, the content is HTML stitching.

Three. Full revision

First on the revision of the page effect, due to a single lesson still need user operation several times, so added a few quick operation above the way. This is achieved by using pure vue. If there is a little dom operation here, it will disturb Vue's vmodel data, so it must be driven by data, and the detailed lesson of each lesson plan is an array, and the operation is always push and splice. Finally, the Vmodel of the page can be submitted directly.

Four. The last paragraph of the simple Drag demo bar

This demo is a lot of lack of expenditure, I initially refer to other people on the web to achieve the use of the implementation. As you can see, I drag the durian into Xiao Ying, I put it in the grapes, the result of this element apppend into the grape div. So in the real situation, you may need to make a lot of judgments, such as if the class of the div is a grape, then you put it in its parent element. In addition, the operation of this code, not completely out of the DOM, still uses appendchild. So your operation can be based on the HTML to do some of the tags, to find the corresponding list, and to push the data, or splice data, which is data-driven.

Here is the code, copy and modify the Vue path to run directly

View Code

User Experience optimization for Vue.js