Objekt data ve Vue

Základem komponentu jsou data, s kterými budeme manipulovat. Tato data jsou uložena ve speciálním objektu data. Tento objekt by měl být vrácen jako výsledek speciální metody:

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

Ukládejme ve vlastnosti objektu s daty nějaký text:

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

Uložená data lze zobrazit v šabloně. To se dělá v dvojitých složených závorkách, do kterých se píše jméno vlastnosti, jejíž hodnotu chceme zobrazit. Zobrazme hodnoty našich vlastností:

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

A nyní udělejme to, aby se každá z našich zpráv zobrazila ve svém odstavci:

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

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