vue和jquery对比

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

        前段时间面试,有一个面试官问我vue和JQuery的区别.看了很多文章,也看了很多评论.很多人都说vue和JQuery没有可比性.但是也看了很多讲解,还是觉得很有收获的.我简单的归为以下几点:

  1. jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。

  2. Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。

　　举个例子:

　　场景一：控制按钮的显示隐藏，下图为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和jquery对比 的全部内容， 来源链接： utcz.com/z/374788.html

回到顶部