How does Vue handle events? Introduction to relevant basic knowledge

This article will introduce you to the basic knowledge of Vue event processing. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Vue event handling is a necessary aspect of every Vue project. It is used to capture user input, share data, and many other creative ways. [Related recommendation: "vue.js Tutorial"]

In this article, we will introduce the basic knowledge and provide some code examples for handling events. It only contains the tips/methods that I find most useful, for a deep dive into everything Vue can do, check out the Vue documentation.

Basic event handling

Using the v-on directive (@ for short), we can listen to DOM events and run handler methods or inline Javascript.

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

// OR

<div @click=&#39;handleClick&#39; />

Emitting custom events to parent components

A common use case in any web framework is to want child components to be able to emit events to their parent components, which is also the principle of two-way data binding.

A common example is sending data from the input component to the parent form.

The syntax for emitting events is different depending on whether we are using the Options API or the Composition API.

In the Options API, we can simply call this.$emit(eventName, payload) , the example is as follows:

export default {
  methods: {
    handleUpdate: () => {
      this.$emit('update', 'Hello World')
    }
  }
}

However, the Composition API is used in this way different. You need to use the emit method in the setup method provided by Vue3.

As long as the context object is imported, you can call emit with the same parameters as the Options API.

export default {
  setup (props, context) {
    const handleUpdate = () => {
      context.emit('update', 'Hello World')
    }

    return { handleUpdate }
  } 
}

Of course, I often use deconstruction in my projects:

export default {
  setup (props, { emit }) {
    const handleUpdate = () => {
      emit('update', 'Hello World')
    }

    return { handleUpdate }
  } 
}

Perfect!

Whether we use Options or Composition API, the way the parent group listens is the same.

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

First, we can access the passed value using $event in the template.

If there is a passed value in the component's emit method, we can capture it in two different ways, depending on whether we use inline or method.

The first is to use $event in the template to access the passed value.

<HelloWorld @update=&#39;inputUpdated($event)&#39;/>

Second, use a method to handle the event, then the value passed will be automatically passed to our method as the first parameter.

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

// ...

methods: {
    inputUpdated: (value) => {
      console.log(value) // WORKS TOO
    }
}

Mouse Modifiers

Here is a list of the main DOM mouse events we can capture in the v-on directive:

<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>

For click event, we can also add mouse event modifiers to limit which mouse button will trigger our event. There are three: left, right and middle.

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

Keyboard Modifier

We can listen to three DOM keyboard events:

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

Usually, we want to detect these events on a certain key, there are two ways to do it Do this.

• keycodes

• Vue has aliases for certain keys (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;
/>

System Modifier

For some projects, we may only want to trigger an event if the user presses a modifier key. Modifier keys are similar to Command or shift.

In Vue, there are four system modifiers.

• shift

• alt

• ##ctrl

• meta (CMD on mac, Windows key on Windows)

This is useful for creating things like custom keyboard shortcuts in Vue applications.

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

In the Vue documentation, there is also a

exact modifier to ensure that the event is only triggered when the key we specify is pressed and no other keys are pressed.

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

Event Modifiers

For all DOM events, we can use some modifiers to change the way they run. Whether to stop propagation or prevent default actions, Vue has two built-in DOM event modifiers.

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

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

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

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

English original address: https://segmentfault.com/a/1190000039938779

Author: Fernando Doglio

Translator: Front-end Xiaozhi

For more programming related knowledge, please visit:

Programming Video! !

The above is the detailed content of How does Vue handle events? Introduction to relevant basic knowledge. For more information, please follow other related articles on the PHP Chinese website!