vue和jquery的对比

这一段时间在学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:

2.Vue:

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

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

原文地址:https://www.cnblogs.com/lmm1010/p/12353440.html

时间: 2024-10-10 10:15:23

vue和jquery的对比的相关文章

js与jQuery方法对比

CreateTime--2017年1月19日10:00:10Author:Marydonjavascript与jQuery方法对比jquery对象转dom对象 //方式一 $("#confirm")[0] //方式二 $("#confirm").get(0) //方式三 $("#confirm").eq(0)[0] var getObjectByJs = document.getElementById("test"); var

vue和jQuery嵌套实现异步ajax通信

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible&qu

vue 和 jquery混合使用

有时候只要想到要用的 vue.js 的时候就会惯性的想起用vue-cli手脚架搭建一个项目,但是有时候的业务场景并不适合用vue-cli手脚架,这个时候使用vue+jquery混合使用,把他们的优点结合起来使用会大大提升开发效率. 那么vue+jquery应该如何使用呢? 一.首先引入vue文件(cdn或者下载到本地都行),参考vue官方连接 https://cn.vuejs.org/v2/guide/installation.html 二.创建一个vue实例,因为每个vue应用都是通过创建一个

AngularJs 与Jquery的对比分析,超详细!

闲来无事,在网上发现了一篇对比AngularJs和Jquery的文章.恰好最近自己也在研究AngularJs.特此收藏.需要的朋友可以参考. 原问题:假如我熟悉利用jQuery去开发客户端应用,那么我怎么上手angularjs,能否描述下所需要的模式转变,下面这些问题能够帮助你给出一个回答: 1.在设计客户端web应用的时候有什么区别,最大的区别是什么? 2.我应该停止使用哪些技术,同时又使用哪些技术作为替代? 3.是否存在服务端需要考虑的东西或者说一些限制呢? 回答: 1.不要首先设计好你的页

vue与jquery合作

2017年2月26日 14:59:34 星期日 场景: jquery的$.post, $.get是$.ajax的封装, 是异步的 因此, 有肯能在初始化vue实例的时候, 异步请求的结果还没返回, 这就导致vue不能渲染dom 解决方法是: 1. 先初始化vue对象, 关键点是, 要把随后要用到的变量留空; 2. 再调用jquery远程请求接口, 重新赋值给vue 代码: 1 var vm = new Vue({ 2 el: '#addArticle', 3 data: { 4 cat_list

什么是Dojo?与Jquery宏观对比,结果如何?

Dojo能做什么?? 1.让开发者更容易地为 Web 页面添加动态能力,也可以在其它支持 JavaScript 的环境中使用 Dojo: 2.利用 Dojo 提供的组件,开发者可以提升 Web 应用程序的可用性和交互能力: 3.Dojo 很大程度上屏蔽了浏览器之间的差异性,因此,开发者可以不用担心 Web 页面是否在某些浏览器中可用: 4.通过 Dojo 提供的工具,您还可以为代码编写命令行式的单元测试代码. 5.Dojo 的打包工具可以帮助您优化 JavaScript 代码,并且只生成部署应用

vue 和 jquery 加载顺序导致的问题

问题描述:可能标题说明的比较含糊,需求是这样的,页面有个隐藏域,是通过标签从后台赋值的,使用vue绑定后,取不到值,也不知道怎么取值...后来一琢磨,启动顺序可以换一换,问题就这么解决了. 先放个vue的在线编辑网址:https://jsfiddle.net/chrisvfritz/50wL7mdz/ 测试的页面如下: <script src="https://unpkg.com/vue"></script> <script type="text

vue引入jquery

在vue中我们如何引入jquery 1.在package.json里面的dependencies 加入"jquery":"^3.2.1", 图示 2. 终端输入  npm install jquery --save-dev (注意:jquery 一定要小写 不然会提示  Please use 'jquery' (all lowercase)) 图示 3.找到build文件开始配置   build===>webpack.base.conf.js===>添加

Web圣堂幻术VUE 与 JQuery(持续更新)

跳转到文章结尾 VUE (这个也不想写,以后会更新) jQuery (具体是干什么的现在不想写,以后再说吧) 文章结尾的锚点 Web前端幻术 原文地址:https://www.cnblogs.com/Asterism-2012/p/10050598.html