Vue 3 — Keyboard and Mouse
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:23:13

---
title: Vue 3 — Keyboard and Mouse
published: true
date: 2020-07-26 01:34:00 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/26/vue-3%e2%80%8a-%e2%80%8akeyboard-and-mouse-2/?utm_source=rss&utm_medium=rss&utm_campaign=vue-3%25e2%2580%258a-%25e2%2580%258akeyboard-and-mouse-2
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to handle key and mouse events in Vue 3 components.

### Key Modifiers

Vue 3 can handle keyboard events.

For instance, we can write:

```
<input @keyup.enter="submit" />

```

to run the `submit` method when the `keyup` event is triggered by pressing the enter key.

Any valid key name is acceptable as the modifier.

The following key aliases can also be used as modifiers:

- `.enter`
- `.tab`
- `.delete` (captures both "Delete" and "Backspace" keys)
- `.esc`
- `.space`
- `.up`
- `.down`
- `.left`
- `.right`

### System Modifier Keys

We can also add modifiers for system modifier keys like Alt and Ctrl.

We can use the following as modifiers:

- `.ctrl`
- `.alt`
- `.shift`
- `.meta`

The meta key is the Windows key on Windows keyboards.

On Sun keyboards, it’s the diamond key.

And on Macs, it’s the command key.

So we can listen to the Ctrl + Enter key combo press on an element by writing:

```
<input @keyup.ctrl.enter="clear" />

```

We can also listen to Ctrl + click by writing:

```
<div @click.ctrl="onCtrlClick">ctrl + click me</div>

```

### `.exact` Modifier

The `.exact` modifier lets us control the exact combination of system modifiers needed to trigger an event.

For example, if we have:

```
<button @click.ctrl="onClick">click me</button>

```

then if alt or shift is pressed, then `onClick` will also be run.

However, if we have:

```
<button @click.ctrl.exact="onCtrlClick">A</button>

```

Then `onCtrlClick` only runs when we Ctrl + click the button.

### Mouse Button Modifiers

Vue 3 also provides modifiers for mouse buttons.

They are:

- `.left`
- `.right`
- `.middle`

for listening to the presses of specific buttons.

### Listeners in HTML

Listeners in HTML frees the component code including DOM logic, which is cleaner than having them all in JavaScript.

When the view model is destroyed, all event listeners are automatically removed.

### Form Input Bindings

We can use the `v-model` directive to bind the input value to the state property.

It’s syntactic sugar for updating data on user input events.

`v-model` ignores the initial `value` , `checked` , or `selected` attributes found in any element.

Only the state in the Vue instances is treated as the source of truth.

Therefore, we should remove those attributes and just set the initial value in the Vue instance.

`v-model` internally uses different properties and emit different events for different input elements.

Text inputs use `value` property and `input` event.

Checkboxes and radio buttons use the `checked` property and `change` event.

Select fields use the `value` as a prop and `change` as an event.

To use the `v-model` directive, we can write:

```
<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <title>App</title>  
    <script src="https://unpkg.com/vue@next"></script>  
  </head>  
  <body>  
    <div id="app">  
      <input v-model="message" placeholder="message" />  
      <p>{{ message }}</p>  
    </div>  
    <script>  
      const vm = Vue.createApp({  
        data() {  
          return {  
            message: ""  
          };  
        }  
      }).mount("#app");  
    </script>  
  </body>  
</html>

```

We returned an object with the `message` property so that we can use it with `v-model` .

Then we render the value of `message` to show what we entered.

`v-model` will automatically synchronize the input value and the value of `message` .

Therefore, when we type something in the box, it’ll be displayed below it.

### Conclusion

We can listen to key and mouse events with `v-on` .

`v-model` binds the inputted value to the Vue instance state.

The post [Vue 3 — Keyboard and Mouse](https://thewebdev.info/2020/07/26/vue-3%e2%80%8a-%e2%80%8akeyboard-and-mouse-2/) appeared first on [The Web Dev](https://thewebdev.info).