რეაქტიულობა Vue ფრეიმვორკში
ნებისმიერი ცვლილება მონაცემებში data-დან
იწვევს ამ მონაცემების ეკრანზე ჩვენების მყისიერ ცვლილებას.
Vue-ს ასეთ ქცევას ეწოდება რეაქტიულობა.
პრაქტიკაში გადავამოწმოთ. დავუშვათ, გვაქვს შემდეგი თვისება:
data() {
return {
text: 'xxx',
}
}
გამოვიტანოთ ამ თვისების მნიშვნელობა:
<template>
{{ text }}
</template>
შევქმნათ ღილაკი, რომლის დაჭერისას შეიცვლება ჩვენი თვისება:
<template>
{{ text }}
<button @click="change">text</button>
</template>
ახლა დავწეროთ მეთოდი, რომელიც გამოიძახება ღილაკზე დაწკაპების დროს და შეცვლის თვისებას:
methods: {
change: function() {
this.text = 'yyy';
}
}
თუ მთელ კოდს ერთად შევკრიბავთ და დავაჭერთ ღილაკს - ეკრანზე არსებული ტექსტი რეაქტიულად შეიცვლება სხვაზე.
მოცემულია თვისება text. გამოიტანეთ ამ თვისების შიგთავსი
რაიმე აბზაცში.
მოცემულია ღილაკი. გახადეთ ისე, რომ დაწკაპებით
ამ ღილაკზე თვისების text მნიშვნელობა
რეაქტიულად შეიცვალოს სხვაზე.
მოცემულია ორი ღილაკი. გახადეთ ისე, რომ პირველ ღილაკზე დაწკაპებით
თვისების text მნიშვნელობა
რეაქტიულად შეიცვალოს ერთ მნიშვნელობაზე,
ხოლო მეორეზე დაწკაპებით - მეორეზე.
