详解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中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
如何基于jQuery实现五角星评分
Sep 02 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中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
jQuery实现长文字部分显示代码
2013/05/13 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
耐克美国官网:Nike.com
2016/08/01 全球购物
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
迟到检讨书400字
2014/01/13 职场文书
总经理岗位职责范本
2014/02/02 职场文书
干部个人对照检查材料
2014/08/25 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
沈阳故宫导游词
2015/01/31 职场文书
高一军训感想
2015/08/07 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers