Навешивание обработчиков событий в Vue

Давайте теперь запустим наш метод по какому-нибудь событию. Для того, чтобы навесить событие на какой-нибудь DOM элемент, нужно использовать директиву v-on.

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

Давайте попробуем на практике. Пусть у нас есть следующий метод:

App.vuemethods: {
  show: function() {
    alert('!');
  }
}

Пусть у нас есть следующая кнопка:

App.vue<template>
  <button>text</button>
</template>

Давайте сделаем так, чтобы по клику на эту кнопку вызывался метод show:

App.vue<template>
  <button v-on:click="show">text</button>
</template>

Обычно все пользуются сокращенным вариантом v-on. Он представляет собой символ @ перед именем события:

App.vue<template>
  <button @click="show">text</button>
</template>