Vue.js is better at learning than jquery.

It is generally accepted that jquery is considered a good entry point for novice web programmers, and even many programmers learn jquery first and then learn native JavaScript.

Why is it? First, because jquery is very popular, but more importantly, experienced programmers think that jquery is very simple, empathy, for the novice, of course, it should be very simple, but this is not true.

jquery is concise, but not simple.

jquery can definitely help you get rid of the hassles of many old browsers (such as the various compatibility issues), but it doesn't help to simplify DOM API operations and encapsulate JavaScript changes.

Of course, for knocking $ (' #id '). Click (Function (Event) {.}); This code is definitely more concise than the native JavaScript. But some knowledge you have to master, such as Dom selectors, event handling, callback functions, etc., or you can not write the above code.

jquery allows you to write code more simply if you understand the DOM API and JavaScript, but it's not easy for newbies.

Vue.js

Vue.js is the favorite of the JavaScript world, and I can almost say it's the best thing to learn. The way of simplicity, into which.

I firmly believe that when a novice uses vue.js to write a simple application, he will have a better understanding of how the code works than he does with jquery (writing the same app).

So, let's work together, using Vue.js and jquery to write an identical simple application to see that better understanding. The app calculates the number of click buttons and displays them.

Write with jquery

Here is a typical example written using jquery:

<div id="output"></div><button id="increment">Increment</button>

<script>var counter=0;$(document).Ready(function(){var $output=$(' #output ');$(' #increment ').Click(function({counter++. Html}) html (Counter}) ;</script>     

It looks pretty simple, but it's only because you're an experienced programmer. If you want to figure out how the code works, it is quite complicated, do not believe you see:

1. When programming with jquery, the first entry in the script is $ (document). Ready (function () {.}); 。 In these 30 or so letters of code, if you don't know one of these four concepts, you must be uncomfortable and don't understand why the code works. 1.DOM node Selector. 2. Event handling. 3. Document loading process. 4. callback function.

2. When you need to select a DOM element, you want to use JQuery's constructor $ (' ... '). Unfortunately you cannot point out exactly what node you are getting, you need to use a filter like the CSS3 selector to ensure that your code runs (the DOM node you get) is what you want. To get the job done, you need to simulate the DOM node in your mind and simulate what happens when you choose from a selector. When you write any method to update the DOM element, you also need to simulate in your mind how the node updates, and make sure that the selector will work as expected.

3. Because of some considerations, jquery can use only one pattern: select something and manipulate the selected object through the API method. But there are problems with this pattern. jquery has more than 100 ways to deal with different business scenarios, such as dealing with Ajax, array traversal, etc., but these APIs are one-dimensional plane (the translator note: The API name of the Spit slot jquery is too concise, not layered), The names of these methods cannot be used at a glance to see its purpose and its return value. Good luck to the novices, and hopefully they will understand how these methods are going to be used.

Write using Vue.js

The following is a typical example written using vue.js:

<div ID=> <div>{ {counter }}< Span class= "token operator" ></div> <button V-on:click=" increment ">increment</button> </div>   

<script>NewVue({El:' #app ', the data{counter: Span class= "token number" >0 } Methods: {increment ({ This.counter++ Span class= "token punctuation" > } }" ; </script>       

Vue.js solves many of the pain points of the above jquery:

1. You do not need to consider the loading of a document before you can execute a callback function, where various complexities have been vue.js hidden. If you need a finer-grained operation, you can use the corresponding hooks provided by the Vue.js life cycle function.

2. The counter in the Data property is associated with the DOM node (the translator notes: Data Driven), and the DOM node is re-rendered when counter changes. No longer need to remember Dom in your head (when you click the button) you will be sure that the counter in the page will be updated without error, without worrying about the inexplicable error caused by using the unreliable (jQuery) selector.

3. We don't need to find or recall those ambiguous API methods. In Vue.js's constructed object, different functions are organized hierarchically, at a glance, or given more context through directives, to better understand how DOM nodes work in a template.

Too much wordy, summed up as follows:

If you're familiar with native JavaScript and DOM API operations, jquery is really easier. But this is not possible for beginners. jquery is concise, but not simple.

On the other hand, Vue, the simplicity of the Tao, into which. Many of the difficult parts of the DOM API are encapsulated. Novices can write code that they can really understand, and Vue supports it when they want to write more complex code.

So the next time someone asks you what a novice web programmer should learn, jquery is not necessarily a good answer.

Vue.js is better at learning than jquery.