Методы и события в 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мотрите другие статьи:
Была ли статья полезной?
Была ли эта статья полезна? Есть вопрос?
хостинг для сайтов
Закажите недорогой хостинг Заказать

всего от 290 руб