L'oggetto data in Vue

La base di un componente sono i dati che manipoleremo. Questi dati sono memorizzati in un apposito oggetto data. Questo oggetto deve essere restituito come risultato di un metodo specifico:

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

Memorizziamo nella proprietà dell'oggetto dati un po' di testo:

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

I dati memorizzati possono essere visualizzati nella vista. Questo si fa con le doppie parentesi graffe, all'interno delle quali si scrive il nome della proprietà il cui valore vogliamo visualizzare. Visualizziamo i valori delle nostre proprietà:

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

Ora facciamo in modo che ogni nostro messaggio venga visualizzato nel proprio paragrafo:

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

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