快捷導(dǎo)航

VUE的數(shù)據(jù)代理與事件詳解

更新時間：2021年11月15日 16:10:55 作者：LuckyLazyPig

這篇文章主要為大家介紹了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屬性時，get函數(shù)(getter)就會被調(diào)用，且返回值就是age的值
				get(){
					console.log('有人讀取age屬性了')
					return number
				},
 				//當(dāng)有人修改person的age屬性時，set函數(shù)(setter)就會被調(diào)用，且會收到修改的具體值
				set(value){
					console.log('有人修改了age屬性，且值是',value)
					number = value
				}
 			})
 			// console.log(Object.keys(person))
 			console.log(person)
		</script>
	</body>
</html>

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

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

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

事件的基本使用

<!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對象來代理data對象中屬性的操作（讀/寫）
				2.Vue中數(shù)據(jù)代理的好處：
							更加方便的操作data中的數(shù)據(jù)
				3.基本原理：
							通過Object.defineProperty()把data對象中所有屬性添加到vm上。
							為每一個添加到vm上的屬性，都指定一個getter/setter。
							在getter/setter內(nèi)部去操作（讀/寫）data中對應(yīng)的屬性。
		 -->
		<!-- 準(zhǔn)備好一個容器-->
		<div id="root">
			<h2>學(xué)校名稱：{{name}}</h2>
			<h2>學(xué)校地址：{{address}}</h2>
		</div>
	</body>
 	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動時生成生產(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對象中，最終會在vm上；
							3.methods中配置的函數(shù)，不要用箭頭函數(shù)！否則this就不是vm了；
							4.methods中配置的函數(shù)，都是被Vue所管理的函數(shù)，this的指向是vm 或 組件實(shí)例對象；
							5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以傳參；
		-->
		<!-- 準(zhǔn)備好一個容器-->
		<div id="root">
			<h2>歡迎來到{{name}}學(xué)習(xí)</h2>
			<!-- <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 在啟動時生成生產(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使用：按下修飾鍵的同時，再按下其他鍵，隨后釋放其他鍵，事件才被觸發(fā)。
							(2).配合keydown使用：正常觸發(fā)事件。
 				4.也可以使用keyCode去指定具體的按鍵（不推薦）
 				5.Vue.config.keyCodes.自定義鍵名 = 鍵碼，可以去定制按鍵別名
		-->
		<!-- 準(zhǔn)備好一個容器-->
		<div id="root">
			<h2>歡迎來到{{name}}學(xué)習(xí)</h2>
			<input type="text" placeholder="按下回車提示輸入" @keydown.huiche="showInfo">
		</div>
	</body>
 	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動時生成生產(chǎn)提示。
		Vue.config.keyCodes.huiche = 13 //定義了一個別名按鍵
 		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>