Работа с методами и событиями в фреймворке Vue

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

Итак, пусть у нас в methods лежит метод с названием show, который пока просто выводит на экран восклицательный знак:

let app = new Vue({
el: '#app',
data: {
message: 'hello',
},
methods: {
show: function() {
alert('!');
}
}
});
Мы можем вызвать наш метод внутри фигурных скобок, подобно тому, как мы обращались к свойствам. В этом случае для метода следует поставить круглые скобки в конце:

<div id="app">
{{ show() }}
</div>
После запуска этого кода вы сразу же увидите алерт с восклицательным знаком. Почему алерт выводится сразу же - потому что мы пока не привязали наш метод ни к какому событию. Чуть ниже мы сделаем так, чтобы наш метод запускался, например, по нажатию на какую-нибудь кнопку.

Усложним
Давайте теперь выведем содержимое свойства message из data. Сделать это не так просто - в методах напрямую получить доступ к свойствам из data нельзя.

Однако, во Vue встроен следующий способ: мы можем обратиться к любому свойству из data с помощью this. То есть: если у нас есть свойство message, то внутри любого метода мы можем обратиться к нему так: this.message.

Давайте сделаем это:

let app = new Vue({
el: '#app',
data: {
message: 'hello',
},
methods: {
show: function() {
alert(this.message); // выведет 'hello'
}
}
});
Вызовем наш метод:

<div id="app">
{{ show() }}
</div>
После запуска этого кода вы сразу же увидите алерт с текстом 'hello'.

Навешиваем события
Давайте теперь запустим наш метод по какому-нибудь событию.

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

Давайте, например, по клику на кнопку вызовем метод show. Для этого в тег button добавим атрибут v-on:click со значением show:

<div id="app">
<button v-on:click="show">Нажми на меня</button>
</div>
Обратите внимание на то, что круглые скобки после названия метода не ставятся.

Давайте напишем реализацию метода show:

methods: {
show: function() {
alert(this.message);
}
}
Ну, а теперь соберем все вместе, запустим и по нажатию на кнопку увидим текст сообщения:

<div id="app">
<button v-on:click="show">Нажми на меня</button>
</div>
let app = new Vue({
el: '#app',
data: {
message: 'hello',
},
methods: {
show: function() {
alert(this.message);
}
}
});
Я думаю, что вы уже поняли, что с помощью v-on можно навешивать не только клики, но и другие события.