Методы и события в Vue (часть 1)

В предыдущих статьяхбыли рассмотрены две настройки Vue - это el и data. В этой статье мы рассмотрим настройки methods, которая возволяет хранить функции. Эти функции называются методами. Мы попробуем вызывать их по событиям.

Методы в Vue

Попробуем сделать простейший метод, который будет вызывать всплывающее окно "alert". Для этого модифицируем нашу заготовку из предыдущих статей.

let app = new Vue({
   el: '#application',
   methods: {
      msg: function() {
         alert('Тише, мыши, кот на крыше');
      }
   },
});

Для вызова метода используем такой код:

<div id="application">
   {{ msg() }}
</div>

Попробуйте перезагрузить страницу и сразу увидите сообщение Тише, мыши, кот на крыше.

Часто приходится использовать внутри метода данные из настройки. Попробуем создать настройку "data", в которой сохраним строку текста. А затем выведем его в сообщении. Для этого необходимо воспользоваться this. Получится такой код:

<div id="application">
   {{ msg() }}
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         text: 'Тише, мыши, кот на крыше'
      },
      methods: {
         msg: function() {
            alert(this.text);
         }
      },
   });
</script>

События DOM в Vue

Для выполнения метода по клику на DOM элемент в Vue необходимо воспользоваться атрибутом v-on:click. Попробуем изменить предыдущий пример так, чтобы сообщение выводилось при клике на кнопку, которую сделаем с помощью тега "span":

<div id="application">
   Сообщение
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         text: 'Тише, мыши, кот на крыше'
      },
      methods: {
         msg: function() {
            alert(this.text);
         }
      },
   });
</script>

Если загрузить страницу с этим кодом и кликнуть на текст "Сообщение", то появится всплывающее окно с текстом "Тише, мыши, кот на крыше".