jQuery和Vue的区别

原创

徐同保的博客 2022-07-25 12:29:18 博主文章分类：web前端 ©著作权

文章标签 javascript Vue html js对象 jquery 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者徐同保的博客的原创作品，请联系作者获取转载授权，否则将追究法律责任

1.jQuery首先要获取到dom对象，然后对dom对象进行进行值的修改等操作

2.Vue是首先把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新。

3.可以简单的理解为Vue帮我们做了dom操作，我们以后用Vue就需要修改对象的值和做好元素和对

象的绑定，Vue这个框架就会自动帮我们做好dom的相关操作

4.这种dom元素跟随JS对象值的变化而变化叫做单向数据绑定，如果JS对象的值也跟随着dom元素的

值的变化而变化就叫做双向数据绑定

用一个简单的例子来说明编写Jquery和Vue上的不同

修改文字

点击按钮后：

jQuery和Vue的区别_javascript

改为

jQuery和Vue的区别_js对象_02

(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>  
<div>
    <p>大家好，我是<span id="name">张三<span>!</p>
    <p>我是一名<span id="jop">医生</span>.</p>
    <button id = "modifyBtn">修改</button>
</div>
<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>
<div id="app">
    <p>大家好，我是<span>{{name}}<span>!</p>
    <p>我是一名<span>{{jop}}</span>.</p>
    <button v-on:click="modifyInfo">修改</button>
</div>
    
<script>
new Vue({
    el: '#app',
    data:{
        name:"张三",
        jop:"医生"
    },
    methods:{
        modifyInfo:function(){
            this.name = "李四";
            this.jop = "老师";
        }
    }
})
</script>
</body>
</html>