Data-objekti Vue:ssa

Komponentin perustana ovat tiedot, joiden kanssa aiomme manipuloida. Nämä tiedot tallennetaan erityiseen data-objektiin. Tämän objektin tulisi palautua erityisen menetelmän tuloksena:

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

Tallennetaan data-objektin ominaisuuteen jokin teksti:

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

Tallennettuja tietoja voidaan näyttää näkymässä. Tämä tehdään kaksoiskaarisulkeissa, joihin kirjoitetaan sen ominaisuuden nimi, jonka arvon haluamme näyttää. Näytetään ominaisuuksiemme arvot:

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

Tehdään nyt niin, että jokainen viesteistämme tulostuu omaan kappaleeseensa:

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

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