作者:Fernando Doglio
译者:前端小智
来源:medium
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
Vue事件处理是每个Vue项目的必要方面。 它用于捕获用户输入,共享数据以及许多其他创造性方式。
在本文中,会介绍基础知识,并提供一些用于处理事件的代码示例。 它仅包含我认为最有用的技巧/方法,要深入了解Vue可以做的所有事情,请查看Vue文档。
使用v-on
指令(简称@
),我们可以监听DOM事件并运行处理程序方法或内联Javascript。
// v-on 指令
<div v-on:click='handleClick' />
// OR
<div @click='handleClick' />
任何Web框架中的常见用例都是希望子组件能够向其父组件发出事件,这也是双向数据绑定原理。
常见一个示例是将数据从 input
组件发送到父表单。
根据我们使用的是Options API还是Composition API,发出事件的语法是不同的。
在 Options API 中,我们可以简单地调用this.$emit(eventName, payload)
,示例如下:
export default {
methods: {
handleUpdate: () => {
this.$emit('update', 'Hello World')
}
}
}
但是,Composition API 使用方式与此不同。 需要在 Vue3 提供的 setup
方法使用emit
方法。
只要导入context对象,就可以使用与Options API相同的参数调用emit
。
export default {
setup (props, context) {
const handleUpdate = () => {
context.emit('update', 'Hello World')
}
return { handleUpdate }
}
}
当然,我在项目中经常使用解构的方式来使用:
export default {
setup (props, { emit }) {
const handleUpdate = () => {
emit('update', 'Hello World')
}
return { handleUpdate }
}
}
完美!
无论我们使用Options 还是 Composition API,父组监听的方式都是一样的。
<HelloWorld @update='inputUpdated'/>
首先,我们可以在模板中使用$ event访问传递的值。
如果在组件 emit 出去方法有传递值,我们可以通过两种不同的方式捕获它,这取决于我们是使用内联还是使用方法。
第一种是在模板中使用$event
访问传递的值。
<HelloWorld @update='inputUpdated($event)'/>
第二,使用方法来处理事件,则传递的值将作为第一个参数自动传递给我们的方法。
<HelloWorld @update='inputUpdated'/>
// ...
methods: {
inputUpdated: (value) => {
console.log(value) // WORKS TOO
}
}
下面是我们可以在v-on
指令中捕获的主要DOM鼠标事件列表:
<div
@mousedown='handleEvent'
@mouseup='handleEvent'
@click='handleEvent'
@dblclick='handleEvent'
@mousemove='handleEvent'
@mouseover='handleEvent'
@mousewheel='handleEvent'
@mouseout='handleEvent'
>
Interact with Me!
</div>
对于单击事件,我们还可以添加鼠标事件修饰符来限制哪个鼠标按钮将触发我们的事件。有三个: left
,right
和 middle
。
<!-- 这只会触发鼠标左键 -->
<div @mousedown.left='handleLeftClick'> Left </div>
我们可以听三个DOM键盘事件:
<input
type='text'
placeholder='Type something'
@keypress='handleKeyPressed'
@keydown='handleKeyDown'
@keyup='handleKeyUp'
/>
通常,我们想检测某个键上的这些事件,有两种方法可以执行此操作。
enter
, tab
, delete
, esc
, space
, up
, down
, left
, right
)<!-- Trigger even when enter is released -->
<input
type='text'
placeholder='Type something'
@keyup.enter='handleEnter'
/>
<!-- OR -->
<input
type='text'
placeholder='Type something'
@keyup.13='handleEnter'
/>
对于某些项目,我们可能只想在用户按下修饰键的情况下触发事件。 修饰键类似于Command
或shift
。
在Vue中,有四个系统修饰符。
这对于在Vue应用程序中创建诸如自定义键盘快捷键之类的功能非常有用。
<!-- 自定义快捷方式,杨使用Shift + 8 创建列表 -->
<input
type='text'
placeholder='Type something'
@keyup.shift.56='createList'
/>
在Vue文档中,还有一个exact
的修饰符,以确保仅在按下我们指定的键且没有其他键的情况下才触发事件。
<!-- 自定义快捷方式,只有Shift + 8 这两个按下时才会创建列表-->
<input
type='text'
placeholder='Type something'
@keyup.shift.56.exact='createList'
/>
对于所有DOM事件,我们可以使用一些修饰符来更改其运行方式。 无论是停止传播还是阻止默认操作,Vue都有两个内置的DOM事件修饰符。
<!-- 阻止默认行为 -->
<form @submit.prevent>
<!-- 阻止冒泡 -->
<form @submit.stop='submitForm'>
<!-- 阻止默认行为和冒泡 -->
<form @submit.stop.prevent='submitForm'>
<!-- 防止事件被多次触发 -->
<div @close.once='handleClose'>
~ 完,我是刷碗智,我去刷碗了,骨得白~
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文:https://learue.co/2020/01/a-v...
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588... 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
在HTML5中,我们可以使用drawImage方法在canvas上进行画图操作,其基本代码如下...
在CSS中,根据元素显示模式的不同元素标签被分为了两类:行内元素(inline-level...
本文是介绍 RecyclerView 入门基础 系列文章 的第四篇。如果您已经对创建 Recycl...
为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼,国务...
前言 在制作顶部菜单的时候,都会要求制作弹出的二级菜单,早先的做法是用jQuery...
前言: 不知多久能学会 Elisp 上一章: 动态模块 从本章开始,进入这份 Elisp 教...
【内容】: 1.利用background-image 渐变样式 2.可以利用scale缩放 3.给伪元素设...
打开纯文本代码链接时,自动高亮代码,支持191种语言,97个主题 特性 支持191种...
简介 处理大量并发是 Go 语言的一大优势。语言内置了方便的并发语法,可以非常方...
微信搜索【 脑子进煎鱼了 】关注这一只爆肝煎鱼。本文 GitHub github.com/eddycj...