El objeto data en Vue

La base de un componente son los datos, que manipularemos. Estos datos se almacenan en un objeto especial data. Este objeto debe ser devuelto como resultado de un método especial:

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

Vamos a almacenar en una propiedad del objeto de datos algún texto:

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

Los datos almacenados se pueden mostrar en la vista. Esto se hace entre dobles llaves, donde se escribe el nombre de la propiedad, cuyo valor queremos mostrar. Vamos a mostrar los valores de nuestras propiedades:

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

Y ahora hagamos que cada uno de nuestros mensajes se muestre en su propio párrafo:

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

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