Vue3 之 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'
/>

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

  1. keycodes
  2. Vue具有某些键的别名(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中,有四个系统修饰符

  1. shift
  2. alt
  3. ctrl
  4. meta (在mac上是CMD,在Windows上是Windows键)

这对于在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

到此这篇关于Vue3 之 Vue 事件处理指南的文章就介绍到这了,更多相关Vue 事件处理指南内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue3.0+vant3.0快速搭建项目的实现

    目录 一.项目的搭建 二.vue3体验+vant引入 2020年09月18日,vue.js 3.0正式发布,去网上看了看关于3.0的教程都不够完整,但其实vuecli最新版已经支持了vue3.0项目的快速搭建,这篇文章将带你了解一下vue3.0有哪些新的改变以及如何快速搭建vue3.0项目. 一.项目的搭建 1.首先,nodejs的安装不用我多说了吧,nodejs官网地址. 2.既然vuecli最新版已经可以快速搭建3.0了,那怎么升级到最新版呢?vue-cli官网地址,不知道vue-cli版本

  • 关于vue3默认把所有onSomething当作v-on事件绑定的思考

    最近在重新看vue3的rfcs,发现一个细节,原话如下: props that start with on are handled as v-on bindings, with everything after on being converted to all-lowercase as the event name (more on this below) 也就是说,以后如果你在传递props的时候,以 on 开头的props,如果在组件上没有做props的声明,那么会被当作事件绑定到组件的根

  • 一文带你了解vue3.0响应式

    目录 使用案例 reactive API相关的流程 reactive createReactiveObject 创建响应式对象 mutableHandlers 处理函数 get函数 get函数的的调用时机 track 收集依赖 set函数 trigger 分发依赖 get和副作用渲染函数关联 副作用渲染函数的执行过滤 结尾 我们知道Vue 2.0是利用Ojbect.defineProperty对对象的已有属性值的读取和修改进行劫持,但是这个API不能监听对象属性的新增和删除,此外为了深度劫持对象

  • 浅谈Vue3 defineComponent有什么作用

    目录 defineComponent重载函数 开发实践 defineComponent函数,只是对setup函数进行封装,返回options的对象: export function defineComponent(options: unknown) { return isFunction(options) ? { setup: options } : options } defineComponent最重要的是:在TypeScript下,给予了组件 正确的参数类型推断 . defineCompo

  • 利用Vue3实现一个可以用js调用的组件

    目录 前言 一.常规Vue组件 1. 组件主要代码: 2. 使用方式 3. 实现效果 二.改为js调用组件 1. 实现步骤: 2. 具体实现代码: 3. 实现效果展示 总结 前言 项目开发中基本都会用到组件库,但是设计稿样式和功能不一定和组件库相同,尤其像是消息提示弹窗.确认弹窗,各个项目各个设计师都有自己的一套风格.虽然我们可以使用组件库中的组件对其进行样式覆盖来使用.但是一些定制功能还是不容易修改,这种情况我们就会选择自定义组件,然后通过 components 属性引入页面,显式写入标签调用

  • 详解vue3.2新增的defineCustomElement底层原理

    目录 Web Components customElements 概述 HTMLTemplateElement 内容模板元素 概述 常用属性 ShadowRoot 概述 Web Components Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们. 相当于是浏览器原生的定义组件的方式,不用通过vue或者react这些框架实现组件的定义 customElements 概述 customElements 是Wi

  • Vue3 之 Vue 事件处理指南

    目录 一.基本事件处理 二.向父组件发出自定义事件 三.鼠标修饰符 四.键盘修饰符 五.系统修饰符 六.事件修饰符 一.基本事件处理 使用v-on指令(简称@),我们可以监听DOM事件并运行处理程序方法或内联Javascript. // v-on 指令 <div v-on:click='handleClick' /> // OR <div @click='handleClick' /> 二.向父组件发出自定义事件 任何Web框架中的常见用例都是希望子组件能够向其父组件发出事件,这也

  • Vue 事件处理操作实例详解

    本文实例讲述了Vue 事件处理操作.分享给大家供大家参考,具体如下: 1 监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. html: <div id="app1"> <button v-on:click="counter +=1">递增</button> <p>按钮已被点击 {{ counter }} 次.</p> </div> js: va

  • Vue开发指南之重点知识梳理

    概述 如果您是Vue开发的新手,您可能已经听过很多关于它的专业术语了,例如:单页面应用程序.异步组件.服务器端呈现等. 另外您可能还经常听到和Vue一起提到的工具和库,如Vuex.Webpack.Vue CLI和Nuxt. 也许您在面对这些未知的术语和工具时会感到无助和绝望,没关系,您并不孤单,因为这是所有新手在初次接触Vue时都会有的感受. 但如果您试图要一次掌握所有这些内容,那么这些庞大的体系很可能会压垮你.为此,我在这里将为大家展示一个"知识图表",它包含了所有在专业Vue开发过

  • 利用Vue3 创建Vue CLI 项目(一)

    目录 一.官方文档 二.创建Vue CLI项目 1.安装Vue CLI 2.创建web应用 3.启动web应用 三.Vue CLI项目结构讲解 一.官方文档 Vue3文档 - vuejs https://www.vue3js.cn/docs/zh/ Vue核心功能:数据绑定 Vue CLI文档 https://cli.vuejs.org/zh/guide/ Vue CLI = Vue.js + 一堆组件 二.创建Vue CLI项目 1.安装Vue CLI 淘宝镜像 SQL: npm get re

  • Vue3之 Vue CLI多环境配置

    目录 一.前言 二.实现切换 1.增加开发和生产配置文件 2.修改编译和启动支持多环境 3.修改axios请求地址支持多环境 一.前言 这里相对于之前就没那么麻烦了,通俗点说就是使用配置文件来管理多环境,实现环境的切换. 二.实现切换 1.增加开发和生产配置文件 在web的根目录下,创建开发环境切换配置文件.env.dev,内容如下: NODE_ENV=development VUE_APP_SERVER=http://127.0.0.1:8880 在web的根目录下,创建线上环境切换配置文件.

  • vue3中vue.config.js配置及注释详解

    目录 报错 打包时提示文件过大,配置解决方案,如下 总结 报错 asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).This can impact web performance.entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit

  • vue3.0 vue.config.js 配置基础的路径问题

    目录 vue3.0 vue.config.js 配置基础路径 vue3.0+ 3.x config配置 vue3.0 vue.config.js 配置基础路径 在和src同级的路径下创建一个文件名,vue.config.js(这文件名是固定这么写的) 在文件中写入 module.exports = {     baseUrl:'/',//根路径     outputDir:'dist',//打包的时候生成的一个文件名     assetsDir:'assets',//静态资源目录(js,css,

  • Vue事件处理原理及过程详解

    Vue事件监听的方式貌似违背了关注点分离(separation of concern)的传统理念.实际上,所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上,它不会导致维护上的困难,使用v-on有以下好处: 1.扫一眼HTML模板便能轻松定位在JS代码里对应的方法. 2.无须在JS里手动绑定事件,ViewModel代码可以是非常纯粹的逻辑,和DOM完全解耦,更易于测试. 3.当一个ViewModel被销毁时,所有的事件处理器都会自动被删除,无须担心自己如何清理它们.

  • vue ssr 指南详读

    本帖说明 该贴是对vue SSR Guide解读和补充,对于官网文档已有内容会以引用方式体现.由于官网demo在国内无法运行,该贴最后也提供了一个完整的可以运行的demo,帖子中提到的代码均是来自于该demo,供学习交流. 介绍 什么是服务器端渲染(SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"

  • 详解Vue实战指南之依赖注入(provide/inject)

    案例 UI美眉说咱家的选项菜单太丑了,小哥哥能不能美化一下呀,洒家自然是说小意思啦~ 自定义一个select组件,so easy~ 简单粗暴型: <el-select v-model="favourite" :option="[]"></el-select> option作为数据进来就ok啦. 然后发现下列问题: key-value,不是所有的接口都是id-name option要disabled 怎么办? option存在几种情况怎么办?

随机推荐