Vue - Method Event Handlers

Question

 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>