ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端浅谈 Vue 和 jQuery 的区别

2021-11-19 14:32:23  阅读:102  来源: 互联网

标签:jQuery function Vue 浅谈 DOM 添加 数据


很多人说 Vue 和 jQuery 没有什么可比性,应该和 Angular、React 来比吧,我倒觉得它们之间没有多大的可比性,因为都是基于MVVM思想设计的框架,无非就是实现方式不一样,在不同场景下性能上会有一些差异。然而从 jQuery 到 Vue 或者说是到MVVM的转变则是一个思想的转变,是将原有的直接操作DOM的思想转变成操作数据的思想,这难道不是一个根本性的改变吗?

 

首先介绍一下这两个框架。

jQuery:这个曾经是最流行的Web前端JS库,即使是现在依然有很多人在使用,可是现在无论是国内还是国外它的使用率正在渐渐的被其他JS框架所代替,随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的支持实现,相信 jQuery 的使用率会越来越低。

Vue:是一个近两年兴起的前端JS库,它是一个精简的MVVM。从技术角度讲,Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来,通过对数据的操作就可以完成对页面视图的渲染。当然还有很多其他的MVVM框架如Angular、React都是大同小异,本质上都是基于MVVM的理念。 然而 Vue 以他独特的优势——简单、快速、组合、紧凑、强大而迅速崛起。

 

jQuery 和 Vue 的对比分析:

jQuery 是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面通常是混在一起的。比如需要获取<label>标签的内容:$("lable").val(); ,它还是依赖DOM元素的值。

Vue 则是通过 Vue 对象将数据和 View 完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,可以说数据和 View 是分离的,它们通过 Vue 对象这个 VM 实现相互的绑定。这就是传说中的MVVM模式了。

 

以下举例说明一下:

场景一:向列表中添加一个元素,以下为 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>

 

场景二:控制按钮的显示隐藏,下面为 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>

 

总结:

    上面内容讲得都比较浅,主要就是分析 Vue 和 jQuey 的基本区别。以上两个例子只是做一个简单的说明,然而 Vue 能解决的问题远比这些要多的多,复杂的多。

    Vue适用的场景:操作复杂数据的后台页面,表单填写页面等等。

    jQuery适用的场景:比如说一些 HTML5 的动画页面,一些需要JS来操作页面样式的页面等等。

    然而两者也是可以结合起来一起使用的,Vue 侧重数据绑定,jQuery侧重样式操作、动画效果等,两者结合起来使用则会更加高效的完成业务需求

标签:jQuery,function,Vue,浅谈,DOM,添加,数据
来源: https://www.cnblogs.com/aixuexi666888/p/15577115.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有