详解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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery返回定位插件详解
May 15 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 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
CodeIgniter中实现泛域名解析
2014/07/19 PHP
php中的ini配置原理详解
2014/10/14 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
javascript实现数独解法
2015/03/14 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
python处理圆角图片、圆形图片的例子
2014/04/25 Python
跟老齐学Python之类的细节
2014/10/13 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
python如何重载模块实例解析
2018/01/25 Python
全面分析Python的优点和缺点
2018/02/07 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
python实现连连看游戏
2020/02/14 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
常用的HTML5列表标签
2017/06/20 HTML / CSS
浙江文明网签名寄语
2014/01/18 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
管理失职检讨书范文
2015/05/05 职场文书
请假条应该怎么写?
2019/06/24 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
用golang如何替换某个文件中的字符串
2021/04/25 Golang
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers