jquery vs. Vue

jquery vs. Vue

Foreword: Many people say Jquey and vue nothing comparable, should and angular,react to compare, I think they are not much comparable, are based on the idea of MVVM design framework, is not the same way of implementation, in different scenarios, there will be some differences in performance. But the shift from jquery to Vue, or to MVVM, is a thought-out shift from the original idea of direct manipulation of the DOM to operational data, isn't it a fundamental change?

1.jquery Introduction: Presumably everyone has used jquery bar, this once is still the most popular web front-end JS library, but now whether domestic or foreign his usage rate is gradually replaced by other JS libraries, With browser vendors adhering to the HTML5 specification and ECMA6 on the browser side, the usage of jquery will become lower

2.vue Description: Vue is a rising front-end JS library that is a streamlined mvvm. Technically speaking, Vue.js focuses on the ViewModel layer of the MVVM model. It connects the view layer and the Model layer through two-way data binding, which renders the page view by manipulating the data. There are, of course, many other mvmm frameworks, such as angular,react, that are similar in nature and are based on the MVVM concept. However, Vue has a simple, fast, combination, compact, powerful and rapid rise with his unique advantages.

3.vue and Jquey Contrast

jquery uses selectors ($) to select DOM objects, assign them, value them, event bindings, and so on, in fact, the difference between native HTML is that it is easier to select and manipulate Dom objects, and the data and interface are together. For example, you need to get the contents of a label tag: $("lable").val(); It depends on the value of the DOM element.

Vue uses the Vue object to completely separate the data from the view. Manipulating the data eliminates the need to reference the corresponding DOM object, so that the data and view are detached, and they are bound to each other through the Vue object, the VM. This is the legendary MVVM.

4. Illustrative examples

Scenario One: Add an element to the list, the code for Vue and jquery two operations, and we can see that vue just needs to push a piece of data into the data message to complete the operation of adding an Li tag, and jquery will need to get the DOM element node, and add a label to the DOM, if the DOM structure is particularly complex, or if the added elements are complex, the code becomes very complex and less readable

Vue:

<! DOCTYPE html>
Jquery:
<! DOCTYPE html>
Scene Two: Control button display hidden, for Vue and jquery Two operation code, we can see that Vue only need to control the property isshow value is true and false, and jquery still need to manipulate the DOM element control button display and hide
Vue:
 <! DOCTYPE html>
Jquery:
<! DOCTYPE html>
Output Result:
4. Summary: The content is relatively shallow, mainly to analyze the difference between Vue and Jquey, the above two examples just made a simple explanation, but Vue can solve the problem far more than these, more complex. 
Vue for scenarios: background pages for complex data operations, form fill pages
jquery applies to the scene: for example, some HTML5 animation page, some need JS to manipulate page style page
However, they can also be used together, Vue focuses on data binding, jquery focuses on style operations, animation effects, etc., will be more efficient to complete business needs
5. Attach the company front-end directory structure, interested can share the code to see you
The SRC code directory contains assets static files, components Vue component files, plugins plug-in files (including login operations, HTTP request operations, filters, decryption operations, public methods, etc.), router routing files, store Vuex files, App.js Vue related configuration, index.html main Page
The build directory is a Webpack package file, the Dist directory is a packaged file, and the external component Node_modules referenced
jquery vs. Vue