Прикачване на манипулатори на събития във Vue

Нека сега стартираме нашия метод чрез някакво събитие. За да прикачим събитие към някой DOM елемент, трябва да използваме директивата v-on.

В тази директива след двоеточието трябва да се посочи името на събитието, а за стойност - името на метода, който трябва да бъде извикан при настъпване на това събитие.

Нека опитаме на практика. Да предположим, че имаме следния метод:

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

Да предположим, че имаме следния бутон:

App.vue<template>
  <button>текст</button>
</template>

Нека направим така, че при клик върху този бутон да се извиква методът show:

App.vue<template>
  <button v-on:click="show">текст</button>
</template>

Обикновено всички използват съкратения вариант v-on. Той се представя чрез символа @ пред името на събитието:

App.vue<template>
  <button @click="show">текст</button>
</template>