jquery和vue的区别是什么?区别介绍

KLQ 2020-08-03 10:40:30 java常见问答 4339

之前给大家介绍了一下jquery,那么下面要给大家继续讲到的就是jquery和vue的区别,一起通过下面的文章内容来进行了解吧。

区别:

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

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

举例:

场景1:

列表添加一个元素

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>

场景2:

控制按钮的显示隐藏

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的区别

jquery和vue的区别

总结:

vue适用的场景-复杂数据操作的后台页面,表单填写页面;jquery适用的场景-一些html5的动画页面,一些需要js来操作页面样式的页面。

注意,这两者也是可以结合一起来使用的,vue侧重数据绑定,jquery侧重样式操作,动画效果等。

以上就是对于jquery和vue区别的一个简单介绍了,你还有什么不清楚的吗?可以继续的关注奇Q工具网来进行了解呢,除此之外,还有更多java项目中常见问题可以为你分享解答。

推荐阅读:

jquery ajax请求,使用jquery发送ajax请求怎么编写?

jquery添加html代码,怎样动态的添加一条html代码?

jquery中ajax完整例子怎么写?jquery中的ajax有什么用?