当前位置: 开发笔记 > 前端 > 正文

详解jquery和vue对比

作者：斯高一耐 | 来源：互联网 | 2022-06-20 13:30

前言：很多人说jquey和vue没有什么可比的，应该和Angular，React来比吧，我到觉得他们倒没有多大的可比性，都是基于mvvm思想

前言：很多人说jquey和vue没有什么可比的，应该和Angular，React来比吧，我到觉得他们倒没有多大的可比性，都是基于mvvm思想设计的框架，无非就是实现的方式不一样，在不同场景下性能上会有一些差异。然而从jquery到vue或者说是到mvvm的转变则是一个思想想的转变，是将原有的直接操作dom的思想转变到操作数据上去，难道不是一个根本性的改变吗？

1.jquery介绍：想必大家都用过jquery吧，这个曾经也是现在依然最流行的web前端js库，可是现在无论是国内还是国外他的使用率正在渐渐被其他的js库所代替，随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的实现，jquery的使用率将会越来越低

2.vue介绍：vue是一个兴起的前端js库，是一个精简的MVVM。从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。当然还有很多其他的mvmm框架如Angular，React都是大同小异，本质上都是基于MVVM的理念。然而vue以他独特的优势简单，快速，组合，紧凑，强大而迅速崛起

3.vue和jquey对比

jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

4.举例说明

场景一：列表添加一个元素,下图为vue和jquery两种操作的代码，我们从中可以看出vue只需要向数据message里面push一条数据即可完成添加一个li标签的操作，而jquery则需要获取dom元素节点，并对dom进行添加一个标签的操作，如果dom结构特别复杂，或者添加的元素非常复杂，则代码会变得非常复杂且阅读性低

vue:

{{item}}

场景二：控制按钮的显示隐藏，下图为vue和jquery两种操作的代码，我们从中可以看出vue只需要控制属性isShow的值为true和false即可，而jquery则还是需要操作dom元素控制按钮的显示和隐藏

vue:

{{item}}

4.总结：内容讲的比较浅，主要就是分析一下vue和jquey对比的区别，上面两个例子只是做了一个简单的说明，然而vue能解决的问题远比这些要多的多，复杂的多。

vue适用的场景：复杂数据操作的后台页面，表单填写页面

jquery适用的场景：比如说一些html5的动画页面，一些需要js来操作页面样式的页面

然而二者也是可以结合起来一起使用的，vue侧重数据绑定，jquery侧重样式操作，动画效果等，则会更加高效率的完成业务需求

5. 附上公司前端目录结构，感兴趣的可以分享代码给大家看看

src代码目录包含assets静态文件，components vue组件文件，plugins 插件文件（包含登录操作，http请求操作，过滤器，加解密操作，公共方法等），router 路由文件，store vuex文件，app.js vue相关配置，index.html主页面

build目录为webpack打包文件，dist目录为打包后生成的文件，node_modules 引用的外部组件

以上所述是小编给大家介绍的jquery和vue对比详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

推荐阅读

ssh
Java远程教学系统毕业设计：源代码、MySQL数据库及文档

本文介绍了Java语言开发的远程教学系统，包括源代码、MySQL数据库配置以及相关文档，适用于计算机专业的毕业设计。系统支持远程调试，采用B/S架构，适合现代教育需求。 ... [详细]

蜡笔小新 2024-12-17 05:12:29
bootstrap
基于jQuery的用户注册页面表单验证代码分享

本文介绍了一段使用jQuery实现的用户注册页面表单验证代码，适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript，确保用户输入的数据格式正确。 ... [详细]

蜡笔小新 2024-12-24 14:37:46
scroll
实现页面自动加载更多内容功能：类微博和Pinterest的设计

在现代Web应用中，当用户滚动到页面底部时，自动加载更多内容的功能变得越来越普遍。这种无刷新加载技术不仅提升了用户体验，还优化了页面性能。本文将探讨如何实现这一功能，并介绍一些实际应用案例。 ... [详细]

蜡笔小新 2024-12-23 17:01:04
scroll
基于JQuery实现的评分插件

本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时，左侧的星星会变为实心，右侧保持空心，并显示对应的评分等级；移开鼠标后，所有星星恢复为空心状态。 ... [详细]

蜡笔小新 2024-12-23 10:09:44
button
深入理解Vue.js：从入门到精通

本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例，帮助开发者全面掌握这一流行的前端框架。 ... [详细]

蜡笔小新 2024-12-22 11:07:54
button
如何在Kendo UI for jQuery中将行标题显示为可点击链接

本文详细介绍了如何在Kendo UI for jQuery的数据管理组件中，将行标题字段呈现为锚点（即可点击链接），帮助开发人员更高效地实现这一功能。通过具体的代码示例和解释，即使是新手也能轻松掌握。 ... [详细]

蜡笔小新 2024-12-21 17:07:41
bootstrap
Spring Boot 中静态资源映射详解

本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理，包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文，您将了解如何高效地管理和引用静态资源。 ... [详细]

蜡笔小新 2024-12-20 20:02:31
hover
HTML 文件上传按钮的样式设计

本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化，使用户界面更加友好和美观。 ... [详细]

蜡笔小新 2024-12-20 18:30:59
vue.js
计算机毕业设计ssm西石大头条

最新计算机专业原创毕业设计参考选题都有源码+数据库是近期作品ling取参考你的选题刚好在下面有,有时间看到机会给您发1ssm资源循环利用2springboot校园考勤系统3ssm防 ... [详细]

蜡笔小新 2024-12-19 11:39:56
button
交互式左右滑动导航菜单设计

本文介绍了一种使用HTML和JavaScript实现的左右可点击滑动导航菜单的方法，适用于需要展示多个链接或项目的网页布局。 ... [详细]

蜡笔小新 2024-12-18 17:56:15
上传
JavaScript前端开发中常用的四种继承方法详解

本文深入探讨了JavaScript中实现继承的四种常见方法，包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说，理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]

蜡笔小新 2024-12-18 11:08:28
上传
MyBatis 动态 SQL 详解与应用

本文深入探讨 MyBatis 中动态 SQL 的使用方法，包括 if/where、trim 自定义字符串截取规则、choose 分支选择、封装查询和修改条件的 where/set 标签、批量处理的 foreach 标签以及内置参数和 bind 的用法。 ... [详细]

蜡笔小新 2024-12-27 16:20:10
console
使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表

本文介绍了一段通用代码示例，该代码不仅能够操作 Azure Active Directory (AAD)，还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级：AAD 和 Subscription。 ... [详细]

蜡笔小新 2024-12-27 16:07:12
button
分页插件3指定到某一页

前言--页数多了以后需要指定到某一页（只做了功能，样式没有细调）html ... [详细]

蜡笔小新 2024-12-27 15:19:01
button
2023年全球运营商网络设备市场预计突破202亿美元

尽管某些细分市场如WAN优化表现不佳，但全球运营商路由器和交换机市场持续增长。根据最新研究，该市场预计在2023年达到202亿美元的规模。 ... [详细]

蜡笔小新 2024-12-27 12:44:44

斯高一耐

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章