详解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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 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
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php中动态修改ini配置
2014/10/14 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
php-app开发接口加密详解
2018/04/18 PHP
表单元素事件 (Form Element Events)
2009/07/17 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
用JQuery调用Session的实现代码
2010/10/29 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
JSON 数据格式详解
2017/09/13 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
python实现批量改文件名称的方法
2015/05/25 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
Python 控制终端输出文字的实例
2019/07/12 Python
python与js主要区别点总结
2020/09/13 Python
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
2013年军训通讯稿
2014/02/05 职场文书
安全承诺书范文
2014/03/26 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
党员个人承诺书
2015/04/27 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL