Name: Vue 3 — Keyboard and Mouse
Rating: 2.2 (7303 reviews)
Author: aumayeung

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 appeared first on The Web Dev.

Vue 3 — Keyboard and Mouse