Vue Js: Essential Part
Setelah kemarin kita coba buat project dan berkenalan sedikit tentang komponen, di post ini saya akan membahas tentang bagian-bagian esensial/mendasar dari Vue Js. So, cus kita mulai ✊
Note: Kita masih menggunakan project yang sama, yaitu medium-project dan kita akan fokus ke file Home.vue
Data & Method
Oke, kita akan fokus ke bagian <script> block dari komponen Home.vue kemudian pada baris ke-6 , tambahkan code databerikut.
Bagian kode yang ada padaexport default kita sebut sebagai vue instance dimana dalam vue instance ini kita mendefinisikan atribut / variabel (data) dan juga prilaku (method) pada sebuah komponen.
Nah sekarang kita fokus ke baris ke-9 , kita tambahkan text: ''
Variabel-variabel yang telah dideklarasikan di dalam data instance dapat diakses langsung pada template atau di dalam instance method seperti pada Snippet 4.
Untuk mengeluarkan output nya, kita dapat memanggilnya pada blok template dengan menggunakan double curly braces {{namaVarData}} seperti pada Snippet 5.
Note: Snippet 5 merupakan modifikasi blok templatepada komponen Home.vue
Jika kita lihat outputnya akan seperti Gambar 1.
Pada Snippet 5, saya buat sedikit modifikasi dengan menambahkan event berupa klik (pada baris ke-5 ) sehingga ketika tombol klik akan menjalankan method printNama yang akan mengisi variabel text dengan kata ‘Joni’ seperti yang di-outputkan pada Gambar 2.
Template
- Double Curly Braces
Seperti yang sudah kita coba sebelumnya, tag template atau template block adalah fitur dari vue js untuk meletakkan kode HTML kita. Pada bagian ini juga kita dapat melakukan output pada variabel data yang telah di-assign atau dimodifikasi pada script block dengan menggunakan {{}} (double curly braces).
Penggunaan double curly braces ini tidak hanya mengeluarkan output dari variabel saja, tapi juga bisa mengeluarkan output berupa raw html (tag html) jika variable nya di-assign dengan tag html atau kita juga bisa menyisipkan sedikit js logic didalam double curly braces ini. misalnya menyisipkan js ternary condition
{{text === null ? 'Kosong' : 'Ada isinya'}}- Data binding dan directive
fungsi dari binding adalah memperbarui variabel data ketika ada perubahan terhadap variabel data tersebut (dikenal dengan istilah reactive) sedangan directive adalah atribut bawaan vue yang diawali dengan v- misalnya v-for, v-bind, v-on, v-if
Untuk melakukan data binding, kita cukup menambahkan v-bind pada atribut html misalnya <a v-bind:href="url">…</a> dimana urlmerupakan data variabel. Kita juga dapat mepersingkat sintaks data binding ini dengan mengganti v-bind dengan : misalnya <a :href="url">…</a>
Penggunaan directive berbeda-beda tergantung kebutuhannya, seperti v-for untuk melakukan loop pada elemen HTML, atau v-on untuk menambah event pada elemen HTML. Pada Snippet 5 baris ke-5 kita sebenarnya sudah mengimplementasikan atribut directive, yaitu penggunaan v-on hanya saja dipersingkat sintaksnya menggunakan @ yang seharusnya jika tidak disingkat akan ditulis seperti ini v-on:click="printNama" namun kita persingkat menjadi @click="printNama"
Binding Class dan Style
Ada kalanya ketika kita memasukkan logic untuk tampilan, misalnya ketika tombol di klik, teks akan berubah warna. Tentu kita harus memanipulasi style CSS kita. Nah, vue mengakomodir hal tersebut dengan cara mem-binding CSS class atau atribut style.
Jika kita klik tombol pertama, kita akan melihat kata 'Joni' muncul dengan tulisan yang tercetak tebal (bold). Hal ini disebabkan karena kita mem-binding style dengan properti fontWeight (properti CSS ditulis dengan gaya camelCase) yang memiliki value bold.
Kemudian jika kita klik tombol yang lain, kata 'Joni' akan berubah menjadi warna merah. Hal ini disebabkan karena kita telah mem-binding class red (lihat bagian style block) dengan kondisi ketika variable colorpada data bernilai true, warna teks berubah menjadi merah. Untuk membuat nilai variabel color tersebut berubah menjadi true, kita tambahkan event on click pada tombol yang menjalankan method changeColor.
Conditional Rendering
Nah, vue directive selain v-bind atau v-on ada vue directive yang memungkinkan kita untuk melakukan conditional logic pada elemen HTML, yaitu v-if, v-else-if, dan v-else serta v-show.
Pada Snippet 8, kita coba modifikasi komponen Home.vue dengan menambahkan v-if pada baris ke-3 dan v-else pada baris ke-6. Kemudian tambahkan variabel showText di baris ke-22 dan set default value nya dengan false. Terakhir, kita modifikasi method printNama dengan melakukan assign true pada variabel showText .
Karena default value dari showText bernilai false , maka elemen HTML baris ke-3 hingga baris ke-5 tidak dijalankan (di-render) tetapi menjalankan baris ke-6 sehingga yang muncul pada layar adalah teks We will replace this text . Jika kita klik tombol munculin nama akan menghasilkan output seperti Gambar 3.
Selain v-if kita juga bisa menggunakan v-show untuk conditional rendering. Hanya saja untuk v-show hanya untuk satu case kondisi saja.
sama seperti Snippet 8, kita lakukan sedikit modifikasi pada Snippet 9, yaitu membuang baris ke-6 dan mengganti v-if dengan v-show .
Perbedaan lain dari v-if dan v-show terletak pada output HTML nya (kita bisa lihat melalui inspect element).
Jika kita menggunakan v-show , elemen HTML akan tetap di-render oleh vue, namun terdapat atribut style yang memiliki properti display:none . Jika v-show sesuai dengan kondisi yang telah dibuat, properti tersebut akan hilang.
Berbeda dengan v-if , elemen HTML yang di-render akan terbaca sebagai comment sehingga tidak ter-render hingga kondisi terpenuhi (Pada Snippet 8 yang terbaca adalah elemen yang dipasangi v-else).
Looping Rendering
Selain conditional rendering, vue juga dapat melakukan looping rendering menggunakan v-for.
Kita modifikasi kembali file Home.vue kita pada bagian template block dengan menghapus elemen HTML dengan v-if yang kita buat sebelumnya kemudian tambahkan kode dibawah komponen Navbarsesuai dengan baris ke-4 hingga baris ke-8 pada Snippet 10. Tambahkan juga variabel data showFruitdengan nilai false dan variabel data list yang berisi array of object seperti pada baris ke-25 . Terakhir, kita tambahkan method showFruitList pada baris ke-49 .
Ada kalanya ketika kita ingin melakukan conditional rendering dan looping rendering bersamaan. Tapi, kita ga bisa menggunakan v-for danv-if bersamaan dalam satu elemen. Lalu bagaimana cara nya agar mereka bisa bersatu? Kita bisa melakukan wrapping v-for di dalam v-if. Kita bisa menambahkan v-if pada tag ol di baris ke-5 Snippet 10.
<ol v-if="showFruit">
<li v-for="item in list" :key="item.id">{{item.name}}</li>
</ol>Jangan lupa untuk tambahkan this.showFruit = true pada method showFruitList .
ketika tombol di klik, maka variabel data list akan dimunculkan.
Jika kita menggunakan v-for , kita wajib melakukan binding key . binding ini berfungsi untuk membedakan setiap item yang di loop. v-for memiliki format v-for="<aliasName> in <variableData>" :key="<aliasName>.id" (biasanya binding key di isi dengan object id walaupun tidak ada object id nya).
Event Handling
Sejauh ini kita telah mengenal event on click pada vue. Selain click event, ada event handling lain yang dapat digunakan, yaitu keyup dan keydown . keyup adalah event ketika pengguna menekan tombol pada keyboard, sedangkan keydown adalah event ketika pengguna melepas tombol pada keyboard.
misalnya kita memiliki elemen input dan akan menjalankan method submit ketika pengguna menekan tombol enter. kita dapat menuliskan kode nya sebagai berikut.
<input @keyup.enter="submit">Form Input Binding
Fungsi binding pada form input adalah untuk menampung nilai input sebelum diproses oleh method tertentu. Kita cukup membuat variabel data nya kemudian tambahkan atribut v-model pada elemen input yang dibuat.
<input v-model="<variableData">Oke deh cukup dulu pembahasan nya tentang bagian-bagian esensial dari vue. Next, saya akan coba bahas terkait hal-hal yang dapat dilakukan oleh component
