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