Обработчики событий

Логика обработчика события может быть довольно сложной, поэтому оставлять JavaScript-код в значении атрибута v-on не всегда возможно. В этом случае v-on может принять и название метода, который необходимо вызвать.

Например:

<div id="example-2">
  <!-- `greet` — это название метода, определённого ниже -->
  <button v-on:click="greet">Поприветствовать</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // определяйте методы в объекте `methods`
  methods: {
    greet: function (event) {
      // `this` внутри методов указывает на экземпляр Vue
      alert('Привет, ' + this.name + '!')
      // `event` — нативное событие DOM
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// вызывать методы можно и императивно
example2.greet() // => 'Привет, Vue.js!'