Obiekt data w Vue

Podstawą komponentu są dane, którymi będziemy manipulować. Te dane są przechowywane w specjalnym obiekcie data. Ten obiekt powinien być zwracany jako wynik specjalnej metody:

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

Przechowujmy we właściwości obiektu z danymi jakiś tekst:

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

Przechowywane dane można wyświetlać w widoku. Robi się to w podwójnych nawiasach klamrowych, w których pisze się nazwę właściwości, której wartość chcemy wyświetlić. Wyświetlmy wartości naszych właściwości:

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

A teraz zróbmy tak, aby każde z naszych wiadomości wyświetliło się w swoim akapicie:

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

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