jquery和vue对比(二)
来源:互联网 发布:都市古玩淘宝赌石小说 编辑:程序博客网 时间:2024/05/24 06:12
<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); });
它看起来很简单,但考虑到这只是因为你是从经验丰富的开发人员角度看。其实理解代码实际所做的原理是相当棘手的。想想: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++; } } });
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。
- jquery和vue对比(二)
- jquery和vue对比
- jquery和vue对比
- vue和react对比
- Vue 和 React 简单对比
- Vue项目实战(二)- 引入JQuery等第三方库
- vue学习(二) vue生命周期 vue自定义指令和过滤器
- 使用Angularjs和Vue.js对比
- 使用Angularjs和Vue.js对比
- jQuery和Vue的区别
- jQuery和Vue的区别
- Vue使用指南(二)
- Vue框架(二)
- vue组件(二)
- VUE(二)
- (二) vue 传值
- JavaScript和JQuery初学对比
- js和jquery小对比
- Could not load the Tomcat server configuration at \Servers\Tomcat v8.0 Server at localhost-config
- OkHttp深入理解(5)CallServerInterceptor
- JAX-RS 和 和 Spring 整合开发
- java栈映射表
- powershell的安装使用
- jquery和vue对比(二)
- 自定义jquery插件基本形式
- 这是从云栖大会指挥部发回的现场报道
- 正确选择PDF转CAD软件官方下载能够免费使用
- 泛型与枚举
- Java 8 Consumer and Supplier
- C++ Re-Study
- git命令总结
- 总结线性表的几种主要存储结构