The data object in Vue

The core of the component is the data we will manipulate. This data is stored in a special object data. This object should be returned by the result of a special method:

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

Let's store some text in the data object property:

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

Stored data can be output in a view. This is done in double curly brackets, in which the name of the property whose value we want to output is written. Let's output the values ​​of our properties:

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

Now let's make it so that each of our messages is displayed in its own paragraph:

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

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