jQuery和Vue的区别(转载)
生活随笔
收集整理的這篇文章主要介紹了
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> <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>?
總結
以上是生活随笔為你收集整理的jQuery和Vue的区别(转载)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： npm/cnpm install是啥意思
- 下一篇： flask和vue的冲突问题