Методы и события в 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>
Если загрузить страницу с этим кодом и кликнуть на текст "Сообщение", то появится всплывающее окно с текстом "Тише, мыши, кот на крыше".
Читайте продолжение темы методов и событий в Vue в статье "Методы и события в Vue (часть 2)".
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: