Data Binding iku fitur dhasar ing Vue.js sing ngijini sampeyan kanggo nggawe sambungan antarane data ing aplikasi lan antarmuka panganggo. Ngidini sampeyan nganyari lan nyinkronake data kanthi dinamis ing antarane model lan tampilan, nyedhiyakake pengalaman pangguna sing lancar lan reaktif.
Ing Vue.js, ana sawetara jinis sing data binding kasedhiya:
1. Interpolation
Interpolation ing Vue.js ngijini sampeyan kanggo nampilaké ekspresi nang kurung kriting pindho {{ }} ing cithakan.
Tuladha:
<div>
<p>{{ message }}</p>
</div> Ing conto ing ndhuwur, message iku properti data saka komponen. Nalika nilai message owah-owahan, isi ing <p> tag bakal dianyari kanthi otomatis.
2. One-Way Binding
One-Way Binding ngijini sampeyan kanggo naleni data saka properti data komponen kanggo antarmuka panganggo. Sembarang owah-owahan ing properti data bakal dibayangke ing antarmuka panganggo, nanging ora cara liyane. Tuladha:
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update</button>
</div>data() {
return {
message: 'Hello Vue.js'
};
},
methods: {
updateMessage() {
this.message = 'Updated message';
}
} Nalika tombol "Update" diklik, nilai message bakal diganti lan ditampilake ing antarmuka panganggo.
3. Two-Way Binding
Two-Way Binding ngijini sampeyan kanggo nyinkronake data antarane model lan antarmuka panganggo. Nalika data diganti ing model utawa antarmuka panganggo, loro bakal otomatis dianyari.
Tuladha:
<div>
<input v-model="message" type="text">
<p>{{ message }}</p>
</div>data() {
return {
message: 'Hello Vue.js'
};
} Ing conto ing ndhuwur, nilai sing dilebokake ing input bakal dianyari menyang message variabel, lan kosok balene, yen message owah-owahan, nilai ing input uga bakal dianyari.
4. Computed Properties
Properti komputasi ngidini sampeyan ngetung nilai adhedhasar sifat data liyane ing komponen kasebut.
Tuladha:
<div>
<p>Full Name: {{ fullName }}</p>
</div>data() {
return {
firstName: 'John',
lastName: 'Doe'
};
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
} Ing conto ing ndhuwur, fullName minangka properti sing diwilang saka firstName lan lastName. Nalika firstName utawa lastName owah-owahan, fullName uga bakal dianyari.
5. Watchers:
Watchers ngidini sampeyan mirsani owah-owahan properti data tartamtu lan nindakake tumindak bedo utawa Komplek nalika owah-owahan.
Tuladha:
<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);
}
} Ing conto ing ndhuwur, yen ana owah count -owahan, pengamat bakal dipicu lan nindakake tumindak sing cocog.
Kanthi nggunakake Data Binding teknik kasebut, sampeyan bisa nggunakake keluwesan Vue.js kanggo ngatur lan nyinkronake data kanthi gampang ing antarane model lan antarmuka pangguna kanthi cara sing gampang lan efisien.
Kanthi nggunakake data binding teknik kasebut, sampeyan bisa nggawe antarmuka pangguna sing dinamis lan interaktif ing aplikasi Vue.js. Vue.js nyedhiyakake sistem sing kuat lan fleksibel data binding sing nyederhanakake proses ngatur lan nganyari data. Ayo njelajah saben data binding pendekatan iki lan ndeleng carane padha bisa dipun ginakaken ing projects Vue.js Panjenengan.