data-ის ობიექტი Vue-ში

კომპონენტის საფუძველია მონაცემები, რომლებითაც ჩვენ ვმანიპულირებთ. ეს მონაცემები ინახება სპეციალურ ობიექტში data. ეს ობიექტი უნდა დააბრუნოს სპეციალური მეთოდის შედეგმა:

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

მოდით, ობიექტის მონაცემების თვისებაში შევინახოთ რაიმე ტექსტი:

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

შენახული მონაცემების ჩვენება შესაძლებელია წარმოდგენაში. ეს კეთდება ორმაგი ხვეული ფიგურული ფრჩხილებით, რომლებშიც იწერება იმ თვისების სახელი, რომლის მნიშვნელობაც გვსურს ჩავანახოთ. მოდით ჩავანახოთ ჩვენი თვისებების მნიშვნელობები:

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

ახლა კი მოვახდინოთ ისე, რომ ჩვენი თითოეული შეტყობინება ჩანახა თავისი აბზაცში:

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

დაე, data-ში ინახებოდეს მომხმარებლის სახელი და გვარი:

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

ჩაანახეთ თითოეული თვისება ცალკეულ div ტეგში.