溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

VUE的數(shù)據(jù)代理與事件案例分析

發(fā)布時(shí)間：2021-11-16 09:03:46 來源：億速云 閱讀：152 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要講解了“VUE的數(shù)據(jù)代理與事件案例分析”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“VUE的數(shù)據(jù)代理與事件案例分析”吧！

回顧Object.defineProperty方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>回顧Object.defineproperty方法</title>
	</head>
	<body>
		<script type="text/javascript" >
			let number = 18
			let person = {
				name:'張三',
				sex:'男',
			}
 			Object.defineProperty(person,'age',{
				// value:18,
				// enumerable:true, //控制屬性是否可以枚舉，默認(rèn)值是false
				// writable:true, //控制屬性是否可以被修改，默認(rèn)值是false
				// configurable:true //控制屬性是否可以被刪除，默認(rèn)值是false
 				//當(dāng)有人讀取person的age屬性時(shí)，get函數(shù)(getter)就會(huì)被調(diào)用，且返回值就是age的值
				get(){
					console.log('有人讀取age屬性了')
					return number
				},
 				//當(dāng)有人修改person的age屬性時(shí)，set函數(shù)(setter)就會(huì)被調(diào)用，且會(huì)收到修改的具體值
				set(value){
					console.log('有人修改了age屬性，且值是',value)
					number = value
				}
 			})
 			// console.log(Object.keys(person))
 			console.log(person)
		</script>
	</body>
</html>

何為數(shù)據(jù)代理

數(shù)據(jù)代理：通過一個(gè)對(duì)象代理對(duì)另一個(gè)對(duì)象中屬性的操作（讀/寫）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>何為數(shù)據(jù)代理</title>
	</head>
	<body>
		<!-- 數(shù)據(jù)代理：通過一個(gè)對(duì)象代理對(duì)另一個(gè)對(duì)象中屬性的操作（讀/寫）-->
		<script type="text/javascript" >
			let obj = {x:100}
			let obj2 = {y:200}
 			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x
				},
				set(value){
					obj.x = value
				}
			})
		</script>
	</body>
</html>

Vue中的數(shù)據(jù)代理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue中的數(shù)據(jù)代理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.Vue中的數(shù)據(jù)代理：
							通過vm對(duì)象來代理data對(duì)象中屬性的操作（讀/寫）
				2.Vue中數(shù)據(jù)代理的好處：
							更加方便的操作data中的數(shù)據(jù)
				3.基本原理：
							通過Object.defineProperty()把data對(duì)象中所有屬性添加到vm上。
							為每一個(gè)添加到vm上的屬性，都指定一個(gè)getter/setter。
							在getter/setter內(nèi)部去操作（讀/寫）data中對(duì)應(yīng)的屬性。
		 -->
		<!-- 準(zhǔn)備好一個(gè)容器-->
		<div id="root">
			<h3>學(xué)校名稱：{{name}}</h3>
			<h3>學(xué)校地址：{{address}}</h3>
		</div>
	</body>
 	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。
 		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				address:'宏?？萍紙@'
			}
		})
	</script>
</html>

VUE的數(shù)據(jù)代理與事件案例分析

事件的基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue中的數(shù)據(jù)代理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.Vue中的數(shù)據(jù)代理：
							通過vm對(duì)象來代理data對(duì)象中屬性的操作（讀/寫）
				2.Vue中數(shù)據(jù)代理的好處：
							更加方便的操作data中的數(shù)據(jù)
				3.基本原理：
							通過Object.defineProperty()把data對(duì)象中所有屬性添加到vm上。
							為每一個(gè)添加到vm上的屬性，都指定一個(gè)getter/setter。
							在getter/setter內(nèi)部去操作（讀/寫）data中對(duì)應(yīng)的屬性。
		 -->
		<!-- 準(zhǔn)備好一個(gè)容器-->
		<div id="root">
			<h3>學(xué)校名稱：{{name}}</h3>
			<h3>學(xué)校地址：{{address}}</h3>
		</div>
	</body>
 	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。
 		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				address:'宏?？萍紙@'
			}
		})
	</script>
</html>

事件的修飾符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件的基本使用</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				事件的基本使用：
							1.使用v-on:xxx 或 @xxx 綁定事件，其中xxx是事件名；
							2.事件的回調(diào)需要配置在methods對(duì)象中，最終會(huì)在vm上；
							3.methods中配置的函數(shù)，不要用箭頭函數(shù)！否則this就不是vm了；
							4.methods中配置的函數(shù)，都是被Vue所管理的函數(shù)，this的指向是vm 或 組件實(shí)例對(duì)象；
							5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以傳參；
		-->
		<!-- 準(zhǔn)備好一個(gè)容器-->
		<div id="root">
			<h3>歡迎來到{{name}}學(xué)習(xí)</h3>
			<!-- <button v-on:click="showInfo">點(diǎn)我提示信息</button> -->
			<button @click="showInfo1">點(diǎn)我提示信息1（不傳參）</button>
			<button @click="showInfo2($event,66)">點(diǎn)我提示信息2（傳參）</button>
		</div>
	</body>
 	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。
 		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
			},
			methods:{
				showInfo1(event){
					// console.log(event.target.innerText)
					// console.log(this) //此處的this是vm
					alert('同學(xué)你好！')
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //此處的this是vm
					alert('同學(xué)你好??！')
				}
			}
		})
	</script>
</html>

鍵盤事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>鍵盤事件</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.Vue中常用的按鍵別名：
							回車 => enter
							刪除 => delete (捕獲“刪除”和“退格”鍵)
							退出 => esc
							空格 => space
							換行 => tab (特殊，必須配合keydown去使用)
							上 => up
							下 => down
							左 => left
							右 => right
 				2.Vue未提供別名的按鍵，可以使用按鍵原始的key值去綁定，但注意要轉(zhuǎn)為kebab-case（短橫線命名）
 				3.系統(tǒng)修飾鍵（用法特殊）：ctrl、alt、shift、meta
							(1).配合keyup使用：按下修飾鍵的同時(shí)，再按下其他鍵，隨后釋放其他鍵，事件才被觸發(fā)。
							(2).配合keydown使用：正常觸發(fā)事件。
 				4.也可以使用keyCode去指定具體的按鍵（不推薦）
 				5.Vue.config.keyCodes.自定義鍵名 = 鍵碼，可以去定制按鍵別名
		-->
		<!-- 準(zhǔn)備好一個(gè)容器-->
		<div id="root">
			<h3>歡迎來到{{name}}學(xué)習(xí)</h3>
			<input type="text" placeholder="按下回車提示輸入" @keydown.huiche="showInfo">
		</div>
	</body>
 	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。
		Vue.config.keyCodes.huiche = 13 //定義了一個(gè)別名按鍵
 		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>

感謝各位的閱讀，以上就是“VUE的數(shù)據(jù)代理與事件案例分析”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)VUE的數(shù)據(jù)代理與事件案例分析這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手