Vue v-on

README.md

Vue v-on syntax

• The v-on directive follows this logic:

v-on:event="method"

• You can also use the shorthand syntax like

@event="method"

• Check out mozilla's vue documentation for some more info and examples

Button Example

This button will add to a counter when it is clicked

<template>
<button @click="counterAdd">Add 1</button>
</template>

• An accompanying method could look like this

data () {
  counter: 0
},
methods: {
  counterAdd: function(event) {
    return this.counter += 1
  }
}

Event modifiers

You can add event modifiers to manipulate how v-on will work. Here are a couple examples taken from the above noted mozilla documentation.

• .prevent : Will stop the page from reloading when a form has been submitted

• .once : Will listen for the event to be triggered once, and then will ignore it