登录  /  注册
首页 > web前端 > Vue.js > 正文

Vue如何进行事件处理?相关基础知识介绍

青灯夜游
发布: 2021-06-02 13:45:52
转载
2103人浏览过

本篇文章给大家介绍一下vue事件处理的基础知识。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

Vue如何进行事件处理?相关基础知识介绍

Vue事件处理是每个Vue项目的必要方面。 它用于捕获用户输入,共享数据以及许多其他创造性方式。【相关推荐:《vue.js教程》】

在本文中,会介绍基础知识,并提供一些用于处理事件的代码示例。 它仅包含我认为最有用的技巧/方法,要深入了解Vue可以做的所有事情,请查看Vue文档。

基本事件处理

使用v-on指令(简称@),我们可以监听DOM事件并运行处理程序方法或内联Javascript。

// v-on 指令
<div v-on:click=&#39;handleClick&#39; />

// OR

<div @click=&#39;handleClick&#39; />
登录后复制

向父组件发出自定义事件

任何Web框架中的常见用例都是希望子组件能够向其父组件发出事件,这也是双向数据绑定原理。

常见一个示例是将数据从 input组件发送到父表单。

根据我们使用的是Options API还是Composition API,发出事件的语法是不同的。

在 Options API 中,我们可以简单地调用this.$emit(eventName, payload) ,示例如下:

export default {
  methods: {
    handleUpdate: () => {
      this.$emit(&#39;update&#39;, &#39;Hello World&#39;)
    }
  }
}
登录后复制

但是,Composition API 使用方式与此不同。 需要在 Vue3 提供的 setup方法使用emit方法。

只要导入context对象,就可以使用与Options API相同的参数调用emit

export default {
  setup (props, context) {
    const handleUpdate = () => {
      context.emit(&#39;update&#39;, &#39;Hello World&#39;)
    }

    return { handleUpdate }
  } 
}
登录后复制

当然,我在项目中经常使用解构的方式来使用:

export default {
  setup (props, { emit }) {
    const handleUpdate = () => {
      emit(&#39;update&#39;, &#39;Hello World&#39;)
    }

    return { handleUpdate }
  } 
}
登录后复制

完美!

无论我们使用Options 还是 Composition API,父组监听的方式都是一样的。

<HelloWorld @update=&#39;inputUpdated&#39;/>
登录后复制

首先,我们可以在模板中使用$ event访问传递的值。

如果在组件 emit 出去方法有传递值,我们可以通过两种不同的方式捕获它,这取决于我们是使用内联还是使用方法。

第一种是在模板中使用$event访问传递的值。

<HelloWorld @update=&#39;inputUpdated($event)&#39;/>
登录后复制

第二,使用方法来处理事件,则传递的值将作为第一个参数自动传递给我们的方法。

<HelloWorld @update=&#39;inputUpdated&#39;/>

// ...

methods: {
    inputUpdated: (value) => {
      console.log(value) // WORKS TOO
    }
}
登录后复制

鼠标修饰符

下面是我们可以在v-on指令中捕获的主要DOM鼠标事件列表:

<div 
  @mousedown=&#39;handleEvent&#39;
  @mouseup=&#39;handleEvent&#39;
  @click=&#39;handleEvent&#39;
  @dblclick=&#39;handleEvent&#39;
  @mousemove=&#39;handleEvent&#39;
  @mouseover=&#39;handleEvent&#39;
  @mousewheel=&#39;handleEvent&#39;
  @mouseout=&#39;handleEvent&#39;
>
Interact with Me!
</div>
登录后复制

对于单击事件,我们还可以添加鼠标事件修饰符来限制哪个鼠标按钮将触发我们的事件。有三个: leftrightmiddle

<!-- 这只会触发鼠标左键 -->
<div @mousedown.left=&#39;handleLeftClick&#39;> Left </div>
登录后复制

键盘修饰符

我们可以听三个DOM键盘事件:

<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keypress=&#39;handleKeyPressed&#39;
   @keydown=&#39;handleKeyDown&#39;
   @keyup=&#39;handleKeyUp&#39;
/>
登录后复制

通常,我们想检测某个键上的这些事件,有两种方法可以执行此操作。

  • keycodes

  • Vue具有某些键的别名(enter, tab, delete, esc, space, up, down, left, right)

<!-- Trigger even when enter is released -->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.enter=&#39;handleEnter&#39;
/>

<!-- OR -->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.13=&#39;handleEnter&#39;
/>
登录后复制

系统修饰符

对于某些项目,我们可能只想在用户按下修饰键的情况下触发事件。 修饰键类似于Commandshift

在Vue中,有四个系统修饰符。

  • shift

  • alt

  • ctrl

  • meta (在mac上是CMD,在Windows上是Windows键)

这对于在Vue应用程序中创建诸如自定义键盘快捷键之类的功能非常有用。

<!-- 自定义快捷方式,杨使用Shift + 8 创建列表 -->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.shift.56=&#39;createList&#39;
/>
登录后复制

在Vue文档中,还有一个exact的修饰符,以确保仅在按下我们指定的键且没有其他键的情况下才触发事件。

<!-- 自定义快捷方式,只有Shift + 8 这两个按下时才会创建列表-->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.shift.56.exact=&#39;createList&#39;
/>
登录后复制

事件修饰符

对于所有DOM事件,我们可以使用一些修饰符来更改其运行方式。 无论是停止传播还是阻止默认操作,Vue都有两个内置的DOM事件修饰符。

<!-- 阻止默认行为 -->
<form @submit.prevent>

<!-- 阻止冒泡 -->
<form @submit.stop=&#39;submitForm&#39;>

<!-- 阻止默认行为和冒泡 -->
<form @submit.stop.prevent=&#39;submitForm&#39;>

<!-- 防止事件被多次触发 -->
<p @close.once=&#39;handleClose&#39;>
登录后复制

英文原文地址:https://segmentfault.com/a/1190000039938779

作者:Fernando Doglio

译者:前端小智

更多编程相关知识,请访问:编程视频!!

以上就是Vue如何进行事件处理?相关基础知识介绍的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号