VueJS - Binding: A Panduan untuk Pemula

Hai sana, superstar Vue.js masa depan! Saya sangat gembira menjadi panduan Anda dalam perjalanan menarik ini ke dunia binding Vue.js. Sebagai seseorang yang telah mengajar pemrograman selama tahun tahun, saya bisa katakan bahwa binding seperti saus rahasia yang membuat Vue.js begitu lezat. mari kita roll up lengan dan masuk ke dalam!

Apa Itu Binding di Vue.js?

Sebelum kita masuk ke dalam hal-hal kecil, mari kita memahami apa arti binding. Dalam Vue.js, binding adalah cara kita menghubungkan data kita ke DOM (Document Object Model). Itu seperti membuat hubungan magis antara kode JavaScript Anda dan apa yang muncul di layar. Keren, kan?

Binding Kelas HTML

Bayangkan Anda sedang berpakaian untuk pesta. Anda mungkin memilih outfit yang berbeda-beda berdasarkan kesempatan, kan? Binding kelas HTML di Vue.js bekerja sama seperti itu. Kita bisa secara dinamis mengubah penampilan elemen kita berdasarkan data kita.

Binding Kelas Dasar

Mari kita mulai dengan contoh sederhana:

<div id="app">
<p :class="{ active: isActive }">Apakah saya aktif?</p>
</div>

<script>
new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>

Dalam contoh ini, kita membinding kelas 'active' ke paragraf kita berdasarkan properti data isActive. Jika isActive benar, paragraf akan memiliki kelas 'active'. Jika itu salah, itu tidak akan.

Kelas Ganda

Tapi apa jika kita ingin mengelola kelas ganda? Tidak masalah! Vue.js telah menangani kita:

<div id="app">
<p :class="{ active: isActive, 'text-danger': hasError }">
Binding kelas ganda
</p>
</div>

<script>
new Vue({
el: '#app',
data: {
isActive: true,
hasError: false
}
})
</script>

Di sini, kita membinding dua kelas: 'active' dan 'text-danger'. Paragraf akan memiliki kelas 'active', tapi tidak 'text-danger' kecuali kita ubah hasError menjadi true.

Sintaksis Array

Kita juga bisa menggunakan array untuk membinding kelas. Itu seperti memiliki lemari pakaian kelas untuk dipilih:

<div id="app">
<p :class="[activeClass, errorClass]">Sintaksis array keren!</p>
</div>

<script>
new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>

Dalam kasus ini, kedua kelas 'active' dan 'text-danger' akan diterapkan ke paragraf.

Binding gaya inline

Sekarang, mari bicarakan tentang gaya inline. Itu seperti memberikan elemen Anda sebuah make-over di tempat!

Sintaksis Objek

Kita bisa membinding gaya inline menggunakan objek:

<div id="app">
<p :style="{ color: textColor, fontSize: fontSize + 'px' }">
Gaya saya!
</p>
</div>

<script>
new Vue({
el: '#app',
data: {
textColor: 'red',
fontSize: 20
}
})
</script>

Ini akan mengatur warna menjadi merah dan ukuran font menjadi 20px. Catatlah bagaimana kita bisa menggunakan camelCase (fontSize) atau kebab-case ('font-size') untuk properti gaya.

Sintaksis Array

Kita juga bisa menggunakan array gaya objek:

<div id="app">
<p :style="[baseStyles, overridingStyles]">Array gaya</p>
</div>

<script>
new Vue({
el: '#app',
data: {
baseStyles: {
color: 'blue',
fontSize: '20px'
},
overridingStyles: {
fontWeight: 'bold'
}
}
})
</script>

Ini memungkinkan kita untuk menerapkan beberapa objek gaya, dengan objek yang lebih belakang dalam array mengganti yang sebelumnya jika ada konflik.

Binding Input Form

Binding input form adalah tempat Vue.js benar-benar bersinar. Itu seperti memiliki telepon langsung antara input form Anda dan data Anda!

Input Teks

Mari kita mulai dengan input teks sederhana:

<div id="app">
<input v-model="message" placeholder="Edit saya">
<p>Pesan adalah: {{ message }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>

Petunjuk v-model membuat binding dua arah antara input dan properti data message. Setiap perubahan dalam input akan segera memperbarui message, dan sebaliknya.

Checkbox

Checkbox seperti saklar kecil. Mari kita bindingnya:

<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>

<script>
new Vue({
el: '#app',
data: {
checked: false
}
})
</script>

Properti checked akan benar saat checkbox dicentang, dan salah saat itu tidak dicentang.

Radio Button

Radio button seperti pertanyaan pilihan ganda. Hanya satu yang bisa dipilih pada saat yang sama:

<div id="app">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Dipilih: {{ picked }}</span>
</div>

<script>
new Vue({
el: '#app',
data: {
picked: ''
}
})
</script>

Properti picked akan diatur ke nilai radio button yang dipilih.

Select Dropdown

Akhirnya, mari kita lihat dropdown select:

<div id="app">
<select v-model="selected">
<option disabled value="">Silakan pilih salah satu</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Dipilih: {{ selected }}</span>
</div>

<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>

Properti selected akan diatur ke nilai opsi yang dipilih.

Ringkasan Metode Binding

Berikut ini adalah tabel rujukan cepat dari metode binding yang kita telah pelajari:

Tipe Binding	Sintaksis	Deskripsi
Kelas (Objek)	:class="{ className: condition }"	Terapkan kelas berdasarkan kondisi
Kelas (Array)	:class="[class1, class2]"	Terapkan beberapa kelas
Gaya (Objek)	:style="{ property: value }"	Terapkan gaya inline
Gaya (Array)	:style="[styleObject1, styleObject2]"	Terapkan beberapa objek gaya
Input Form	v-model="dataProperty"	Binding dua arah untuk input form

Dan itu adalah! Anda telah mengambil langkah pertama ke dunia menarik binding Vue.js. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba konsep ini. Sebelum Anda tahu, Anda akan binding data seperti seorang pro! Selamat coding!

Credits: Image by storyset