Vue3 学习 day2

1.el ，data的两种写法

el两种写法

 new Vue({
			 //el:"#app1",
			 data:{
				name:'dddd' 
			 }
			 
		 }).$mount("#app1")

data两种写法

		 <script type="text/javascript">
		 	new Vue({
				// data:{   
				// 	myData:"对象方式"
				// }
				data:function(){
					console.log("this 是指此Vue对象",this)
					return {
						myData:"函数方式"
					}
				}
			}).$mount("#aaa")
		 </script>

2.Vue中MVVM的理解

3. 数据代理

1.回顾Object.defineProperty

			let number=18
			let person = {
				name: 'hardy',
				sex: 'man'
			}
			Object.defineProperty(person, "age", {
				// value: 18,
				// enumerable: true, // 控制属性可遍历
				// writable: true, //控制属性可修改
				// configurable: true ,//控制属性可删除
				
				get:function(){  //当有人读取person的age属性时，get函数会被调用，返回值就是age的值
				console.log('有人读取age属性了')
					return number
				},
				set(vaule){
					console.log('有人修改age属性了,',vaule)
					number=vaule
				}
			})
			console.log(person)
			console.log(Object.keys(person))

2.数据代理

• 通过一个对象代理，对另一个对象中属性进行读写操作；

	let  obj1={x:100}
     let  obj2={y:200}
			
			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x
				},
				set(value){
				  obj1.x=value	
				}
			})

4.Vue事件的处理

1.普通点击事件，绑定，传值

<button type="button" v-on:click="showInfo" >点我（不传参）</button>
	<button type="button" @click="showInfo2(666,$event)" >点我（传参）</button>
			
	var vm11=new Vue({
			data:{
				name:'hardy',
			},
			methods:{
				showInfo(){
					console.log(this === vm11)
		
				},
				showInfo2(value,event){
					console.log(value,event)
				
				}
				
			}
		}).$mount('#app3')

2. 事件修饰符

• 修饰符可以连续写： @click.stop.prevent
  

	<a href="https://cn.vuejs.org/v2/guide/instance.html"   @click.prevent="showInfo3">点我跳转</a>
			
			<div  @click="showInfo3">
				<button type="button"  @click.stop="showInfo3" >冒泡</button>
			</div>
			
			<button type="button"  @click.once="showInfo3" >事件只触发一次</button>
			
			
			<button type="button"  @click.capture="showInfo3" >事件的捕获模式</button>

3.键盘事件

• 常用： .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right

<input type="text" @keyup.enter="showInfo4"  placeholder="按下回车提示输入" />
			<input type="text" @keyup.delete="showInfo4"  placeholder="按下删除提示输入" />


		showInfo4(e){
					console.log(e.target.value)
				}