O objeto data no Vue

A base de um componente são os dados que manipularemos. Esses dados são armazenados em um objeto especial data. Este objeto deve ser retornado como resultado de um método específico:

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

Vamos armazenar na propriedade do objeto de dados algum texto:

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

Os dados armazenados podem ser exibidos na visualização. Isso é feito entre chaves duplas, onde é escrito o nome da propriedade cujo valor queremos exibir. Vamos exibir os valores das nossas propriedades:

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

E agora vamos fazer com que cada uma das nossas mensagens seja exibida em seu próprio parágrafo:

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

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