Anexando manipuladores de eventos em Vue

Agora vamos acionar nosso método através de algum evento. Para anexar um evento a um elemento DOM, é necessário usar a diretiva v-on.

Nesta diretiva, após os dois pontos, deve-se especificar o nome do evento, e o valor - o nome do método que deve ser chamado quando o evento ocorrer.

Vamos tentar na prática. Suponha que temos o seguinte método:

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

Suponha que temos o seguinte botão:

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

Vamos fazer com que ao clicar neste botão, o método show seja chamado:

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

Geralmente, todos usam a versão abreviada de v-on. Ela é representada pelo símbolo @ antes do nome do evento:

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