События Vue.js и их обработка

Пока у нас есть просто набор каких-то методов, которые никаким образом не взаимодействуют с шаблоном.

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.