Vue.js比jQuery更容易学习

解道jdon 2021-05-04 09:26:26
vue JS Jquery Vue.js 容易


普遍认为jQuery是适合web初学者的起步工具。许多人甚至在学习jQuery之前,他们已经学习了一些轻量JavaScript知识。

为什么?部分是因为jQuery的流行,但主要是源于经验开发人员的一个错误的理念:因为jQuery是简单的,所以对于初学者也很简单适合。

jQuery提供了简洁,不简化

jQuery确实克服了很多旧浏览器问题。但是,它在封装DOM API和JavaScript的复杂性上并没有做太多。

键入 $(‘#id’).click(function(event) {..}); 确实非常简短,但是你还是需要了解一些背景知识才能写这些代码:DOM节点选择,事件处理,回调等等。

如果你已经理解了DOM API和JavaScript,jQuery是简单,但初学者不容易编写。

Vue.js

Vue.js是JavaScript镇上新来的小子。它的许多优势,易于学习可能是第一。简单已经内建于它的设计。

我断言,初学者可以用VUE建立平常Web应用,并对他们如何工作了解得更清楚,特别是相比于他们使用jQuery构建一样的东西。

让我们用jQuery和vue.js实施一个非常简单的应用程序,看看它是多么轻量。这个案例程序将计算一个按钮被点击的次数,并在屏幕上显示这个数字。

JQuery实现

<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>

它看起来很简单,但考虑到这只是因为你是从经验丰富的开发人员角度看。其实理解代码实际所做的原理是相当棘手的。想想:

1. $(document).ready(function() { .. });这这30个字符包含四个棘手的概念:DOM节点的选择、事件处理、文件的加载过程和回调。如果你没有学会所有这些东西,那么你不明白你刚才写的代码。

2.要选择一个DOM元素实现操作并完成业务,你需要jQuery构造器$('…')。不幸的是,你不能确定到底你会得到什么节点,你需要使用CSS3-like选择器创建一个合适的过滤器,运行时才能确定。要做到这一点,你需要创建一个DOM复制和模拟运行你的滤波器会对它做些什么。当你编写更新DOM的每个方法时,你必须同样地更新你的DOM复制和考虑如果你的过滤器仍然如预期一样正常工作。

3.JQuery只有一个模式:选择jQuery某样事情,然后从API的方法做你选择的事情。这一模式的问题是,我们现在有一个扁平的、有超过100个的方法,从AJAX到数组一维迭代。仅仅使用这么多方法的名称描述就能足以区分他们所做的和他们的返回的是不可能的。一个初学者理解这些串联在一起的方法是真的需要好运。

使用Vue.js实现:

<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已经解决了之前jQuery很多痛点:

1.无需担心DOM回调,这种复杂性已经被封装。Vue的生命周期挂钩将允许更精确的控制,如果它需要。

2.在数据属性counter和它渲染输出DOM节点之间有一个明显的之间的链接。无需心理DOM,你可以看到它在网页上有保证,更新计数器不会弄乱你的DOM以意想不到的方式由于摇晃的节点选择。不再需要DOM复制,你可以看到它在网页上,保证更新计数器时不会由于靠不住的节点选择以意想不到的方式弄乱你的DOM。

3.我们没有模棱两可的API方法需要查找或记住。不同的功能被很好的组织和分层在Vue构造函数对象中,或能通过指令直接应用到模板中的DOM节点,这些指令提供更多的易于理解的上下文。

因此,如果你已经理解JavaScript和DOM API,jQuery是容易。但这不是初学者的情况。因此,jQuery是不简单的,只是略微简单。

另一方面,Vue简单内建到它的设计。对DOM API许多困难的部分进行了封装。初学者因此可以很快编写他们真正理解的代码,当他们需要做更复杂的东西,Vue也会提供给他们。

所以下次有人问你,什么是他们作为一个网站开发人员初学者应该学会的,也许并不是jQuery。

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

[该贴被banq于2016-10-30 16:31修改过]

版权声明
本文为[解道jdon]所创,转载请带上原文链接,感谢
https://www.jdon.com/48497

  1. 21. Object oriented foundation "problems and solutions of object traversal"
  2. Discussion on hot micro front end: Google AdWords is a real micro front end
  3. Usecallback and usememo for real performance optimization
  4. 【前端圭臬】十一:从规范看 JavaScript 执行上下文(下)
  5. [front end standard] 11: Javascript execution context from the perspective of specification (2)
  6. Hexagonal六角形架构ReactJS的实现方式 - Janos Pasztor
  7. Transaction of spring's reactive / imperative relational database
  8. The implementation of hexagonal hexagonal reactjs Janos pasztor
  9. HTTP状态码:402 Payment Required需要付款 - mozilla
  10. HTTP status code: 402 payment required - Mozilla
  11. Factory mode, constructor mode and prototype mode
  12. Build the scaffold of react project from scratch (Series 1: encapsulating a request method with cache function based on Axios)
  13. Cocos Quick Start Guide
  14. Comparison of three default configurations of webpack5 modes
  15. A case study of the combination of flutter WebView and Vue
  16. CSS: BFC and IFC
  17. A common error report and solution in Vue combat
  18. JS: this point
  19. JS: prototype chain
  20. JavaScript series -- promise, generator, async and await
  21. JS: event flow
  22. Front end performance optimization: rearrangement and redrawing
  23. JS - deep and shallow copy
  24. JavaScript异步编程3——Promise的链式使用
  25. JavaScript asynchronous programming 3 -- chain use of promise
  26. Vue.js组件的使用
  27. The use of vue.js component
  28. How to judge whether a linked list has links
  29. Element UI custom theme configuration
  30. Text image parallax effect HTML + CSS + JS
  31. Spring的nohttp宣言:消灭http://
  32. Vue3 intermediate guide - composition API
  33. Analysis of URL
  34. These 10 widgets that every developer must know
  35. Spring's nohttp Manifesto: eliminate http://
  36. Learn more about JS prototypes
  37. Refer to await to JS to write an await error handling
  38. A short article will directly let you understand what the event loop mechanism is
  39. Vue3 uses mitt for component communication
  40. Characteristics and thinking of ES6 symbol
  41. Two way linked list: I'm no longer one-way driving
  42. Vue event and form processing
  43. Reactive TraderCloud实时外汇开源交易平台
  44. Reactive tradercloud real time foreign exchange open source trading platform
  45. Node.js REST API的10个最佳实践
  46. Ten best practices of node.js rest API
  47. Fiddler advanced usage
  48. Process from Vue template to render
  49. Promise up (asynchronous or synchronous)
  50. Principle and implementation of promise
  51. Vs code plug in sharing - run code
  52. Vue practical notes (1) introduction of Ant Design
  53. Vue actual combat notes (2) introduction of element plus
  54. Introduction to webpack
  55. Webpack construction process
  56. Vue notes
  57. The experience and lessons of moving from ruby megalith architecture to go microservice
  58. Using leancloud to add artitalk module to hexo blog
  59. Implementation of chrome request filtering extension
  60. Detailed introduction of beer import declaration elements and label quarantine [import knowledge]