Vue. JS is easier to learn than jQuery

Jiedao jdon 2021-05-04 09:27:59
vue. vue js easier learn


It is generally believed that jQuery Is suitable web Starting tool for beginners . Many people are even learning jQuery Before , They've learned some light weight JavaScript knowledge .

Why? ? Part of it is because jQuery The popularity of , But it's mainly a wrong idea from experienced developers : because jQuery It's simple. , So it's very simple for beginners .

jQuery Provides simplicity , No simplification

jQuery It really overcomes a lot of old browser problems . however , It's encapsulating DOM API and JavaScript Not much has been done in terms of complexity .

type $(‘#id’).click(function(event) {..}); It's really very brief , But you still need some background knowledge to write this code :DOM Node selection , Event handling , Callback and so on .

If you already understand DOM API and JavaScript,jQuery It's simple , But beginners are not easy to write .

Vue.js

Vue.js yes JavaScript The new kid in town . Its many advantages , Easy to learn may be the first . Simplicity has been built into its design .

I assert , Beginners can use VUE Build a normal Web application , And a better understanding of how they work , Especially compared to what they use jQuery Building the same thing .

Let's use it jQuery and vue.js Implement a very simple application , Look how light it is . This case program will calculate the number of clicks on a button , And display the number on the screen .

JQuery Realization

<div id="output"></div>
<button id="increment">Increment</button>
var counter = 0;
$(document).ready(function() {
var $output = $('#output');
$('#increment').click(function() {
counter++;
$output.html(counter);
});
$output.html(counter);
});
<p>

It looks simple , But considering that it's just because you're looking at it from an experienced developer's point of view . In fact, it's very difficult to understand how the code actually works . Think :

1. $(document).ready(function() { .. }); This is this 30 Four characters contain four tricky concepts :DOM Node selection 、 Event handling 、 File loading process and callback . If you don't learn all these things , So you don't understand the code you just wrote .

2. To choose one DOM The element implements the operation and completes the business , You need jQuery Constructors $('…'). Unfortunately , You're not sure what you're going to get , You need to use CSS3-like Selectors create an appropriate filter , Only when it is running can it be determined . Do that , You need to create one DOM Copy and simulate what your filter will do to it . When you write updates DOM Every method of , You have to update your DOM Copy and consider if your filter still works as expected .

3.JQuery There's only one pattern : choice jQuery Something , And then from API The way to do what you choose . The problem with the first mock exam is , We now have a flat 、 There are more than 100 A new way , from AJAX Iterate to array one dimension . It's impossible to distinguish between what they do and what they return just by using so many methods' name descriptions . It really takes good luck for a beginner to understand these methods of concatenation .

Use Vue.js Realization :

<div id="app">
<div>{{ counter }}</div>
<button v-on:click="increment">Increment</button>
</div>
new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
increment() {
this.counter++;
}
}
});
<p>

Vue It's solved before jQuery A lot of pain points :

1. Don't worry DOM Callback , This complexity has been encapsulated .Vue The life cycle hook will allow for more precise control , If it needs .

2. In data properties counter And it renders the output DOM There is an obvious link between nodes . No need for Psychology DOM, You can see it's guaranteed on the page , Updating the counter won't mess you up DOM In unexpected ways due to wobbling node selection . No longer need DOM Copy , You can see it on the web , Make sure that when you update the counter, you won't mess up your... In unexpected ways due to unreliable node selection DOM.

3. We don't have ambiguities API Methods need to find or remember . Different functions are well organized and layered in Vue In the constructor object , Or can be directly applied to the template through instructions DOM node , These instructions provide more understandable context .

therefore , If you already understand JavaScript and DOM API,jQuery It's easy . But this is not the case for beginners . therefore ,jQuery It's not simple , It's just a little simple .

On the other hand ,Vue Simple built-in to its design . Yes DOM API Many of the difficult parts are encapsulated . Beginners can quickly write code that they really understand , When they need to do something more complex ,Vue And they will be provided with .

So next time someone asks you , What they should learn as beginners of website developers , Maybe not jQuery.

Vue.js is easier to learn than jQuery – JS Dojo –

[ The quilt banq On 2016-10-30 16:31 A modified ]

版权声明
本文为[Jiedao jdon]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/05/20210504092615180s.html

  1. JS: event flow
  2. Front end performance optimization: rearrangement and redrawing
  3. JS - deep and shallow copy
  4. JavaScript异步编程3——Promise的链式使用
  5. JavaScript asynchronous programming 3 -- chain use of promise
  6. Vue.js组件的使用
  7. The use of vue.js component
  8. How to judge whether a linked list has links
  9. Element UI custom theme configuration
  10. Text image parallax effect HTML + CSS + JS
  11. Spring的nohttp宣言:消灭http://
  12. Vue3 intermediate guide - composition API
  13. Analysis of URL
  14. These 10 widgets that every developer must know
  15. Spring's nohttp Manifesto: eliminate http://
  16. Learn more about JS prototypes
  17. Refer to await to JS to write an await error handling
  18. A short article will directly let you understand what the event loop mechanism is
  19. Vue3 uses mitt for component communication
  20. Characteristics and thinking of ES6 symbol
  21. Two way linked list: I'm no longer one-way driving
  22. Vue event and form processing
  23. Reactive TraderCloud实时外汇开源交易平台
  24. Reactive tradercloud real time foreign exchange open source trading platform
  25. Node.js REST API的10个最佳实践
  26. Ten best practices of node.js rest API
  27. Fiddler advanced usage
  28. Process from Vue template to render
  29. Promise up (asynchronous or synchronous)
  30. Principle and implementation of promise
  31. Vs code plug in sharing - run code
  32. Vue practical notes (1) introduction of Ant Design
  33. Vue actual combat notes (2) introduction of element plus
  34. Introduction to webpack
  35. Webpack construction process
  36. Vue notes
  37. The experience and lessons of moving from ruby megalith architecture to go microservice
  38. Using leancloud to add artitalk module to hexo blog
  39. Implementation of chrome request filtering extension
  40. Detailed introduction of beer import declaration elements and label quarantine [import knowledge]
  41. Gallop workflow engine design series 01 process element design
  42. VUE移动端音乐APP学习【十六】:播放器歌词显示开发
  43. Vue Mobile Music App learning [16]: player lyrics display development
  44. jquery cookie
  45. jquery cookie
  46. 体面编码之JavaScript
  47. JavaScript for decent coding
  48. React17 系统精讲 结合TS打造旅游电商平台
  49. React17 system combined with TS to build tourism e-commerce platform
  50. 2021-05-04 hot news
  51. HttpSession对象与Cooike的关系 以及 Cookie对象构造函数问题
  52. gRPC-Web:替代REST的gRPC的Javascript库包
  53. The relationship between httpsession object and cooike and the construction of cookie object
  54. Grpc Web: a JavaScript library package to replace rest grpc
  55. Building reactive rest API with Java - kalpa Senanayake
  56. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  57. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  58. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  59. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  60. Vue.js比jQuery更容易学习