详解jquery和vue对比


Posted in jQuery onApril 16, 2019

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

<!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 in message">{{item}}</li>
    </ul>
    <button @click="add">添加数据</button>
  </div>
</body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: ["第1条数据","第2条数据"],
      i:2
    },
    methods:{
      //向数组添加一条数据即可
      add:function(){
        this.i++
        this.message.push("第"+this.i+"条数据")
      }
    }
  })
</script>

jquery:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>

<body>
  <div id="app">
    <ul id="list">
      <li>第1条数据</li>
      <li>第2条数据</li>
    </ul>
    <button id="add">添加数据</button>
  </div>

</body>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
  var i=2;
  $('#add').click(function() { 
    i++; 
    //通过dom操作在最后一个li元素后手动添加一个标签
   $("#list").children("li").last().append("<li>第"+i+"条数据</li>")
  }); 
 }); 
</script>

详解jquery和vue对比

场景二:控制按钮的显示隐藏,下图为vue和jquery两种操作的代码,我们从中可以看出vue只需要控制属性isShow的值为true和false即可,而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 in message">{{item}}</li>
    </ul>
    <button @click="add" v-show="isShow">添加数据</button>
    <button @click="showButton">隐藏按钮</button>
  </div>
</body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: ["第1条数据","第2条数据"],
      i:2,
      isShow:true
    },
    methods:{
      //向数组添加一条数据即可
      add:function(){
        this.i++
        this.message.push("第"+this.i+"条数据")
      },
      //控制isShow的值即可
      showButton:function(){
        this.isShow=false;
      }
    }
  })
</script>

 jquery:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>

<body>
  <div id="app">
    <ul id="list">
      <li>第1条数据</li>
      <li>第2条数据</li>
    </ul>
    <button id="add">添加数据</button>
    <button id="showButton">隐藏按钮</button>
  </div>

</body>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
  var i=2;
  $('#add').click(function() { 
    i++; 
    //通过dom操作在最后一个li元素后手动添加一个标签
   $("#list").children("li").last().append("<li>第"+i+"条数据</li>")
  }); 
  //需要手动隐藏dom元素
  $("#showButton").click(function(){
    $("#add").hide()
  })
 }); 
</script>

 输出结果:

详解jquery和vue对比

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主页面

详解jquery和vue对比

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

详解jquery和vue对比

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

jQuery 相关文章推荐
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 #jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 #jQuery
详解JQuery基础动画操作
Apr 12 #jQuery
详解jQuery设置内容和属性
Apr 11 #jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 #jQuery
jQuery中实现text()的方法
Apr 04 #jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 #jQuery
You might like
融入意大利的咖啡文化
2021/03/03 咖啡文化
PHP系统流量分析的程序
2006/10/09 PHP
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
动态添加js事件实现代码
2009/03/12 Javascript
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
浅谈Python 对象内存占用
2016/07/15 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
python实现控制COM口的示例
2019/07/03 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
视图的作用
2014/12/19 面试题
资产经营总监岗位职责范文
2013/12/01 职场文书
上班看电影检讨书
2014/02/12 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
班主任寄语2015
2015/02/26 职场文书
防汛通知
2015/04/25 职场文书
工程进度款催款函
2015/06/24 职场文书
开学第一周值周总结
2015/07/16 职场文书
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android