Понятие методов (methods) Vue.js

Что такое методы Vue компонентов

Ещё одна опция, которая есть практически в каждом Vue компоненте - это опция методов. 

Выглядит это следующим образом: мы указываем ключ methods в нашем Vue компоненте и этот methods будет содержать в себе объект.

В языках программирования, как правило, методы относятся к классам, либо объектам и говорят о том, что может сделать тот или иной объект либо класс. 

Если же мы говорим о методах в контексте компонентов, то они также отвечают на вопрос, что может делать тот или иной компонент. По сути, это действия компонента.

Каждый метод во Vue компоненте представляет собой Javascript функцию. 

Создание методов

Например, мы можем написать такой метод как test и в этом методе вывести в консоль какое-то значение

methods: {

  test() {

    console.log('333');

 }

}

Методов может быть более одного. Каждый из методов прописывается через запятую.

methods: {

  test1() {

    console.log('333');

 },

 test2() {

    console.log('444');

 }

}

Каждый из этих методов будет выполнять какие-то действия. Чаще всего методы присваиваются к событиям. В момент, когда происходит какое-то событие, мы можем вызвать какой-то метод, который совершит какие-то действия.

Вызов методов Vue

Мы можем вызвать метод, при наступлении события в шаблоне:

<p><button @click="test1('555')">Кнопка</button></p>

Обратите внимание, что когда мы обращаемся к методу, нужно указывать круглые скобки, что идет обращение к методу.

Если же мы хотим в методе обращаться к уровню данных, то делается это с помощью конструкции this и указывается тот ключ на уровня данных, к которому мы хотим обратиться. 

Если мы хотим увеличивать наш conter на единицу, мы можем это делать следующим образом:

test1() {

   this.counter = this.counter + 1;

}

На уровне шаблона мы не можем использовать конструкцию this, т.к. наш уровень данных находится по умолчанию уже на уровне шаблона и мы можем к нему напрямую обращаться. Если же мы обращаемся к уровню данных в методах, то соответственно это делается через конструкцию this.

this говорит, что мы обращаемся к объекту нашего компонента и вызываем там наш counter.

Не нужно писать this.data.counter, это будет неверно, а просто this.counter. Кликаем по кнопке и каждый раз, как вы видите у нас теперь снова counter увеличивается.

По сути, в методах нет ничего такого сложного. 

Кроме того, мы можем здесь передавать какие-то аргументы нашим методам.

Например, передать сюда какую-то строку

<p><button @click="test1('555')">Кнопка</button></p>

и далее мы можем её с вами использовать

test1(val) {

   console.log(val);

}

Кроме того, можно передавать несколько аргументов через запятую, как это делается в обычных Javascript функциях.

Вот такое базовое понятие, базовая опция Vue компонентов, которое мы можем использовать, методы и они отвечают за те действия которые будет делать наш компонент.