One page migration from JQ to Vuejs+partialview

Off Topic

This share does not help you get started with Vue, the entry of the article is also meaningless, the official document http://cn.vuejs.org/v2/guide/has been written can no longer be clear. I hope we are brave and willing to give ourselves the opportunity to create practice.

There is a feature in hand not many PC-side pages, considering the next version, to the iOS, Android and the public has to add features to the PC, in Wednesday began to understand Vue, the weekend took some time to do to the Vue revision.

This article is a simple record of this experience. Vue is not the framework of MVVM, but the Vm-viewmodel in MVVM. The acquisition of interface data depends on Ajax, or one of the optional components that Vue provides us with Vue-loader.

Before using Vue, I myself use the concept of JS three layer, in the rendering and template aspects of the use of tmpl.js this relatively old framework, in fact, focus on separation and other decoupling problems, but also has a very obvious effect. Details can be found on this link: http://www.cnblogs.com/tdws/p/6024916.html.

In the initial design project, because of the relatively anxious and lack of overall consideration, there are many common modules are not presented separately and encapsulated. This time to give yourself a chance to start a vue, then take the initiative to the PC revision. In the package of the module, the function of Vue's components is mainly used. Component is one of the most powerful features of Vue.js. Components can extend HTML elements to encapsulate reusable code. At a higher level, the component is a custom element, and the compiler for Vue.js adds special functionality to it. In some cases, a component can also be the form of a native HTML element, extended with the IS feature--excerpted from the Vue document.

I support in the JS code, each block of code as far as possible to contain duplicate content, there are duplicates, you should take the appropriate way to public. Here is a section of my code to share, understand the idea is good.

This is the declaration of the component:

This is the invocation of the component:

You might ask, why I declare four prop, because I use different key names for incoming data from different interfaces. I need to manually assign each value to prop in the code.

And finally I found out that I have a lot of list structure is the same, the difference is the interface, and the fields used. So I processed one of the pages into Partialview (unfortunately it's not Vue related anymore).

Use the following methods to pass in each page-specific data and interface URL:

In Partialview, you can uniformly process incoming data from each page:

This achieves a relatively high degree of reuse.

Written in the last

In the use of Vue, the individual is still very concerned about data binding and the processing of the component. Its on the event binding, to my feelings on the label bound is a little confused feeling. The official argument, however, is that this approach reduces our DOM operations in the Vue code. For the use of Vue, it is very shallow at present.

In my upcoming PC-side version 2.0 will continue to use Vue, in this process, I will continue to share, if I share a bit to help you, please click on the red button below to follow my continuous output.

One page migration from JQ to Vuejs+partialview