Объект methods, методы или функции в Vue

Во Vue можно создавать свои функции, которые в терминах Vue называются методами. Для этого предназначено свойство methods. Оно располагается следующим образом:

App.vueexport default {
    data() {

    },
    methods: {}
}

Давайте сделаем тестовый метод:

App.vuemethods: {
    show: function () {
        alert('!');
    }
}

Вызовем этот метод в представлении:

App.vue<template>
{{ show() }}
</template>

Работа с data внутри методов

Внутри методов можно получать доступ к свойствам объекта data. Для этого к ним нужно обращаться через this. Давайте посмотрим на примере:

App.vuedata()
{
    return {
        text: 'str',
    }
}

Давайте внутри метода выведем значение этого свойства:

App.vuemethods: {
    show: function () {
        alert(this.text);
    }
}

Вспомогательные методы

Можно делать вспомогательные методы, которые будут использоваться внутри других методов. К таким методам также нужно обращаться через this. Давайте посмотрим на примере. Пусть у нас есть следующий метод:

App.vueshow: function () {
    alert(this.text);
}

Сделаем вспомогательный метод, который будет делать заглавной первую букву переданной строки:

App.vuecape: function (str) {
    return str[0].toUpperCase() + str.slice(1);
}

Воспользуемся вспомогательным методом внутри основного метода:

App.vuemethods: {
    show: function () {
        let text = this.cape(this.text);
        alert(text);
    }
,
    cape: function (str) {
        return str[0].toUpperCase() + str.slice(1);
    }
}

Передача параметров в метод

Можно передавать параметры в методы, привязываемые в качестве обработчиков. Давайте посмотрим на практике. Пусть у нас есть следующий метод, параметром принимающий сообщение, которое нужно вывести:

App.vuemethods: {
    show: function (str) {
        alert(str);
    }
}

Привяжем этот метод к разным тегам, передав ему параметром текст для вывода:

App.vue<template>
<button @click="show('text1')">btn1</button>
<button @click="show('text2')">btn2</button>
</template>