Detailed explanation of VUE's data proxy and events

Review of Object.defineProperty method
What is a data broker?
Data Proxy in Vue
Basic use of events
Event modifiers
Keyboard events
Summarize

Review of Object.defineProperty method

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Review of Object.defineproperty method</title>
	</head>
	<body>
		<script type="text/javascript" >
			let number = 18
			let person = {
				name:'Zhang San',
				sex:'male',
			}
 			Object.defineProperty(person,'age',{
				// value:18,
				// enumerable:true, //controls whether the property can be enumerated, the default value is false
				// writable:true, //controls whether the property can be modified, the default value is false
				// configurable: true //Controls whether the property can be deleted. The default value is false
 				//When someone reads the age property of person, the get function (getter) will be called and the return value is the value of age get(){
					console.log('Someone read the age property')
					return number
				},
 				//When someone modifies the age property of person, the setter function will be called and receive the modified value set(value){
					console.log('Someone modified the age property, and the value is', value)
					number = value
				}
 			})
 			// console.log(Object.keys(person))
 			console.log(person)
		</script>
	</body>
</html>

What is a data broker?

Data proxy: Operation (read/write) of attributes in another object through an object proxy

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>What is a data agent?</title>
	</head>
	<body>
		<!-- Data proxy: operation (read/write) of attributes in another object through an object proxy -->
		<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>

Data Proxy in Vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Data Proxy in Vue</title>
		<!-- Import Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1. Data proxy in Vue:
							Use the vm object to proxy the operation (read/write) of the attributes in the data object
				2. Benefits of data proxy in Vue:
							More convenient operation of data in data 3. Basic principle:
							Add all properties in the data object to vm through Object.defineProperty().
							For each property added to the vm, specify a getter/setter.
							Operate (read/write) the corresponding attributes in data inside the getter/setter.
		 -->
		<!-- Prepare a container -->
		<div id="root">
			<h2>School name: {{name}}</h2>
			<h2>School address: {{address}}</h2>
		</div>
	</body>
 	<script type="text/javascript">
		Vue.config.productionTip = false //Prevent Vue from generating production tips at startup.
 		const vm = new Vue({
			el:'#root',
			data:{
				name:'Shang Silicon Valley',
				address:'Hongfu Technology Park'
			}
		})
	</script>
</html>

Basic use of events

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Data Proxy in Vue</title>
		<!-- Import Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1. Data proxy in Vue:
							Use the vm object to proxy the operation (read/write) of the attributes in the data object
				2. Benefits of data proxy in Vue:
							More convenient operation of data in data 3. Basic principle:
							Add all properties in the data object to vm through Object.defineProperty().
							For each property added to the vm, specify a getter/setter.
							Operate (read/write) the corresponding attributes in data inside the getter/setter.
		 -->
		<!-- Prepare a container -->
		<div id="root">
			<h2>School name: {{name}}</h2>
			<h2>School address: {{address}}</h2>
		</div>
	</body>
 	<script type="text/javascript">
		Vue.config.productionTip = false //Prevent Vue from generating production tips at startup.
 		const vm = new Vue({
			el:'#root',
			data:{
				name:'Shang Silicon Valley',
				address:'Hongfu Technology Park'
			}
		})
	</script>
</html>

Event modifiers

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Basic use of events</title>
		<!-- Import Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				Basic use of events:
							1. Use v-on:xxx or @xxx to bind the event, where xxx is the event name;
							2. The event callback needs to be configured in the methods object and will eventually be on the vm;
							3. Do not use arrow functions for functions configured in methods! Otherwise this is not vm;
							4. The functions configured in methods are all functions managed by Vue, and this points to vm or component instance object;
							5. @click="demo" and @click="demo($event)" have the same effect, but the latter can pass parameters;
		-->
		<!-- Prepare a container -->
		<div id="root">
			<h2>Welcome to {{name}} study</h2>
			<!-- <button v-on:click="showInfo">Click me for info</button> -->
			<button @click="showInfo1">Click me for information 1 (no parameters)</button>
			<button @click="showInfo2($event,66)">Click me for prompt information 2 (parameter passing)</button>
		</div>
	</body>
 	<script type="text/javascript">
		Vue.config.productionTip = false //Prevent Vue from generating production tips at startup.
 		const vm = new Vue({
			el:'#root',
			data:{
				name:'Shang Silicon Valley',
			},
			methods:{
				showInfo1(event){
					// console.log(event.target.innerText)
					// console.log(this) //This is vm
					alert('Hello, classmate!')
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //This is vm
					alert('Hello classmate!!')
				}
			}
		})
	</script>
</html>

Keyboard events

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Keyboard Events</title>
		<!-- Import Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1. Commonly used button aliases in Vue:
							Enter => enter
							Delete => delete (captures "delete" and "backspace" keys)
							Exit => esc
							Space => space
							Line break => tab (special, must be used with keydown)
							Up => up
							down => down
							left => left
							Right => right
 				2. For buttons that Vue does not provide aliases, you can use the original key value of the button to bind, but be careful to convert it to kebab-case (short dash naming)
 				3. System modifier keys (special usage): ctrl, alt, shift, meta
							(1) Used with keyup: Press the modifier key, then press other keys, and then release the other keys, the event will be triggered.
							(2) Used with keydown: trigger events normally.
 				4. You can also use keyCode to specify specific keys (not recommended)
 				5.Vue.config.keyCodes.Custom key name = key code, you can customize the key alias -->
		<!-- Prepare a container -->
		<div id="root">
			<h2>Welcome to {{name}} study</h2>
			<input type="text" placeholder="Press Enter to prompt input" @keydown.huiche="showInfo">
		</div>
	</body>
 	<script type="text/javascript">
		Vue.config.productionTip = false //Prevent Vue from generating production tips at startup.
		Vue.config.keyCodes.huiche = 13 // defines an alias key new Vue({
			el:'#root',
			data:{
				name:'Shang Silicon Valley'
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>