很多人说jquey和vue没有可比性，但是应该和Angular和React比较。我觉得它们没有太大的可比性，都是基于mvvm设计的框架，只是实现方法不同，在不同的场景下性能会有一些差异。但是，从jquery到vue或者mvvm的转换是一种思维的转变，就是把原来直接操作dom的思想转化为操作数据。难道不是根本性的改变吗？

1.jquery简介：我想大家都用过jquery，jquery曾经是现在仍然是最流行的web前端js库，但是现在它的使用率正在逐渐被国内外其他js库所取代。随着浏览器厂商对HTML5规范的统一遵从以及ECMA6在浏览器端的实现，jquery的使用率将越来越低

2.vue简介：VUE是一个崛起的前端js库，也是一个简化的MVVM。从技术上讲，Vue.js侧重于MVVM模型的ViewModel层。它通过双向数据绑定连接视图层和模型层，并且可以通过操作数据来呈现页面视图。当然，还有很多其他的mvmm框架，比如Angular和React，它们都是类似的，本质上都是基于MVVM的。然而，vue简单、快速、组合、紧凑、强大，并以其独特的优势迅速崛起

3.3.vue和jquey的比较

JQuery使用选择器($)选择DOM对象，并执行赋值、取值、事件绑定等操作。其实jQuery和原生HTML唯一的区别就是可以更方便的选择和操作DOM对象，数据和接口在一起。例如，您需要获取标签的内容：$(“标签”)。val()；它还取决于DOM元素的值。

Vue通过Vue对象将数据与视图完全分离。不再需要引用相应的DOM对象来操作数据。可以说数据和View是分离的，通过Vue对象相互绑定。这就是传说中的MVVM。

4.举例说明

场景1:向列表中添加一个元素。下图显示了vue和jquery的代码。我们可以看到，vue只需要将一段数据推送到数据消息中就可以完成添加li标签的操作，而jquery则需要获取dom元素节点，并将标签添加到dom中。如果dom结构特别复杂或者添加的元素非常复杂，那么代码将变得非常复杂，可读性很低

vue:

！DOCTYPE html html head meta http-equiv=' Content-type ' Content=' text/html；charset=utf-8 '/head body div id=' app ' ul！-根据数组数据自动呈现页面-Li v-for='邮件中的项' { item } }/Li/ulbutton @ click=' Add ' Add ' Add data/button/div/body script src=' http vue . js '/script script new vue({ El : ' # app '，data: {message: ['data 1 '，' data 2' ]，i:2}，Methods:{ //向数组中添加一段数据以添加33330message.push ('the' this。I' data')}} })/scriptjquery:

！DOCTYPE html html head meta http-equiv=' Content-type ' Content=' text/html；charset=utf-8 '/head body div id=' app ' ul id=' list ' lip 1st data/Li lip 2nd data/Li/ul button id=' add ' add data/button/div/body script src=' http :https://cdn . bootscs.com/jquery/3 . 2 . 1/jquery . min . js '/script script $(文档)。ready(function(){ var I=2；$('#add ')。单击(function(){ I；//手动添加标记$ ('# list ')。儿童(' li ')。最后()。追加(' liNo . 'i' data /li')}在通过dom操作的最后一个li元素之后；});/脚本

场景2:控制按钮的显示和隐藏。下图显示了vue和jquery的代码。我们可以看到vue只需要控制isShow的值为真和假，而jquery仍然需要操作dom元素控制按钮的显示和隐藏

vue:

！DOCTYPE html html head meta http-equiv=' Content-type ' Content=' text/html；charset=utf-8 '/head body div id=' app ' ul！-根据数组数据自动呈现页面-Li v-for='邮件中的项' { item } }/Li/ulbutton @ click=' add ' v-show=' is show ' add data/button button @ click=' show button ' hide button/button/div/Body script src=' http:https://unpkg.com/vue/dist/vue.js'/scriptscript new vue({ El : ' # app '，data: {message3360 ['data 1 '，' data 2' ]，i:2。IsShow : true}，methods : {//向数组中添加一段数据来添加：函数(){ this . I this . message . push(' the first ' this。I' data')}，//控制is show button :函数()的值{this。isshow=false } } })/scriptjquery:

！DOCTYPE html html head meta http-equiv=' Content-type ' Content=' text/html；charset=utf-8 '/head body div id=' app ' ul id=' list ' li1st data/Li li2nd data/Li/ul button id=' add ' add data/button button id=' show button ' hide button/button/div/body script src=' http :https://cdn . boot CSS.com/jquery/3 . 2 . 1/jquery . min . js '/script script $(文档)。ready(function(){ var I=2；$('#add ')。单击(function(){ I；//手动添加标记$ ('# list ')。儿童(' li ')。最后()。追加(' liNo . 'i' data /li')}在通过dom操作的最后一个li元素之后；//需要隐藏dom元素$ ('# showbutton ')。单击(function () {$ ('# add '))。手动隐藏()})}；/script输出结果：

4.总结：内容比较浅，主要分析vue和jquey的区别。以上两个例子只是一个简单的解释，但是vue能解决的问题远不止这些。

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

Jquery适合场景：比如一些html5动画页面，一些需要js来操作页面样式的页面。

但是，两者也可以一起使用。vue侧重于数据绑定，jquery侧重于样式操作、动画效果等。这将更高效地完成业务需求

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

Src代码目录包含资产静态文件、组件vue组件文件、插件插件插件文件(包括登录操作、http请求操作、过滤、加解密操作、公共方法等。)，路由器路由文件，store vuex文件，app.js vue相关配置，以及index.html主页

构建目录是webpack打包文件，dist目录是打包文件，外部组件由node_modules引用

以上是边肖介绍的jquery和vue的对比、详解和整合，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！