Объект data в Vue

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

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

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

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

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

App.vue<template>
  {{ text1 }}
  {{ text2 }}
</template>

А теперь сделаем так, чтобы каждое из наших сообщений вывелось в своем абзаце:

App.vue<template>
  <p>{{ text1 }}</p>
  <p>{{ text2 }}</p>
</template>

javascriptdata() {
  return {
    name: 'john',
    surn: 'smit',
  }
}