本文主要介绍vue双击事件2.0的事件监控(点击-双击-鼠标事件)和事件修改器操作，有很好的参考价值。希望对你有帮助。来和边肖一起看看吧。
Vue 事件处理方法
您可以使用v-on指令来监听DOM事件，并在被触发时运行一些JavaScript代码。
v-on:click 单击事件
button class= BTN BTN-info v-on:click= add(1)/button
危险按钮：click= subtract(1)-/button
v-on:dblclick 双击事件
！-缩写语法-
button class= BTN BTN-info @ dblclick= add(5)/button
button class= BTN BTN-danger @ dblclick= subtract(5)-/button
v-on:mousemovemouseout 鼠标事件
div class= canvas @ mouseout= update
{{ x }} - {{ y }}
/div
新Vue({
艾尔：。vue-app ，
数据：{
年龄：25，
x:0，
y:0
},
方法：{
添加：功能(公司){
this.age=inc
},
减法：函数(dec){
this . age-=dec；
},
更新：函数(事件){
//console.log(事件)；
this . x=event . offsetx；
this . y=event . offsety；
}
}
});
但是很多事件处理逻辑会比较复杂，所以直接用v-on指令写JavaScript代码不可行。因此，v-on也可以接收需要调用的方法名。
Vue.js 事件修饰符
在事件处理程序中，虽然我们在方法中很容易实现这一点，但更好的方式是方法只有纯数据逻辑，而不是处理DOM事件细节。
为了解决这个问题，Vue.js为v-on提供了事件修改器。如前所述，修饰符由点号开头的指令后缀表示。停止。预防。捕获。自己。一次。消极的
！-阻止事件扩散-
p v-on:mousemove.stop Stop /p
！-点击事件只会被触发一次-
button class= BTN BTN-info v-on:click . once= add(1)/button
！-点击A链接弹出提示内容，不再重新加载页面-
pa v-on:click . prevent= alert() href= http://blog . 023 xs . cn rel= external no follow blog.023xs.cn/a/p
注意：使用修饰语时，顺序很重要；相应的代码将以相同的顺序生成。因此，使用v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素本身的点击。
Vue 按键修饰符
在监控键盘事件时，我们经常需要检查常见的键值。Vue允许在监听键盘事件时为v-on添加按键修饰符：
！-当用户输入内容时，按下回车键将触发事件-
input v-on:keyup . enter= Email type= text class= form-control placeholder= Email
！-当用户输入内容时，按Delete或Backspace键将触发事件-
input v-on:keyup . delete= Email type= text class= form-control placeholder= Email
全部的按键别名：
。进入。标签。删除(捕捉“删除”和“退格”键)。转义字符。空间。向上。向下。左边的。正确很难记住所有的键码，所以Vue为最常用的键提供了别名。当然，您也可以通过全局config.keyCodes对象自定义键修饰符别名。
补充知识：
vue给同一元素绑定单击click和双击事件dblclick，执行不同逻辑
在做项目的过程中，要求是点击孔位，点击弹出的对话框查看产品总数，双击弹出的对话框查看详情。起初，直接单击和dblclick被写在标记中，但无论如何，单击事件总是被执行。
解决方法：用定时器模拟大致时间的双击事件。
html部分代码：
div class=网格内容
el按钮
v-for=(item，index) in items :key=index
@click=storageCount(item.id)
@ dblclick . native= storage detail(item . id)
class=内嵌单元格
:class=colors[item.status]
{{item.id}}/el-button
/div。native主要用于监听组件根元素的原生事件，主要用于向自定义组件添加原生事件。
的官方解释。native修饰符是：有时，您可能希望在组件的根元素上侦听本机事件。您可以使用v-on修改器。本地人。
js部分代码
脚本
从“”导入desDialog。/dialog ；
从“”导入detailDialog。/detail dialog ；
var time=null//此处定义的时间为空
导出默认值{
名称：存储表，
组件：{
desDialog，
详细对话
},
道具：[providerid]，
data() {
返回{
颜色：[space ， isBuy]，
showDialog: false，
showDialogT: false
};
},
方法：{
//单击事件函数
存储帐户(id) {
清除超时(时间);//首先清除计时器
time=setTimeout(()={
this.showDialog=！this.showDialog
const obj={ }；
obj.cutname=id
obj。提供rid=this。提供rid
这个100美元商店。dispatch( GetStorageCount ，obj)；
}, 300);//大概时间300毫秒
},
//双击事件函数，清除计时器，直接处理逻辑
存储详细信息(id) {
清除超时(时间);//清除
this.showDialogT=！this.showDialogT
const obj={ }；
obj.cutname=id
obj。提供rid=this。提供rid
这个100美元商店。dispatch( GetStorageDetail ，obj)；
},
close() {
this.showDialog=false
},
壁橱(){
this.showDialogT=false
}
}
};
/脚本
以上这篇某视频剪辑软件双击事件2.0事件监听（点击-双击-鼠标事件)和事件修饰符操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
