Vue.js事件处理
1、v-on指令
用法如下:使用v-on：指令指定其执行的具体内容或者方法名即可。
<button v-on:click='num++'>giao</button>
简写形式
<button @click='num++'>giao</button>
随着业务逻辑的增加，这种方式并不适用于我们实际的开发，所以我们实际的开发中，一般把vue中的事件单独定义为一个方法。方法定义在vue中的methods中，如果要在该方法中使用vue的data中的属性时，使用this关键字来调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>{{num}}</p>
<button @click='say()'>giao</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
num : 0
},
methods:{
say(){
this.$data.num++;
}
}
});
</script>
</body>
</html>
如果方法中需要传递参数，或者得到调用方的对象。可以进行如下操作。
其中普通参数直接传入实际参数，在方法中定义形参即可，获取当前被触发的对象使用$event即可。
注意点：
如果事件直接绑定半数名称，那么默认会传递事件对象作为事件函数的第一个参数(就是直接加参数名不加小括号的形式。例如@click='btnClick' )
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是(event(例如@click='btnClick(123,345,)event)')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>{{num}}</p>
<button @click='say(500,600,$event)'>giao</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
num : 0
},
methods:{
say(p1,p2,event){
this.$data.num++;
console.log(p1);
console.log(p2);
console.log(event.target.tagName);
console.log(event.target.innerHTML);
}
}
});
</script>
</body>
</html>
2、事件修饰符
2.1、.stop阻止冒泡
什么是冒泡行为？
如果标签以及其父标签都存在click方法，那么点击子标签会自动再执行其父标签的单击事件。这种现象 就叫做冒泡。
如何阻止冒泡？
在vue中，我们可以通过.stop修饰符来实现冒泡的阻止。具体的操作：在子标签中加入@click.stop="eventName()"即可。
2.2、.prevent组织默认行为
什么又是默认行为呢？
在html页面中，我么的很多标签具有它自己本身的功能，例如a标签有点击跳转的功能，那么我们给它指定单击事件的时候就存在一些异议。此时可以使用时间修饰符来阻止它的默认行为。
如何阻止默认行为？
使用.prevent修饰符可以阻止默认行为，具体操作如下：
<a @click.prevent='handle'>跳转</a>
2.3、其他修饰符
在vue中还存在其他的事件修饰符，但是它们不是很常用，我们需要时再去查看即可。
另外事件修饰符还支持串联，例如@click.stop.prevent='handle()'，串联还存在先后顺序。
.capture
.self
.once
.passive
3、按键修饰符（键盘事件修饰符）
vue中不仅有鼠标事件的修饰符，还有键盘事件的修饰符。常用的如下
3.1、.enter修饰符
用法如下：<input type="button" @keyup.enter='handleSubmit()' v-model='pwd'>
3.2、.delete修饰符
这个修饰键，一般用于清空当前输入框，用法如下：<input type='input' @keyup.delete='handle()'>
其他按键修饰符
vue还提供了这些按键修饰符，这里不做过多的演示，需要的话可以去官网了解。
.tab
.esc
.up
.down
.space
.left
.right
自定义按键修饰符。
除了vue提供的这些按键修饰符以外，我们还可以使用config.keyCodes对象来自定义按键修饰符。
首先通过@keyup='handle'给标签添加一个键盘弹起事件，然后在该方法的方法体内获取按键的keyCode
handle:function(){concole.log(event.keyCode);}可以得到需要的按键的键码，
然后使用@keyup.键码='handle'即可。但是这样可读性比较低。所以一般我们使用vue中的自定义按键修饰 符，方法如下：在script标签中写上Vue.config.keyCode.aaa= 65 ;此时通过.aaa就可以实现，按下键码为65 的按钮的效果。