Мы уже познакомились с двумя настройками 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'.
Пусть в data хранятся два числа:
data: {
num1: 1,
num2: 2,
},
Сделайте метод, который при запуске кода выведет алертом на экран сумму наших чисел.
Навешиваем события
Давайте теперь запустим наш метод по какому-нибудь событию.
Для того, чтобы навесить событие на какой-нибудь 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 можно навешивать не только клики, но и другие события.
Дана кнопка. В data дано свойство text, в котором хранится текст 'hello'. Сделайте так, чтобы по нажатию на кнопку алертом вывелся текст из свойства text.
Модифицируйте предыдущую задачу так, чтобы алерт выводился не по клику, а по наведению мышкой.
Пусть в data хранится следующее:
data: {
num1: 1,
num2: 2,
num3: 3,
}
Дана также кнопка. По нажатию на эту кнопку выведите алертом сумму свойств num1, num2 и num3.