Data Binding temeljna je značajka u Vue.js koja vam omogućuje uspostavljanje veze između podataka u vašoj aplikaciji i korisničkog sučelja. Omogućuje vam dinamičko ažuriranje i sinkronizaciju podataka između modela i prikaza, pružajući besprijekorno i reaktivno korisničko iskustvo.
U Vue.js postoji nekoliko data binding dostupnih vrsta:
1. Interpolation
Interpolation u Vue.js omogućuje vam ugrađivanje izraza unutar dvostrukih vitičastih zagrada {{ }} u predlošku.
Primjer:
<div>
<p>{{ message }}</p>
</div> U gornjem primjeru message je svojstvo podataka komponente. Kada se vrijednost message promijeni, sadržaj unutar <p> oznake automatski će se ažurirati.
2. One-Way Binding
One-Way Binding omogućuje vezanje podataka iz svojstva podataka komponente na korisničko sučelje. Sve promjene u svojstvu podataka odrazit će se na korisničko sučelje, ali ne obrnuto. Primjer:
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update</button>
</div>data() {
return {
message: 'Hello Vue.js'
};
},
methods: {
updateMessage() {
this.message = 'Updated message';
}
} Kada se klikne gumb "Ažuriraj", vrijednost message će se promijeniti i prikazati u korisničkom sučelju.
3. Two-Way Binding
Two-Way Binding omogućuje sinkronizaciju podataka između modela i korisničkog sučelja. Kada se podaci promijene u modelu ili korisničkom sučelju, oba će se automatski ažurirati.
Primjer:
<div>
<input v-model="message" type="text">
<p>{{ message }}</p>
</div>data() {
return {
message: 'Hello Vue.js'
};
} U gornjem primjeru, vrijednost unesena u unos bit će ažurirana na message varijablu, i obrnuto, ako message se promijeni, vrijednost u unosu će također biti ažurirana.
4. Computed Properties
Izračunata svojstva omogućuju vam da izračunate vrijednosti na temelju drugih svojstava podataka u komponenti.
Primjer:
<div>
<p>Full Name: {{ fullName }}</p>
</div>data() {
return {
firstName: 'John',
lastName: 'Doe'
};
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
} U gornjem primjeru fullName je izračunato svojstvo izračunato iz firstName i lastName. Kada firstName ili lastName promjene, fullName također će se ažurirati.
5. Watchers:
Watchers omogućuju promatranje specifičnih promjena svojstava podataka i izvođenje asinkronih ili složenih radnji kada dođe do promjene.
Primjer:
<div>
<p>Count: {{ count }}</p>
</div>data() {
return {
count: 0
};
},
watch: {
count(newValue, oldValue) {
// Perform action when count changes
console.log('Count changed:', newValue, oldValue);
}
} U gornjem primjeru, kad god se vrijednost count promijeni, promatrač će se pokrenuti i izvršiti odgovarajuću radnju.
Korištenjem ovih Data Binding tehnika možete iskoristiti fleksibilnost Vue.js za jednostavno upravljanje i sinkronizaciju podataka između modela i korisničkog sučelja na jednostavan i učinkovit način.
Korištenjem ovih data binding tehnika možete stvoriti dinamična i interaktivna korisnička sučelja u svojim Vue.js aplikacijama. Vue.js pruža moćan i fleksibilan data binding sustav koji pojednostavljuje proces upravljanja i ažuriranja podataka. Istražimo svaki od ovih data binding pristupa i vidimo kako se mogu implementirati u vaše Vue.js projekte.