vue.js урок №3 — methods

Как и во всем JavaScript, вам, в конечном счете, нужно будет выполнить действие, когда пользователь будет взаимодействовать с приложением. В vue.js для этого есть methods.
Используя методы, мы можем создать собственный код, который будет привязан к нашему экземпляру Vue. Затем мы можем получить доступ к этим методам из ссылки на наш экземпляр Vue. При создании метода для нашего экземпляра Vue, нам нужно избегать использования стрелочных функций () => {}, так как это не позволит нам получить доступ к this.

Рассмотрим пример:

Данный код делаем мало полезного но мы создали простой метод — userClickedAButton и привязали его к клику по кнопке. Обратите внимание, мы использовали краткую запись назначения события — @click, более длинная запись — v-on:click.

Отметим, что событие click является не единственным, и vue поддерживает все стандартные события языка js.

Теперь сделаем более интересный пример — изменим значени переменной:

 

Это самая простая реализация увеличения переменной по нажатию, теперь попробуем вынести в отдельный метод :

Отмечу что this в строке :

 

Ссылается на объект vue, внутри которого все переменные и методы.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Back to Top