Работа с методами и событиями в фреймворке 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'.

Пусть в 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.