0401_Vue_D2_数据代理+事件处理

最新推荐文章于 2023-10-25 08:57:33 发布

Amor_1998

最新推荐文章于 2023-10-25 08:57:33 发布

阅读量179

点赞数

分类专栏：学习日志文章标签： vue.js

本文链接：https://blog.csdn.net/Amor_1998/article/details/123885757

版权

学习日志专栏收录该内容

10 篇文章 0 订阅

订阅专栏

get()和set（）函数

		
			//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age 的值
        	get (){
				console.log('有人读取age属性了')
				return number
			},
			//当有人修改person的age属性时，set函数就会被调用，且就会收到修改的具体值
			set(value){
				console.log('有个人修改了age属性，且值是',value)
				number=value
			}

数据代理的操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 数据代理，通过一个对象代理对另一个对象中属性的操作 【读/写】 -->
		<script type="text/javascript">
			let obj={x:100}
			let obj2={y:200	}
			
			Object.defineProperty(obj2,'xx',{
				get(){
					return obj.x
				},
				set(value){
					obj.x=value
				}
			})
			
		</script>


	</body>
</html>

p13-vue中的数据代理

？？？数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

1Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）
2Vue中数据代理的好处：更加方便的操作data中的数据
3基本原理
a通过object.defineProperty()把data对象中所有属性添加到vm上
b为每一个添加到vm上的属性，都指定一个 gettersetter
c在gettersetter内部去操作（读/写）data中对应的属

Vue将data中的数据拷贝了一份到_data属性中，又将_data里面的属性提到Vue实例中（如name），通过defineProperty实现数据代理，这样通过geter/setter操作 name，进而操作_data中的 name。而_data又对data进行数据劫持，实现响应式

用了这个api去将_data转到模型里的{{name}}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue -->
		<script type="text/javascript" src="../js/vue.js">
			
		</script>
	</head>
	<body>
		<div id="root">
			<h2>学习名称:{{name}}</h2>
			<h2>学校地址:{{address}}</h2>
		</div>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip=false;
	const vm=  new Vue({
		 el:'#root',
		 data:{
			 name:'天软',
			 address:'天津西青'
		 }
	 })
	 
	</script>
</html>

P14-事件处理

vue只能识别容器里的东西，粉色内容不再容器里，所以无法识别，需要用配置项methods塞到绿色框

1.8.1. 事件的基本用法

1使用v-on:xxx或@xxx绑定事件，其中 xxx 是事件名
2事件的回调需要配置在methods对象中，最终会在vm上
3methods中配置的函数，不要用箭头函数，否则 this 就不是vm了
4methods中配置的函数，都是被 Vue所管理的函数，this 的指向是vm或组件实例对象
5@click="demo"和@click="demo($event)"效果一致，但后者可以传参

??? event事件对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js">
			
		</script>
	</head>
	<body>
		<div id="root">
			<h1>我的学校是{{address}}</h1>
			
			<button v-on:click="showInfo1">点我1(不传参)</button>
			<button @click="showInfo2($event,66)">点我2，（传参）</button>
		</div>
	</body>
	<script type="text/javascript">
			Vue.config.productionTip=false;
			new Vue	({
				el:'#root',
				data:{
					address:'TJSE',
					
					
				},
				methods:{
					showInfo1(event ){
						//console.log(event.target.innerText) //拿到元素里的文字
					alert('hello1')
					},
					showInfo2(event ,number){
						//console.log(event.target.innerText) //拿到元素里的文字
					alert('hello2')
					}
				}
			})
	</script>
</html>

1.8.2. 事件修饰符

Vue中的事件修饰符
1prevent 阻止默认事件（常用）
2stop 阻止事件冒泡（常用）
3once 事件只触发一次（常用）
4capture 使用事件的捕获模式
5self 只有event.target是当前操作的元素时才触发事件
6passive 事件的默认行为立即执行，无需等待事件回调执行完毕
修饰符可以连续写，比如可以这么用：@click.prevent.stop="showInfo"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue -->
		<script type="text/javascript" src="../js/vue.js">
			
		</script>
		<style type="text/css">
			*{
				margin-top: 20px;
			}
			.demo1{
				height: 50px;
				background-color: aqua;
			}
			
			.box1{padding: 10px; background-color: aquamarine;}
			.box2{height: 50px; padding: 10px;background-color: brown;}
		</style>
	</head>
	<body>
		<div id="root">
			<h2>欢迎来{{name}}</h2>
			<!-- Vue中的事件修饰符
1.prevent	阻止默认事件（常用）
2.stop		阻止事件冒泡（常用）
3.once		事件只触发一次（常用）
4.capture	使用事件的捕获模式
5.self		只有event.target是当前操作的元素时才触发事件
6.passive	事件的默认行为立即执行，无需等待事件回调执行完毕
修饰符可以连续写，比如可以这么用：@click.prevent.stop="showInfo" -->
			
			
			<!-- 	阻止默认事件（常用） -->
			<a href="http://www.baidu.com" @click.prevent="showInfo">点我</a>
				<!-- 阻止事件冒泡（常用） -->
				<div class="demo1" @click="showInfo">
					<button @click.stop="showInfo">点我提示信息</button>
				</div>
				<!-- 事件只触发一次（常用） -->
					<button @click.once="showInfo">点我提示信息</button>
				
				<!--使用事件的捕获模式  -->
				<div class="box1" @click.capture="showMsg(1)">
					div 1
					<div class="box2"  @click="showMsg(2)">
						div2
					</div>
				</div>
				
				<!-- 只有event.target是当前操作的元素时才触发事件 -->
				<div class="demo1" @click.self="showInfo">
					<button @click="showInfo">点我提示信息</button>
				</div>
		</div>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip=false;
		new Vue({
			el:'#root',
			data:{
				name:'百度学习'
			},
			methods:{
				showInfo(e){
				//	e.stopPropagation()  //此api阻止冒泡
				//	alert('同学你好')
				console.log(e.target)
				},	
				showMsg(msg){
					console.log(msg)
				}
			}
		 })
	 
	</script>
</html>

修饰符可以连续写

1.8.3. 键盘事件

键盘上的每个按键都有自己的名称和编码，例如：Enter（13）。而Vue还对一些常用按键起了别名方便使用
1Vue中常用的按键别名
回车enter
删除delete捕获“删除”和“退格”键
退出esc
空格space
换行tab特殊，必须配合keydown去使用
上up
下down
左left
右right
2Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（多单词小写短横线写法）
3系统修饰键（用法特殊）ctrlaltshiftmeta（meta就是win键）
a配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
指定 ctr+y 使用 @keyup.ctr.y
b配合keydown使用：正常触发事件
4也可以使用keyCode去指定具体的按键（不推荐）
5Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue -->
		<script type="text/javascript" src="../js/vue.js">
			
		</script>
	</head>
	<body>
		<div id="root">
			<h2>我喜欢{{name}}</h2>
			<input type="text" placeholder="按下回车提示输入" @keyup.alt="showInfo">
		</div>
	</body>
	<!-- 键盘上的每个按键都有自己的名称和编码，例如：Enter（13）。而Vue还对一些常用按键起了别名方便使用
			1Vue中常用的按键别名
			回车enter
			删除delete捕获“删除”和“退格”键
			退出esc
			空格space
			换行tab特殊，必须配合keydown去使用
			上up
			下down
			左left
			右right
			2Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（多单词小写短横线写法）
			3系统修饰键（用法特殊）ctrl、alt、shift、meta（meta就是win键）
			a配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
			指定 ctr+y 使用 @keyup.ctr.y
			b配合keydown使用：正常触发事件
			4也可以使用keyCode去指定具体的按键（不推荐）
			5Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名	 -->
	
	<script type="text/javascript">
		Vue.config.productionTip=false;
		new Vue({
			el:'#root',
			data:{
				name:'zzy'				
			},
			methods:{
				showInfo(e){
					console.log(e.target.value)
				}
			},
		})
	 
	</script>
</html>