Keeping value of v-on attribute isn’t always feasible especially in the event, where event handlers gets more complex. That's when v-on hang onto method.
<div id="hallo">
<!-- `hallo` is the name of a method defined below -->
<button v-on:click="halloclick">Hallo</button>
</div>
<script>
var hallo = new Vue({
el: '#hallo',
data: {
name: 'Hallo LC'
},
// methods to be defined under `methods` object
methods: {
halloclick: function (event) {
// `this` inside methods points to the Vue instance
alert('Hello ' + this.name + '!')
// `event` is the native DOM event
if (event) {
alert(event.target.tagName)
}
}
}
})
// you can invoke methods in JS as well
hallo.halloclick() // => 'Hallo LC'
</script>