深入了解jQuery和Vue的区别（附代码）

前端  /  管理员 发布于 7年前   444

深入了解jQuery和Vue的区别（附代码）

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: '#app',data:{    name:"张三",    jop:"医生"},methods:{    modifyInfo:function(){        this.name = "李四";        this.jop = "老师";    }}})</script></body></html>

感谢大家的阅读，希望大家收益多多。

本文转自： https://blog.csdn.net/xutongbao/article/details/77870989

推荐教程：《JS教程》

以上就是深入了解jQuery和Vue的区别（附代码）的详细内容，更多请关注其它相关文章！


  • 上一条：
    Java Reactor 反应器模式
    下一条：
    Vue中mounted和created的区别（图文详解）

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客