标签：事件处理 vue 标签 修饰符 js Vue 事件 按键 event
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 的按钮的效果。
标签：事件处理,vue,标签,修饰符,js,Vue,事件,按键,event 来源： https://www.cnblogs.com/zhangruifeng/p/12125257.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。