Объект data и свойства в Vue

Основой компонента являются данные, которыми мы будем манипулировать. Эти данные хранятся в специальном объекте data. Этот объект должен возвращаться результатом специального метода:

App.vueexport default {
    data() {
        return {}
    }
}

Давайте будем хранить в свойстве объекта с данными какой-нибудь текст:

App.vuedata()
{
    return {
        text1: '111',
        text2: '222',
    }
}

Хранимые данные можно выводить в представлении. Это делается в двойных фигурных скобках, в которых пишется имя свойства, значение которого мы хотим вывести. Давайте выведем значения наших свойств:

<template>
<p>{{ text1 }}</p>
<p>{{ text2 }}</p>
</template>

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

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

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

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

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