Data Binding Siffa ce ta asali a cikin Vue.js wacce ke ba ku damar kafa haɗin kai tsakanin bayanan da ke cikin aikace-aikacen ku da mahallin mai amfani. Yana ba ku damar haɓakawa da aiki tare da bayanai tsakanin samfuri da ra'ayi, samar da ƙwarewar mai amfani mara kyau da amsawa.
A cikin Vue.js, akwai nau'ikan data binding samuwa da yawa:
1. Interpolation
Interpolation a cikin Vue.js yana ba ku damar shigar da maganganu a cikin takalmin gyaran kafa biyu masu lanƙwasa {{ }} a cikin samfuri.
Misali:
<div>
<p>{{ message }}</p>
</div> A cikin misalin da ke sama, message shine mallakar bayanan ɓangaren. Lokacin da darajar message canje-canje, abun ciki a cikin <p> alamar za a sabunta ta atomatik.
2. One-Way Binding
One-Way Binding yana ba ku damar ɗaure bayanai daga dukiyar bayanan ɓangaren zuwa wurin mai amfani. Duk wani canje-canje a cikin dukiyar bayanan za a nuna su a cikin mai amfani, amma ba wata hanya ba. Misali:
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update</button>
</div>data() {
return {
message: 'Hello Vue.js'
};
},
methods: {
updateMessage() {
this.message = 'Updated message';
}
} Lokacin da aka danna maɓallin "Update", ƙimar message za ta canza kuma za a nuna shi a cikin mahallin mai amfani.
3. Two-Way Binding
Two-Way Binding yana ba ku damar daidaita bayanai tsakanin ƙirar da mai amfani. Lokacin da bayanai suka canza a cikin samfurin ko mai amfani, duka biyu za a sabunta su ta atomatik.
Misali:
<div>
<input v-model="message" type="text">
<p>{{ message }}</p>
</div>data() {
return {
message: 'Hello Vue.js'
};
} A cikin misalin da ke sama, za a sabunta ƙimar da aka shigar a cikin abin da aka shigar zuwa mai message canzawa, kuma akasin haka, idan message ya canza, ƙimar da ke cikin shigarwar ma za a sabunta.
4. Computed Properties
Ƙididdiga masu ƙididdigewa suna ba ku damar ƙididdige ƙididdiga bisa wasu kaddarorin bayanai a cikin ɓangaren.
Misali:
<div>
<p>Full Name: {{ fullName }}</p>
</div>data() {
return {
firstName: 'John',
lastName: 'Doe'
};
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
} A cikin misalin da ke sama, fullName an ƙididdige kadarorin da aka lissafta daga firstName kuma lastName. Lokacin firstName ko lastName canje-canje, fullName kuma za a sabunta.
5 Watchers.:
Watchers ƙyale ka ka lura da takamaiman canje-canjen kadarorin bayanai da yin asynchronous ko hadaddun ayyuka lokacin da canjin ya faru.
Misali:
<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);
}
} A cikin misalin da ke sama, a duk lokacin da darajar count canje-canje, za a kunna mai kallo kuma ya yi aikin da ya dace.
Ta amfani da waɗannan Data Binding fasahohin, za ku iya yin amfani da sassaucin Vue.js don sauƙaƙe gudanarwa da aiki tare da bayanai tsakanin ƙirar da mai amfani a cikin madaidaiciyar hanya mai inganci.
Ta amfani da waɗannan data binding fasahohin, zaku iya ƙirƙirar mu'amala mai ƙarfi da mu'amala a cikin aikace-aikacenku na Vue.js. Vue.js yana ba da tsari mai ƙarfi da sassauƙa data binding wanda ke sauƙaƙa tsarin sarrafa da sabunta bayanai. Bari mu bincika kowane ɗayan waɗannan data binding hanyoyin kuma mu ga yadda za a iya aiwatar da su a cikin ayyukan ku na Vue.js.