Objekt data vo Vue

Základom komponentu sú dáta, s ktorými budeme manipulovať. Tieto dáta sú uložené v špeciálnom objekte data. Tento objekt by mal byť vrátený ako výsledok špeciálnej metódy:

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

Ukladajme vo vlastnosti objektu s dátami nejaký text:

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

Uložené dáta je možné zobraziť v prezentácii. To sa robí v dvojitých zložených zátvorkách, do ktorých sa píše názov vlastnosti, ktorej hodnotu chceme zobraziť. Zobrazme hodnoty našich vlastností:

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

A teraz urobme tak, aby každá z našich správ sa zobrazila vo svojom odseku:

App.vue<template>
  <p>{{ text1 }}</p>
  <p>{{ text2 }}</p>
</template>
Задание 1

Nech v data je uložené meno a priezvisko používateľa:

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

Zobrazte každú vlastnosť v samostatnom tagu div.