前言：很多人说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:

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6. </head>
  7.  
  8. <body>
  9.     <div id="app">
  10.         <ul>
  11.             <!--根据数组数据自动渲染页面-->
  12.             <li v-for="item in message">{{item}}</li>
  13.         </ul>
  14.         <button @click="add">添加数据</button>
  15.     </div>
  16. </body>
  17.  
  18. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  19. <script>
  20.     new Vue({
  21.         el: '#app',
  22.         data: {
  23.             message: ["第1条数据","第2条数据"],
  24.             i:2
  25.         },
  26.         methods:{
  27.             //向数组添加一条数据即可
  28.             add:function(){
  29.                 this.i++
  30.                 this.message.push("第"+this.i+"条数据")
  31.             }
  32.         }
  33.     })
  34. </script>

jquery:

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6. </head>
  7.  
  8. <body>
  9.     <div id="app">
  10.         <ul id="list">
  11.             <li>第1条数据</li>
  12.             <li>第2条数据</li>
  13.         </ul>
  14.         <button id="add">添加数据</button>
  15.     </div>
  16.  
  17. </body>
  18.  
  19. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  20. <script>
  21.     $(document).ready(function() {
  22.     var i=2;
  23.     $('#add').click(function() {
  24.        i++;
  25.        //通过dom操作在最后一个li元素后手动添加一个标签
  26.       $("#list").children("li").last().append("<li>第"+i+"条数据</li>")
  27.     });
  28.   });
  29. </script>

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

vue:

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6. </head>
  7.  
  8. <body>
  9.     <div id="app">
  10.         <ul>
  11.             <!--根据数组数据自动渲染页面-->
  12.             <li v-for="item in message">{{item}}</li>
  13.         </ul>
  14.         <button @click="add" v-show="isShow">添加数据</button>
  15.         <button @click="showButton">隐藏按钮</button>
  16.     </div>
  17. </body>
  18.  
  19. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  20. <script>
  21.     new Vue({
  22.         el: '#app',
  23.         data: {
  24.             message: ["第1条数据","第2条数据"],
  25.             i:2,
  26.             isShow:true
  27.         },
  28.         methods:{
  29.             //向数组添加一条数据即可
  30.             add:function(){
  31.                 this.i++
  32.                 this.message.push("第"+this.i+"条数据")
  33.             },
  34.             //控制isShow的值即可
  35.             showButton:function(){
  36.                 this.isShow=false;
  37.             }
  38.         }
  39.     })
  40. </script>

jquery：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6. </head>
  7.  
  8. <body>
  9.     <div id="app">
  10.         <ul id="list">
  11.             <li>第1条数据</li>
  12.             <li>第2条数据</li>
  13.         </ul>
  14.         <button id="add">添加数据</button>
  15.         <button id="showButton">隐藏按钮</button>
  16.     </div>
  17.  
  18. </body>
  19.  
  20. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  21. <script>
  22.     $(document).ready(function() {
  23.     var i=2;
  24.     $('#add').click(function() {
  25.        i++;
  26.        //通过dom操作在最后一个li元素后手动添加一个标签
  27.       $("#list").children("li").last().append("<li>第"+i+"条数据</li>")
  28.     });
  29.     //需要手动隐藏dom元素
  30.     $("#showButton").click(function(){
  31.         $("#add").hide()
  32.     })
  33.   });
  34. </script>

输出结果：

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对比的更多相关文章

  1. php开发面试题---jquery和vue对比（整理）

    php开发面试题---jquery和vue对比(整理) 一.总结 一句话总结: jquery的本质是更方便的选取和操作DOM对象,vue的本质是数据和页面分离 反思的回顾非常有用,因为决定了我的方向和 ...

  2. vue对比其他框架详细介绍

    vue对比其他框架详细介绍 对比其他框架 — Vue.jshttps://cn.vuejs.org/v2/guide/comparison.html React React 和 Vue 有许多相似之处 ...

  3. jQuery到Vue的迁移之路

    背景 在前段时间做了L10的某个超复杂超多坑的三端专题之后,组里的小伙伴们一致认为是时候想办法统一一下组里的开发模式了.因为用nie那一套jQuery/zepto(下文jQuery默认包括zepto) ...

  4. python工业互联网应用实战18—前后端分离模式之jquery vs vue

    前面我们分三章来说明了使用django template与jquery的差别,通过jquery如何来实现前后端的分离,同时再9章节使用vue.js 我们浅尝辄止的介绍了JQuery到vue的切换,由于 ...

  5. jQuery和Vue的区别

    1.jQuery和Vue的区别 jQuery是使用选择器($)选取DOM对象,对其进行赋值.取值.事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起 ...

  6. js与jQuery实现方式对比汇总

      CreateTime--2016年12月16日09:11:23Author:Marydonjs与jQuery实现方式对比汇总 <div id="ListContainer" ...

  7. jQuery与Vue的区别、从jQuery到Vue框架优点总结

    一.两者的区别 1.数据与视图分离 2.数据驱动视图 二.从jQuery到Vue框架的总结 1.数据与视图分离,解耦 2.数据驱动视图,只关心数据,DOM操作已经被框架封装

  8. 学习js、jquery、vue实现部分组件

    通过js实现radio小组件,最终效果如下 html代码: <!DOCTYPE html> <html lang="en"> <head> &l ...

  9. jQuery和Vue的技术优劣对比

    1.精力集中. Jq偏重于对dom的操作,由它的函数就很容易看出来,$().parent().find().我们用jq的时候经常要去考虑怎么去渲染数据,怎么从视图中取到数据,操作数据前必须对dom节点 ...

随机推荐

  1. MySQL flashback 功能

    1. 简介 mysqlbinlog flashback(闪回)用于快速恢复由于误操作丢失的数据.在DBA误操作时,可以把数据库恢复到以前某个时间点(或者说某个binlog的某个pos).比如忘了带wh ...

  2. asp.net SignalR 一对一聊天

    <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script src="~/S ...

  3. Ubuntu 重装 mysql

    我另篇blog有提到修改完my.cnf文件后mysql server重新启动失败,就是说mysql server启动不起来了,于是我就想到重装再试试,没想到就好了. 重装mysql之前需要卸载干净,删 ...

  4. HDU 5558 后缀数组+二分

    题意有一些绕,但其实就是对于不断变化的i,求以j(0=j<i)使得suffix[j]与suffix[i]的最长公共前缀最长,如果有多个j,则取最小的j. 可以在rank数组中二分,在1-rank ...

  5. Spring事务管理的实现方式之编程式事务与声明式事务详解

    原创说明:本博文为原创作品,绝非他处转载,转载请联系博主 1.上篇文章讲解了Spring事务的传播级别与隔离级别,以及分布式事务的简单配置,点击回看上篇文章 2.编程式事务:编码方式实现事务管理(代码 ...

  6. Vmware Vsphere WebService之vijava 开发一-vcenter连接、及集群信息获取

    开始是通过java代码调用vsphere提供的原始接口,从而控制vcenter的操作.当第一个版本做完之后发现代码执行的速度特别慢,后来在网上看到有人用vijava(对vsphere原始接口封装)编程 ...

  7. 开始奇妙的DP之旅

    铭记各位大佬教导,开始看一些很迷的动态规划,那就从比较典型的01背包开始吧,想想还是从比较简单的导弹拦截开始吧,说简单都是骗人的,还是看采药吧. 一.动态规划 刚听到动态规划这个东西,据HLT大佬所言 ...

  8. [Git]07 如何在提交过程中忽略某些文件

     一般我们总会有些文件无需纳入 Git 的管理,也不希望它们总出现在未跟踪文件列表.通常都是些自动生成的文件,比如日志文件,或者编译过程中创建的临时文件等.我们可以创建一个名为 .gitignor ...

  9. Python生产环境部署（fastcgi,uwsgi）

    Python部署web开发程序的几种方法 fastcgi ,通过flup模块来支持,在nginx里对应的配置指令是 fastcgi_pass http,nginx使用proxy_pass转发,这个要求 ...

  10. C++模板学习：函数模板、结构体模板、类模板

    C++模板:函数.结构体.类 模板实现 1.前言:(知道有模板这回事的童鞋请忽视) 普通函数.函数重载.模板函数 认识. //学过c的童鞋们一定都写过函数sum吧,当时是这样写的: int sum(i ...