好资源导航 » 文章资讯 » 详解Vue之事件处理

详解Vue之事件处理

2023-07-21 19:19:04 82

在Vue进行前端开发中，事件监听是必不可少的功能，本文通过简单的小例子，简述v-on的简单用法，仅供学习分享使用，如有不足之处，还请指正。

监听事件

可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。如下所示：

Add1
按钮被点击了{{counter}}次.

其中counter为Vue自定义的一个属性值。

事件处理方法

事实上，许多事件处理逻辑会更为复杂，所以直接把JavaScript代码写在v-on指令中是不可行的。因此v-on还可以接收一个需要调用的方法名称。如下所示：

Greet

greet是在下面定义的方法名。如下所示：


varapp=newVue({
el:'#app',
data:{
msg:'helloworld!!!',
counter:0,
name:'Vue.js'
},
//在`methods`对象中定义方法
methods:{
greet:function(event){
//`this`在方法里指向当前Vue实例
alert('Hello'+this.name+'!')
//`event`是原生DOM事件
if(event){
alert(event.target.tagName)
}
},

}
});

内联处理器中的方法

除了直接绑定到一个方法，也可以在内联JavaScript语句中调用方法，如下所示：

Sayhi
Saywhat

有时也需要在内联语句处理器中访问原始的DOM事件。可以用特殊变量$event把它传入方法：

提交

其中say，warn均为自定义方法，如下所示：

say:function(message){
alert(message);
},
warn:function(message,event){
//现在我们可以访问原生事件对象
if(event){
event.preventDefault();
}
alert(message);
}

事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。为了解决这个问题，Vue.js为v-on提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。事件修饰符共以下几种：

.stop
.prevent
.capture
.self
.once
.passive


点击666


阻止提交





只有修饰符

doThis...

doThat...

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击。

新增属性

不像其它只能对原生的DOM事件起作用的修饰符，.once修饰符还能被用到自定义的组件事件上。


点我一次666

Vue还对应addEventListener中的passive选项提供了.passive修饰符。

...

这个.passive修饰符尤其能够提升移动端的性能。不要把.passive和.prevent一起使用，因为.prevent将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

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

系统修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta

注意：在Mac系统键盘上，meta对应command键(⌘)。在Windows系统键盘meta对应Windows徽标键(⊞)。在Sun操作系统键盘上，meta对应实心宝石键(◆)。在其他特定键盘上，尤其在MIT和Lisp机器的键盘、以及其后继产品，比如Knight键盘、space-cadet键盘，meta被标记为“META”。在Symbolics键盘上，meta被标记为“META”或者“Meta”。





Dosomething

请注意：修饰键与常规按键不同，在和keyup事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住ctrl的情况下释放其它按键，才能触发keyup.ctrl。而单单释放ctrl也不会触发事件。如果你想要这样的行为，请为ctrl换用keyCode：keyup.17。

.exact修饰符

.exact修饰符允许你控制由精确的系统修饰符组合触发的事件。


A

A

A

鼠标按钮修饰符

这些修饰符会限制处理函数仅响应特定的鼠标按钮，如下所示：

.left
.right
.middle

为什么在HTML中监听事件?

你可能注意到这种事件监听的方式违背了关注点分离(separationofconcern)这个长期以来的优良传统。但不必担心，因为所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上，它不会导致任何维护上的困难。实际上，使用v-on有几个好处：

扫一眼HTML模板便能轻松定位在JavaScript代码里对应的方法。
因为你无须在JavaScript里手动绑定事件，你的ViewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试。
当一个ViewModel被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

本例中全部代码如下所示：





事件处理





监听事件

Add1
按钮被点击了{{counter}}次.
事件处理方法


Greet

内联处理器中的方法

Sayhi
Saywhat



提交
事件修饰符


点击666





阻止提交











只有修饰符






doThis...




doThat...

新增

点我一次666





...

按键修饰符






#按键码



系统修饰键





Dosomething

#.exact修饰符


A


A


A
#鼠标按钮修饰符

为什么在HTML中监听事件?



varapp=newVue({
el:'#app',
data:{
msg:'helloworld!!!',
counter:0,
name:'Vue.js'
},
//在`methods`对象中定义方法
methods:{
greet:function(event){
//`this`在方法里指向当前Vue实例
alert('Hello'+this.name+'!')
//`event`是原生DOM事件
if(event){
alert(event.target.tagName)
}
},
say:function(message){
alert(message);
},
warn:function(message,event){
//现在我们可以访问原生事件对象
if(event){
event.preventDefault();
}
alert(message);
},
doThis:function(){
alert('点我666');
},
doThat:function(){
alert('点它666');
},
submit:function(){
alert('点我--submit');
},
onPageDown:function(){
alert('点我--onPageDown');
},
doSomething:function(){
alert('点我--doSomething');
},
clear:function(){
alert('点我--clear');
},
onClick:function(){
alert('点我--onClick');
},
onCtrlClick:function(){
alert('点我--onCtrlClick');
}
}
});

以上就是详解Vue之事件处理的详细内容，更多关于Vue之事件处理的资料请关注毛票票其它相关文章！

返回顶部
514930285
czq8825@qq.com

详解Vue之事件处理

监听事件

事件处理方法

内联处理器中的方法

事件修饰符

新增

按键修饰符

#按键码

系统修饰键

#.exact修饰符

#鼠标按钮修饰符

为什么在HTML中监听事件?

热门推荐

随机推荐