遇见 vue.js --------阿文的vue.js学习笔记（9）------事件处理

**
新学习新征程，我们一起踏上学习 vue.js的新长征

… … …

关注我，我们一起学习进步。

既然说到事件处理，那肯定要回想起我们前面所学过的 v-on 绑定事件监听 (用来监听 DOM 事件，并在触发时，运行一些 js 代码)

1、事件处理方法

补充： 我们的v-on 可以简写成 @ ，这两者产生的效果是一样的

这里我们简单举个例子：有一个按钮，当点击的时候弹出一个“我被点击了”
在这里插入图片描述

当然有些时候，你会遇到它是直接将 js 代码写在 v-on 指令中的，但是当我们想要执行的 js 代码变多变复杂，这样写就是不可取的，所以我们一般都使用方法调用的形式，在下面的数据中创建一个方法，然后在上面的 v-on 指令中直接调用方法即可。

当我们需要在方法中传入参数的时候，就可以使用 内联处理器方法

简单示例：同样是弹出，只不过这次弹出的内容不再是死的，而是根据 v-on 后面调用方法时传入的参数来弹出。
在这里插入图片描述
当我们有时需要在内联语句处理器中访问原始的 DOM 事件的时候，就可以使用特殊变量 $event 来把它传入方法

简单示例：这里event.type 是来查看该事件的属性
在这里插入图片描述

其实这两种方式类似，只不过一种能传参，一种不能传参而已

2、事件修饰符

事件修饰符能够简单的处理一些DOM事件上的细节

我们的事件修饰符是直接写在绑定的指令后面 .事件修饰符

1、.stop 阻止冒泡

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
		<style>
			#b1{
    
    
				background-color: greenyellow;
				height: 300px;
				width: 300px;
			}
			#b2{
    
    
				background-color: red;
				height: 150px;
				width: 150px;
			}
		</style>
	</head>
	<body>
		<div id="a">			
			<div id="b1" v-on:click="fn2">
				<div id="b2" v-on:click="fn1"></div>
			</div>			
		</div>		
		<script>
			new Vue({
    
    
				el:"#a",
				data:{
    
    
					
				},
				methods:{
    
    
					fn1:function(){
    
    
						alert("内部被点击")
					},
					fn2:function(){
    
    
						alert("外部被点击")
					}
				}
			})
		</script>
	</body>
</html>

执行结果： 我们点击内部的时候，除了内部函数被执行外，外部的函数也被调用了，这就是发生了冒泡事件。

在这里插入图片描述
我们可以阻止冒泡通过添加 .stop

在这里插入图片描述

2、.prevent 阻止默认行为

简单示例：
每一次我们的submit 提交之后都会进行页面的刷新，重载。
但是像下面这样添加之后，就会将其阻止，不会再直接刷新了。
<form v-on:submit.prevent="onSubmit"></form>

当然除了上面常见的两种外，下面还补充几个：

.self 只作用在自己身上
.capture 添加事件监听器时使用事件捕获模式
once 只执行一次

2、按键修饰符

当我们在监听键盘事件的时候，我们经常会需要去检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

举个例子： 我们创建一个输入框，然后当我们输入内容按下enter 之后会将输入的数据传入输入框前面的信息当中，并且每次传入都会重置上一次输入的数据

在这里插入图片描述
按照我们以前的写法的话就需要用if 来做判断

代码如下：
在这里插入图片描述
这种时候我们也可以省略掉下面的 if 判断语句，直接在上面写作：<input v-on:keyup.13="mm1">
执行出来的结果也是完全一样的。

当然我们的 Vue 也提供了一些常用的按键码的别名：
.enter 回车键
.tab TAB键
.delete(捕获“删除”和“退格”键)
.esc 退出键
.space 空格键
.up 上
.down 下
.left 左
.right 右

3、系统修饰键

我们可以用如下的系统修饰符来实现仅在按下相应的系统修饰键时，再按其他的才会触发鼠标或键盘事件的监听器。

系统修饰键一共有四个：

.ctrl
.alt
.shift
.meta

简单举个例子：就在我们上面那个例子的基础上进行修改
<input v-on:keyup.alt.enter="mm2">

这样写之后，就意味着，我们需要在按下alt 的基础下再按下 enter 键并释放 enter 键之后，我们的 mm2 事件才会被触发。

**
关注校园君有话说公众号，回复 web前端免费领取50G 前端学习资料一份，我们一起学习进步吧。
在这里插入图片描述
**