事件处理、事件修饰符、键盘事件、事件总结、姓名案例、计算属性、计算属性简写——Vue

嘻嘻哈哈二郎神

已于 2023-03-09 18:37:22 修改

阅读量133

点赞数

分类专栏：前端李立超 Vue 文章标签： vue.js javascript 前端

于 2022-12-04 19:48:02 首次发布

本文链接：https://blog.csdn.net/weixin_70320000/article/details/128161001

版权

前端同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

李立超

21 篇文章 2 订阅

订阅专栏

Vue

11 篇文章 0 订阅

订阅专栏

一、事件处理

事件的基本使用：

1. 使用 v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名；

2. 事件的回调函数需要配置在methods对象中，最终会在 vm 上；

3. methods 中配置的函数，不要用箭头函数！否则this 就不是 vm了；

4. methods 中配置的函数，都是被Vue 所管理的函数，this指向的是vm 或 组件实例对象；

5. @click = "demo" 和 @click = "demo($event)" 效果一致，但后者可以传参。

例如：传66， @click = "demo($event， 66)"

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<!-- <script type="text/javascript" src="../script/vue.js"></script> -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>	
	<div id="root">
		<h2>欢迎来到{{name}}学习</h2>
		<!-- <button v-on:click="showInfo">点我提示信息</button> -->
		<button @click="showInfo1">点我提示信息1(不传参)</button>
        //在点击 下面按钮时 时，给showInfo2传参
		<button @click="showInfo2(66,$event)">点我提示信息2（传参）</button>
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false

	const vm = new Vue({
		el:'#root',
		data:{
			name:'尚硅谷',	
		},
		methods:{
			showInfo1(event){
				// alert('同学你好！')
				// console.log(event.target.innerText);
				console.log(this === vm);//true,此处的this 是vm
				
			},
			showInfo2(number,event){
				console.log(number,event);
				alert('同学你好！！')	
				// console.log(event.target.innerText);	
			},
		}
	})
</script>

二、事件修饰符

Vue中的事件修饰符：

1. prevent: 阻止默认事件（常用）如 @click.prevent

2. stop: 阻止事件冒泡（常用）

3. once: 事件只触发一次（常用）

假如有个按钮点一次就会触发一次，但添加once之后，只会触发一次

4. capture: 使用事件的捕获模式，加在外层盒子上

5. self: 只有event.target 是当前操作的元素时才触发事件

6. passive: 事件的默认行为立即执行，无需等待事件回调执行完毕。

事件scroll是滚动条的滚动，wheel滚轮的滚动触发，对于 wheel事件当滚动条到达底部时，这时接着滚动滚轮，仍会触发wheel事件。当事件触发时，会先执行回调函数中，然后再执行事件的默认行为，故当事件中的回调函数执行需要很长时间，事件的默认行为（如滚轮的滚动）需要等待，这样用户体验不好。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	
	<!-- <script type="text/javascript" src="../script/vue.js"></script> -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<style>
		*{
			margin-top: 20px;
		}
		.demo1{
			height: 50px;
			background-color: skyblue;
		}
		.box1{
			padding: 5px;
			background-color: skyblue;
		}
		.box2{
			padding: 5px;
			background-color: orange;
		}
		.list{
			width: 200px;
			height:200px;
			background-color: peru;
			overflow: auto;
		}
		li{
			height: 100px;
		}
	</style>
</head>
<body>	
	<div id="root">
		<h2>欢迎来到{{name}}学习</h2>
		<!-- 1. prevent: 阻止默认事件（常用） -->
		<a href="https://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

		<!--  2. stop: 阻止事件冒泡（常用） -->
		<div class="demo1" @click="showInfo">
			<button @click.stop="showInfo">点我提示信息</button>
		</div>

		<!-- 3. once: 事件只触发一次（常用） -->
		<button @click.once="showInfo">点我提示信息</button>

		<!-- 4. capture: 使用事件的捕获模式 -->
		<!-- 当点击box2时将2传进去，点击box1时传1 -->
		<div class="box1" @click.capture="showMsg(1)">
			div1
			<div class="box2" @click="showMsg(2)">
				div2
			</div>
		</div>

		<!-- 5. self: 只有event.target 是当前操作的元素时才触发事件 -->
		<div class="demo1" @click.self="showInfo">
			<button @click="showInfo">点我提示信息</button>
		</div>	
		
		<!-- 6. passive: 事件的默认行为立即执行，无需等待事件回调执行完毕。 -->
		<!-- 事件scroll是滚动条的滚动，wheel滚轮的滚动触发 -->
		<ul class="list" @wheel.passive="demo">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false

	const vm = new Vue({
		el:'#root',
		data:{
			name:'尚硅谷',	
		},
		methods:{
			showInfo(e){
				// e.preventDefault()//阻止超链接跳转的默认行为
				alert('同学你好')
				// e.stopPropagation()//阻止冒泡
				console.log(e.target);
				
			},
			showMsg(msg){
				console.log(msg);
			},
			demo(){
				for(let i=0; i < 10000;i++){
					console.log('#');
				}
				console.log('累坏了');
			}
		}
	})
</script>
</html>

三、键盘事件

Vue中常用的按键别名：

回车 => enter

删除 => delete （捕获“删除”和“退格键”）

退出 => esc

空格 => space

换行 => tab （特殊，必须配合keydown使用）

Tab键本身有一个功能：把焦点从当前元素身上切走，按下tab键不用等其释放就已经切走了，当用keyup绑定时，已经失去对当前元素的焦点了，所以tab时要使用keydown

上 => up

下 => down

左 => left

右 => right

2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)

任何一个键都有原始key值和按键编码，keyCode(已经弃用，但在一些浏览器中可以使用)得到按键的编码，事件对象.key 或 code 得到按键原始key值

如：回车键的原始key值为Enter，而在Vue为其起了一个别名enter

注意：大小写的原始key值为CapsLock, 但绑定时要转为caps-lock(短横线命名)

@keyup.caps-lock="函数名" 表示只有当按键抬起且按的是转换大小写的键时事件才生效

3. 系统修饰键（用法特殊）：ctrl、alt、shift、meta（wins键）

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发；

(2).配合keydown使用：正常触发事件

4. 也可以使用keyCode 去指定具体的按键（不推荐）

5. Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名(也不太推荐)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	
	<!-- <script type="text/javascript" src="../script/vue.js"></script> -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	
</head>
<body>	
	<div id="root">
		<h2>欢迎来到{{name}}学习</h2>
		<!-- <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"> -->

		<!-- 未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名),如切换大小写键 -->
		<!-- <input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo"> -->

		<!-- tab键本身有一个功能：把焦点从当前元素身上切走，按下tab键不用等其释放就已经切走了，
		所以当用keyup绑定时，已经失去对当前元素的焦点了，所以tab时要使用keydown -->
		<!-- <input type="text" placeholder="按下回车提示输入" @keydown.tab="showInfo"> -->

		<!--  系统修饰键（用法特殊）：ctrl、alt、shift、meta（wins键） -->
		<!-- <input type="text" placeholder="按下回车提示输入" @keyup.meta="showInfo">
		<input type="text" placeholder="按下回车提示输入" @keydown.meta="showInfo"> -->

		<!--可以使用keyCode 去指定具体的按键  -->
		<!-- <input type="text" placeholder="按下回车提示输入" @keydown.13="showInfo"> -->

		<!--  Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名 -->
		<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">

	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false

	Vue.config.keyCodes.huiche = 13//定义了一个别名按键

	const vm = new Vue({
		el:'#root',
		data:{
			name:'尚硅谷',	
		},
		methods:{
			showInfo(e){
				// console.log(e.keyCode);//keyCode为按键编码，回车的编码为13
				// console.log(e.key);//key输出的为按键名字，如回车键为Enter，而enter是Vue为其起的别名
				// 任何一个键都有自己的名字和按键编码
				// if(e.keyCode != 13) return

				console.log(e.target.value);
			}
		}		
	})
</script>
</html>

四、事件总结

修饰符可以连续写，如@click.stop.prevent 表示先阻止冒泡然后阻止默认行为

系统修饰键（用法特殊),使用keyup时，也可以连续写，表示系统修饰键+指定键触发事件

如 @keyup.ctrl.y 表示必须按下 ctrl + y时才能触发事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	
	<!-- <script type="text/javascript" src="../script/vue.js"></script> -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<style>
		*{
			margin-top: 20px;
		}
		.demo1{
			height: 50px;
			background-color: skyblue;
		}
		
	</style>
</head>
<body>	
	<div id="root">
		<h2>欢迎来到{{name}}学习</h2>
		<div class="demo1" @click="showInfo">
			<!-- 修饰符可以连续写 -->
			<a href="https://www.baidu.com" @click.stop.prevent="showInfo">点我提示信息</a>
		</div>
		<div>
			<!-- 系统修饰键（用法特殊),使用keyup时，也可以连续写，表示 系统修饰键+指定键 触发事件  -->
			<input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo2">
		</div>
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false

	const vm = new Vue({
		el:'#root',
		data:{
			name:'尚硅谷',	
		},
		methods:{
			showInfo(e){
				// e.preventDefault()//阻止超链接跳转的默认行为
				alert('同学你好')
				// e.stopPropagation()//阻止冒泡
				console.log(e.target);
				
			},
			showInfo2(e){
				console.log(e.target.value);
			}			
		}
	})
</script>
</html>

五、姓名案例（插值语法实现，methods实现）

1.插值语法实现姓名案例

使用双向绑定

注意：对于姓截取前三个字符，使用 firstName.slice(0, 3)

使用插值语法有个小问题：就是若想对输入的姓及名做一些操作（如将姓截取前三位后反转然后首字母大写）之后再传给全名位置，会使插值中的表达式有点不便于观察

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<!-- <script type="text/javascript" src="../script/vue.js"></script> -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>	
	<div id="root">
		姓<input type="text" v-model="firstName"><br>
		名<input type="text" v-model="lastName"><br>		
		全名：<span>{{firstName.slice(0,3)}} - {{lastName}}</span>
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false

	const vm = new Vue({
		el:'#root',
		data:{
			firstName:'张',	
			lastName:'三',
		},
	})
</script>
</html>

2.使用methods实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<!-- <script type="text/javascript" src="../script/vue.js"></script> -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>	
	<div id="root">
		姓<input type="text" @keyup.enter="showInfo" v-model="firstName"><br>
		名<input type="text" @keyup.enter="showInfo" v-model="lastName"><br>		
		全名：<span>{{fullName()}}</span>
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false

	const vm = new Vue({
		el:'#root',
		data:{
			firstName:'张',	
			lastName:'三',
		},
		methods:{
			fullName(){
				return this.firstName + '-' + this.lastName
			}
		}
	})
</script>
</html>

六、计算属性

对于Vue来说，data配置项里面的东西就是属性

Vue中属性与计算属性放的位置不同，计算属性放在 computed 配置项中，每个计算属性配置为对象，对象里面有 get，set方法（不能用箭头函数）,且 get，set 中的this 指向 vm实例。set不是必须写的，如果确定不会修改该计算属性的值，就不需要写。

1.定义：要用的属性不存在，通过已有的属性计算得来

2.原理：底层借助了Object.defineProperty方法提供的getter 和setter

3.get函数什么时候执行？

(1).初次读取时会执行一次，因为有缓存机制（所以不管页面中有几次需要读取该计算属性，都只执行一次）

(2).当依赖的数据发生改变时会被再次调用如例子中的 firstName 或者 lastName 改变时

set函数什么时候调用？当fullName被修改时

4.优势：与 methods 实现相比，内部有缓存机制（复用），效率更高，调试方便（可以在开发工具看到计算属性）

5.备注：

(1).计算属性最终会出现在vm上，直接读取使用即可

(2).如果计算属性要被修改，那必须写 set 函数去响应修改，且set 中要引起计算时依赖的数据发生改变

计算属性形式：

computed:{
	计算属性名:{
		get(){
			return 关于已有数据的计算
		},
		set(){
		}
	}
}

姓名案例使用计算属性的例子：

<body>	
	<div id="root">
		姓<input type="text" @keyup.enter="showInfo" v-model="firstName"><br>
		名<input type="text" @keyup.enter="showInfo" v-model="lastName"><br>		
		全名：<span>{{fullName}}</span><br>		
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false

	const vm = new Vue({
		el:'#root',
		data:{
			firstName:'张',	
			lastName:'三',
		},
		computed:{
			fullName:{
				// get有什么作用？当有人读取fullName时，get就会被调用，
				// 且返回值就作为fullName的值
				/* 
				get什么时候调用？
				1. 除此读取fullName时
				2.所依赖的数据发生变化时
				*/
				get(){
					console.log('get被调用了');
					// console.log(this);//此处的this是vm
					return this.firstName + '-' + this.lastName
				},

				// set什么时候调用？当fullName被修改时
				set(value){
					console.log('set',value);
					const arr = value.split('-')
					this.firstName = arr[0]
					this.lastName = arr[1]
				}
			}
		}
		
	})
</script>

七、计算属性简写

简写形式要在计算属性确定只读不改时使用，即不需要设置 set 函数时

简写形式：计算属性名( ) { return ...} // 就是get 函数

computed:{
	计算属性名(){//计算属性名:function()的简写，function就为get函数
		return
	}
}

例子：


<script type="text/javascript">
	Vue.config.productionTip = false

	const vm = new Vue({
		el:'#root',
		data:{
			firstName:'张',	
			lastName:'三',
		},
		computed:{
			//完整写法 
		/* 	fullName:{		
				
				get(){
					console.log('get被调用了');				
					return this.firstName + '-' + this.lastName
				},
				set(value){
					console.log('set',value);
					const arr = value.split('-')
					this.firstName = arr[0]
					this.lastName = arr[1]
				}
			} */

			// 简写
			fullName(){//fullName:function()的简写
				console.log('get被调用了');
				return this.firstName + '-' + this.lastName
			}
		}		
	})
</script>