მოვლენების დამმუშავებლების დამატება 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>