vue和jquery的对比

89463661 2020-02-23

  这一段时间在学vue,也被称为前端框架的三马车之一,是一套用于构建用户界面的渐进式框架,也是入门难度最低的一种框架。今天将vue和之前学的jquery来对比一下。

  1. Jquery介绍:jquery是一个快速的,简洁的JavaScript框架,于2006年由John Resig发布,倡导的是写更少的代码,去做更多的事。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。简而言之,jquery就是一个JavaScript数据库,它里面封装了很多我们常用的dom操作,我们在使用jquery的时候只要引入jquery的cdn或类库就可以使用。像我们快速获取文档元素,页面的动态效果和ajax的无刷新页面的操作jquery都可以快速实现。
  2. Vue介绍:Vue是一套用于构建用户界面的渐进式框架,是由我们中国的开发者尤玉溪一个人开发出来的,与其他大型框架不同的是Vue被设计为可以自底向上逐层应用,是一个新兴的前端js库,是一个精简的MVVM,Vue.js专注于MVVM模型的ViewModel层,它采用了虚拟dom,运行效率高,并且采用了组件化开发 ,开发效率高 ,Vue将开发者的精力从dom操作解放出来,转移到数据库上,所谓虚拟dom就是内存中的一个对象,该对象有一个特点就是和dom有相同的结构,但他仅仅修改内存中的数据,所以消耗的资源远远小于dom操作。

对比:jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,和原生的HTML的区别只是在于可以更方便的选取和操作dom对象,并且数据和界面是在一起的,举个小例子,需要获得input中内容:$(“input”).val(),还是要依赖DOM元素的值。

而Vue则是和通过Vue对象将数据和View完全分离开来,对数据进行操作不在需要引入响应的DOM对象,可以说数据和View是分离开来的,通过Vue对象用vm去进行双向绑定。

举两个小例子:
1.jquery:

vue和jquery的对比

2.Vue:

vue和jquery的对比

 我们可以很明显的看到jquery还是需要获取dom元素节点,并对dom元素节点进行了一个写入的操作,如果dom结构很复杂,代码会变得非常复杂,并且可读性低,而vue中,只需要获取data,并在data中写入数据即可完成写入操作,代码结构一目了然。

总结:这只是两个很简单的例子,Vue还能解决更多更复杂的问题,我们可以根据不同的场合去选择使用,像vue更适合去操作一些复杂数据的后台页面,而一些需要js来操作页面样式的页面,我们用jquery会更适用一些。

相关推荐

Web全栈笔记 / 0评论 2020-06-15