jquery和vue对比实例分析-js教程-PHP中文网

首页

web前端

js教程

jquery和vue对比实例分析

小云云

Mar 05, 2018 pm 05:00 PM

jquery 实例分析对比

很多人说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>
    <p id="app">
        <ul>
            <!--根据数组数据自动渲染页面-->
            <li v-for="item in message">{{item}}</li>
        </ul>
        <button @click="add">添加数据</button>
    </p></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>
    <p id="app">
        <ul id="list">
            <li>第1条数据</li>
            <li>第2条数据</li>
        </ul>
        <button id="add">添加数据</button>
    </p></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>
    <p id="app">
        <ul>
            <!--根据数组数据自动渲染页面-->
            <li v-for="item in message">{{item}}</li>
        </ul>
        <button @click="add" v-show="isShow">添加数据</button>
        <button @click="showButton">隐藏按钮</button>
    </p></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>
    <p id="app">
        <ul id="list">
            <li>第1条数据</li>
            <li>第2条数据</li>
        </ul>
        <button id="add">添加数据</button>
        <button id="showButton">隐藏按钮</button>
    </p></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>

登录后复制

复制代码

输出结果：

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

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

补充阅读：

1.jQuery首先要获取到dom对象，然后对dom对象进行进行值的修改等操作
2.Vue是首先把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新。
3.可以简单的理解为Vue帮我们做了dom操作，我们以后用Vue就需要修改对象的值和做好元素和对
象的绑定，Vue这个框架就会自动帮我们做好dom的相关操作
4.这种dom元素跟随JS对象值的变化而变化叫做单向数据绑定，如果JS对象的值也跟随着dom元素的
值的变化而变化就叫做双向数据绑定
用一个简单的例子来说明编写Jquery和Vue上的不同
修改文字
点击按钮后：

改为

(1)jQuery代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<p>
    <p>大家好，我是<span id="name">张三<span>!</p>
    <p>我是一名<span id="jop">医生</span>.</p>
    <button id = "modifyBtn">修改</button>
</p>
<script type="text/javascript">
    $("#modifyBtn").click(function(){  
        $("#name").text("李四");  
        $("#jop").text("老师");  
    });  
</script>
</body>
</html>

登录后复制

(2)Vue代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
    <p>大家好，我是<span>{{name}}<span>!</p>
    <p>我是一名<span>{{jop}}</span>.</p>
    <button v-on:click="modifyInfo">修改</button>
</p>
<script>
new Vue({  
    el: &#39;#app&#39;,  
    data:{  
        name:"张三",  
        jop:"医生"  
    },  
    methods:{  
        modifyInfo:function(){  
            this.name = "李四";  
            this.jop = "老师";  
        }  
    }  
})  
</script>
</body>
</html>

登录后复制

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7554

CakePHP 教程

1382

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

深度对比：Vivox100和Vivox100Pro，哪个更值得购买？ Mar 22, 2024 pm 02:06 PM

在当今智能手机市场上，消费者面临着越来越多的选择。随着科技的不断发展，手机厂商推出了越来越多的型号和款式，其中Vivox100和Vivox100Pro无疑是备受关注的两款产品。两款手机均来自知名品牌Vivox，但在功能、性能和价格上却有着一定的区别，那么在面对这两款手机时，究竟哪个更值得购买呢？Vivox100和Vivox100Pro在外观设计上有着明显的差

Windows10与Windows11性能对比：哪个更胜一筹？ Mar 28, 2024 am 09:00 AM

Windows10与Windows11性能对比：哪个更胜一筹？随着科技的不断发展和进步，操作系统也在不断更新和升级。微软公司作为全球最大的操作系统开发商之一，其发布的Windows系列操作系统一直备受用户关注。在2021年，微软发布了Windows11操作系统，这引发了广泛的讨论和关注。那么，究竟Windows10与Windows11在性能方面有何不同，哪个

SOL币和BCH币那个更有潜力？SOL币和BCH币有什么区别？ Apr 25, 2024 am 09:07 AM

当前被币圈看好的潜力币除了SOL币还有BCH币，SOL是Solana区块链平台的原生代币，BCH是BitcoinCash项目的代币，它是比特币的一个分叉货币。因为具有不同的技术特点、应用场景和发展方向，投资者在二者之前做出选择也比较困难，就想通过分析SOL币和BCH那个更有潜力？再进行投资。但币种的比较是要根据市场、发展前景、项目实力等方面综合分析的。接下来小编为大家详细说说。SOL币和BCH那个更有潜力？相较而言SOL币更有潜力，确定SOL币和BCH那个更有潜力是一个复杂的问题，因为这取决于许

Vivox100和Vivox100Pro对比评测：你更倾向哪款？ Mar 22, 2024 pm 02:33 PM

Vivox100和Vivox100Pro对比评测：你更倾向哪款？随着智能手机的不断普及和功能的日益强大，人们对手机配件的需求也日渐增长。作为手机配件中不可或缺的一部分，耳机在人们的日常生活和工作中扮演着重要的角色。而在众多耳机品牌中，Vivox100和Vivox100Pro是备受关注的两款产品。今天，我们将对这两款耳机进行详细的对比评测，看看它们的优势和劣势

Go语言与其他编程语言的性能对比及优劣势 Mar 07, 2024 pm 12:54 PM

标题：Go语言与其他编程语言的性能对比及优劣势随着计算机技术的不断发展，编程语言的选择越来越关键，其中性能是一个重要的考量因素。本文将以Go语言为例，与其他常见的编程语言进行性能对比，并分析各自的优劣势。一、Go语言概述Go语言是由Google开发的一门开源编程语言，具有快速编译、高效并发、简洁易读等特点，适合用于开发网络服务、分布式系统、云计算等领域。Go

jQuery中如何使用PUT请求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u

天玑6020在对比中超越骁龙处理器吗 Mar 18, 2024 pm 12:36 PM

天玑6020在对比中超越骁龙处理器吗随着智能手机市场的不断发展，处理器作为手机性能的关键组成部分，一直备受关注。在众多处理器中，华为麒麟、高通骁龙一直是备受瞩目的品牌。最近，华为发布了新一代麒麟处理器天玑6020，引起了广泛的关注和争论。那么，天玑6020在对比中是否超越骁龙处理器呢？骁龙处理器一直以其强大的性能和优秀的功耗控制而著称，成为了许多手机厂商的首

jQuery小技巧：快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：&lt

See all articles

jquery和vue对比实例分析

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题