本文主要介绍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:mousemove\mouseout 鼠标事件
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事件监听（点击-双击-鼠标事件)和事件修饰符操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。