Пока у нас есть просто набор каких-то методов, которые никаким образом не взаимодействуют с шаблоном.
var app = new Vue( { data: { 'test': [ 'Первый', 'Второй', 'Третий' ] }, el: '#app', methods: { methodTest() { console.log('111'); }, methodTest2() { console.log('222'); } } } );
Как сделать так, чтобы при взаимодействии с кнопкой
<button>Кнопка</button>
При клике по этой кнопке, выполнялся какой-то метод, который мы прописали.
Для решения этой проблемы нужно познакомиться с таким понятием, как событие. Событие - это то, что произошло на странице. Пользователь сделал какое-то действие и в этот момент мы должны это событие как-то обработать.
Во Vue.js для обработки событий существует специальная директива, которая называется v-on: и далее указывается имя того события, которые произошло.
Самое простое событие - это событие click. И после знака равно указываем имя того метода, которое должно выполниться.
<button v-on:click="methodTest2">Кнопка</button>
v-on можно перевести как в момент. Т.е. в момент, когда произошло событие клика, нужно вызвать метод test.
Таким образом можно навешивать какие-то события на элементы пользовательского шаблона во Vue.js.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти