本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家介绍一下Vue事件处理的基础知识。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。Vue事件处理是每个Vue项目的必要方面。 它用于捕获用户输入,共享数据以及许多其他创造性方式。【相关推荐:《vue.js教程》】
在本文中,会介绍基础知识,并提供一些用于处理事件的代码示例。 它仅包含我认为最有用的技巧/方法,要深入了解Vue可以做的所有事情,请查看Vue文档。
基本事件处理
使用v-on
指令(简称@
),我们可以监听DOM事件并运行处理程序方法或内联Javascript。
1 2 3 4 5 6 |
|
向父组件发出自定义事件
任何Web框架中的常见用例都是希望子组件能够向其父组件发出事件,这也是双向数据绑定原理。
常见一个示例是将数据从 input
组件发送到父表单。
根据我们使用的是Options API还是Composition API,发出事件的语法是不同的。
在 Options API 中,我们可以简单地调用this.$emit(eventName, payload)
,示例如下:
1 2 3 4 5 6 7 |
|
但是,Composition API 使用方式与此不同。 需要在 Vue3 提供的 setup
方法使用emit
方法。
只要导入context对象,就可以使用与Options API相同的参数调用emit
。
1 2 3 4 5 6 7 8 9 |
|
当然,我在项目中经常使用解构的方式来使用:
1 2 3 4 5 6 7 8 9 |
|
完美!
无论我们使用Options 还是 Composition API,父组监听的方式都是一样的。
1 |
|
首先,我们可以在模板中使用$ event访问传递的值。
如果在组件 emit 出去方法有传递值,我们可以通过两种不同的方式捕获它,这取决于我们是使用内联还是使用方法。
第一种是在模板中使用$event
访问传递的值。
1 |
|
第二,使用方法来处理事件,则传递的值将作为第一个参数自动传递给我们的方法。
1 2 3 4 5 6 7 8 9 |
|
鼠标修饰符
下面是我们可以在v-on
指令中捕获的主要DOM鼠标事件列表:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
对于单击事件,我们还可以添加鼠标事件修饰符来限制哪个鼠标按钮将触发我们的事件。有三个: left
,right
和 middle
。
1 2 |
|
键盘修饰符
我们可以听三个DOM键盘事件:
1 2 3 4 5 6 7 |
|
通常,我们想检测某个键上的这些事件,有两种方法可以执行此操作。
keycodes
Vue具有某些键的别名(
enter
,tab
,delete
,esc
,space
,up
,down
,left
,right
)
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
系统修饰符
对于某些项目,我们可能只想在用户按下修饰键的情况下触发事件。 修饰键类似于Command
或shift
。
在Vue中,有四个系统修饰符。
shift
alt
ctrl
meta (在mac上是CMD,在Windows上是Windows键)
这对于在Vue应用程序中创建诸如自定义键盘快捷键之类的功能非常有用。
1 2 3 4 5 6 |
|
在Vue文档中,还有一个exact
的修饰符,以确保仅在按下我们指定的键且没有其他键的情况下才触发事件。
1 2 3 4 5 6 |
|
事件修饰符
对于所有DOM事件,我们可以使用一些修饰符来更改其运行方式。 无论是停止传播还是阻止默认操作,Vue都有两个内置的DOM事件修饰符。
1 2 3 4 5 6 7 8 9 10 11 |
|
英文原文地址:https://segmentfault.com/a/1190000039938779
作者:Fernando Doglio
译者:前端小智
更多编程相关知识,请访问:编程视频!!
以上就是Vue如何进行事件处理?相关基础知识介绍的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《vue.js》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者