深入了解jQuery和Vue的差異（附程式碼）-js教程-PHP中文網

深入了解jQuery和Vue的差異（附程式碼）

烟雨青岚

發布： 2020-06-28 13:12:54

轉載

4353 人瀏覽過

深入了解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>  
<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: &#39;#app&#39;,
	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中文網其他相關文章！