Fernando Doglio

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.

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.

In this article, you’ll cover the basics and provide some code examples for handling events. It contains only the tips/methods I find most useful, and for an in-depth look at all the things Vue can do, check out the Vue documentation.

Basic event handling

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

<div @click='handleClick' /> <div @click='handleClick' />Copy the code

Emit custom events to the parent component

A common use case in any Web framework is to want a child component to emit events to its parent, which is the principle of two-way data binding.

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

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

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

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

However, the Composition API is used differently. You need to use the emit method in the setup method provided with Vue3.

Once the context object is imported, emit can be called with the same parameters as the Options API.

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

    return { handleUpdate }
  } 
}
Copy the code

Of course, I often use deconstruction in my projects:

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

    return { handleUpdate }
  } 
}
Copy the code

Perfect!

The parent group listens the same way whether we use Options or the Composition API.

<HelloWorld @update='inputUpdated'/>
Copy the code

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

If a method has a pass value emitted from the component, we can capture it in two different ways, depending on whether we use inline or methods.

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

<HelloWorld @update='inputUpdated($event)'/>
Copy the code

Second, use a method to handle the event, and the value passed is automatically passed to our method as the first argument.

<HelloWorld @update='inputUpdated'/>

// ...

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

Mouse modifier

Here is a list of the major DOM mouse events we can capture in the V-ON directive:

<div 
  @mousedown='handleEvent'
  @mouseup='handleEvent'
  @click='handleEvent'
  @dblclick='handleEvent'
  @mousemove='handleEvent'
  @mouseover='handleEvent'
  @mousewheel='handleEvent'
  @mouseout='handleEvent'
>
Interact with Me!
</div>
Copy the code

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

<! <div @mousedown.left='handleLeftClick'> left </div>Copy the code

Keyboard modifier

We can listen to three DOM keyboard events:

<input
   type='text'
   placeholder='Type something'
   @keypress='handleKeyPressed'
   @keydown='handleKeyDown'
   @keyup='handleKeyUp'
/>
Copy the code

Typically, we want to detect these events on a key, and there are two ways to do this.

  1. keycodes
  2. Vue has aliases for certain keys (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' />Copy the code

System modifier

For some projects, we might just want to fire the event if the user presses the modifier key. Modifier keys are similar to Command or Shift.

In Vue, there are four system modifiers.

  1. shift
  2. alt
  3. ctrl
  4. Meta (CMD on MAC, Windows Key on Windows)

This is useful for creating features such as custom keyboard shortcuts in Vue applications.

<! <input type='text' placeholder=' type something' @keyup.shift.56='createList' />Copy the code

In the Vue document, there is also an exact modifier to ensure that events are fired only if the key we specify is pressed and no other keys are available.

<! -- Custom shortcut, > <input type='text' placeholder=' type something' @keyup.shift.56. Exact ='createList' />Copy the code

Event modifier

For all DOM events, we can use some modifiers to change how they work. Vue has two built-in DOM event modifiers, either to stop propagation or to block the default action.

<! <form @submit. Prevent > <! <form @submit.stop='submitForm'> <! <form @submit.stop. Prevent ='submitForm'> <! <div @close.once='handleClose'>Copy the code

~ finish, I am brush bowl wisdom, I went to brush bowl, bone white ~

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: learue co / 2020/01 / a – v…

communication

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.