jQuery和Vue对比

时间 2019-11-09

标签 jquery vue 对比栏目 JQuery 繁體版

原文原文链接

一、vue和jquey对比

jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操做，其实和原生的HTML的区别只在于能够更方便的选取和操做DOM对象，而数据和界面是在一块儿的。好比须要获取label标签的内容：$("lable").val();,它仍是依赖DOM元素的值。 Vue则是经过Vue对象将数据和View彻底分离开来了。对数据进行操做再也不须要引用相应的DOM对象，能够说数据和View是分离的，他们经过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。css

二、举例

场景一：

列表添加一个元素,下图为vue和jquery两种操做的代码，咱们从中能够看出vue只须要向数据message里面push一条数据便可完成添加一个li标签的操做，而jquery则须要获取dom元素节点，并对dom进行添加一个标签的操做，若是dom结构特别复杂，或者添加的元素很是复杂，则代码会变得很是复杂且阅读性低。
vue:html

<!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>

jQuey：vue

<!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：html5

<!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：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侧重样式操做，动画效果等，则会更加高效率的完成业务需求。app