Handling DOM events with Vue v-on

This content originally appeared on CodeSource.io and was authored by Prince Chukwudire

In this guide, we will be taking a look at how to use the Vue v-on directive.

Basically, the v-on directive is used to listen to DOM events and run some JavaScript when they’re triggered.

Here’s a sample:

<template>
  <div>
    <button type="button" v-on:click="step += 1">Add Step</button>
    <p>The button has added {{ step }} steps</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      step: 2,
    };
  },
};
</script>

The post Handling DOM events with Vue v-on appeared first on CodeSource.io.

This content originally appeared on CodeSource.io and was authored by Prince Chukwudire

Print Share Comment Cite Upload Translate Updates

APA

Prince Chukwudire | Sciencx (2021-02-17T16:42:35+00:00) Handling DOM events with Vue v-on. Retrieved from https://www.scien.cx/2021/02/17/handling-dom-events-with-vue-v-on/

MLA

" » Handling DOM events with Vue v-on." Prince Chukwudire | Sciencx - Wednesday February 17, 2021, https://www.scien.cx/2021/02/17/handling-dom-events-with-vue-v-on/

HARVARD

Prince Chukwudire | Sciencx Wednesday February 17, 2021 » Handling DOM events with Vue v-on., viewed ,<https://www.scien.cx/2021/02/17/handling-dom-events-with-vue-v-on/>

VANCOUVER

Prince Chukwudire | Sciencx - » Handling DOM events with Vue v-on. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/17/handling-dom-events-with-vue-v-on/

CHICAGO

" » Handling DOM events with Vue v-on." Prince Chukwudire | Sciencx - Accessed . https://www.scien.cx/2021/02/17/handling-dom-events-with-vue-v-on/

IEEE

" » Handling DOM events with Vue v-on." Prince Chukwudire | Sciencx [Online]. Available: https://www.scien.cx/2021/02/17/handling-dom-events-with-vue-v-on/. [Accessed: ]

rf:citation

» Handling DOM events with Vue v-on | Prince Chukwudire | Sciencx | https://www.scien.cx/2021/02/17/handling-dom-events-with-vue-v-on/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.