AppDividend
Latest Code Tutorials

Vue Event Handling Example

535

Get real time updates directly on you device, subscribe now.

Vue Event Handling Example is today’s leading topic. Events are typically used in combination with functions, and the function will not be executed before the event occurs. In this tutorial, we will see how to listen for DOM events that we can use to trigger methods. Vue allows us to handle events triggered by the user. Handling events helps add interactivity to a web application by responding to the user’s input.

Earn a Tech Degree and get the skills like Frontend Development or Javascript Development that can help you to launch a career. Join the program

Vue Event Handling Example

Let us install Vue.js using Vue CLI the following command.

vue create event

 

Vue Event Handling Example

I am using Vue CLI@3. So, if you have not installed then uninstall the previous version of CLI and then install the latest version of Vue CLI.

Hit the following command to open the project in VSCode.

cd event && code .

#Listening to Events

The user can interact with a view via click or mouse over or keyup to trigger an event on DOM elements. Vue.js API provides us with a v-on directive to handle these events.

Let us take an example of a v-on directive. We will add a click event on a button, and when we click that event, one event will be fired, and the counter value will increase by one.

Write the following code inside App.vue file.

<template>
  <div id="app">
    <label>The Count is: {{count}}</label><br />
    <button v-on:click="count++">Add Count</button>
  </div>
</template>

<script>

export default {
  name: 'app',
  data() {
    return {
      count: 0
    }
  }
}
</script>

Save the file and start the dev server.

npm run serve

Go to the http://localhost:8080/ 

#Method Event Handlers

In the above example, we have written the logic inside an expression like this: v-on:click=”count++.” Fortunately, we can also write one method that will do the increment like the following.

<template>
  <div id="app">
    <label>The Count is: {{count}}</label><br />
    <button v-on:click="addCounter()">Add Count</button>
  </div>
</template>

<script>

export default {
  name: 'app',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    addCounter() {
      return this.count++;
    }
  }
}
</script>

Here, we are incrementing the counter inside the method, and it is the most convenient way because the sometimes logic code is large, so it’s a best practice to write the code inside the method. There is also shorthand of v-on syntax.

<button @click="addCounter()">Add Count</button>

#Methods in Inline Handlers

Instead of binding directly to the method name, we can also use methods in an inline JavaScript statement:

<template>
  <div id="app">
    <button v-on:click="greet('hi')">Greet hi</button>
    <button v-on:click="greet('what')">Ask what</button>
  </div>
</template>

<script>

export default {
  name: 'app',

  methods: {
    greet(value) {
      alert(value)
    }
  }
}
</script>

#Event Modifiers

It is a pervasive need to call event.preventDefault() or event.stopPropagation() inside event handlers. We can also do this easily inside methods; it would be better if the functions can be purely about the data logic rather than having to deal with the DOM events.

To approach this problem, Vue.js provides event modifiers for v-on. Remember that modifiers are directive postfixes denoted by a dot.

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

There are frequently used method calls that are made when handling events. Vue has made it easier for us to implement these by using event modifiers.

For example, event.preventDefault() is the most often called when handling events to prevent the browsers default behavior like submitting the form.

Instead of having to write these out in the methods, we can use the modifiers provided by the vue-on directive.

<button @click.prevent="greet('what')">Ask what</button>

The other examples are the following.

Related Posts
1 of 15
<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- just the modifier -->
<form v-on:submit.prevent></form>

<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
<div v-on:click.capture="doThis">...</div>

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

#Key Modifiers

We can also listen for keyboard events; we often need to check for common key codes. Vue also allows adding key modifiers for v-on when listening for key events:

<input v-on:keyup.13="submit">

Remembering all the keyCodes is a hassle, so Vue provides aliases for the most commonly used keys:

<!-- same as above -->
<input v-on:keyup.enter="submit">

<!-- also works for shorthand -->
<input @keyup.enter="submit">

Here is the full list of the key modifier aliases:

  • .enter
  • .tab
  • .delete (captures both “Delete” and “Backspace” keys)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

Finally, Vue Event Handling Example is over. Thanks for taking.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.