深入了解jQuery和Vue的差異（附程式碼）
- 烟雨青岚轉載
- 2020-06-28 13:12:544250瀏覽
深入了解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的差異（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除
上一篇：JavaScript原型怎麼理解下一篇：JavaScript原型怎麼理解