Pengetahuan Dasar Vue js - Part1

Selamat datang kembali ke blog tutorial saya, incrediblefoundertutorial.blogspot.com. Semoga pembaca selalu dalam keadaan sehat wal afiyat. Setelah beberapa bulan ini saya disibukkan dengan tugas kuliah dan beberapa pekerjaan lain di luar kuliah saya. Kemajuan teknologi semakin tidak bisa diperkirakan tempo perkembangannya, Mengapa demikian ?? karena setelah adanya penemuan baru, pasti tidak lama lagi muncul penemuan baru lainnya. Hal ini bisa dirasakan oleh para pengembang aplikasi website khususnya programmer javascript. Beberapa tahun belakangan ini, banyak sekali framework-framework javascript yang berkembang pesat dan luasnya mencakup semua kalangan. Maka tak heran bila framework React, Angular, dan sejenisnya sangat digemari. 

Pada kali ini saya akan membahas salah satu framework javascript yang sedang hangat-hangatnya atau sedang populer di kalangan front-end developer yaitu Vue JS. Vue JS menduduki posisi ke-3 setelah React dan Angular di posisi ke-1 dan ke-2. Vue JS pun digadang-gadang akan menggeser posisi React JS pada beberapa tahun ke depan karena banyaknya tuntutan perusahaan terhadap fitur yang diberikan. Oleh karena itu, mau tidak mau kita harus mempelajarinya, mulai dari hal yang sederhana. 

Saya akan membagi pembahasan menjadi part-part agar materi terlihat lebih ringan dan mudah dipahami. Baik, mari kita mulai pembahasannya.

1. Pengetahuan Dasar Vue.js  --- Part 1 (Anda disini)
2. Pengetahuan Dasar Vue.js --- Part 2
3. Pengetahuan Dasar Vue.js --- Part 3

---

Vue.js (https://vuejs.org/) seperti di websitenya yang membawa tagline “The Progressive JavaScript Framework” merupakan javascript framework yang membantu kita dalam membuat sebuah website/aplikasi yang membutuhkan banyak interaksi di dalamnya, biasanya berupa Single Page Application. Vue.js belakangan memiliki gaung yang lumayan kencang di kalangan web developer maupun Javascript developer karena kemudahan dalam mempelajari dan mengimplementasikan di dalam website/aplikasi kita.

1. Mengenai Vue Component

Vue.js seperti framework Javascript modern lainnya juga mengusung konsep component based dimana setiap blok layout dianggap sebagai komponen yang independen dan memiliki style serta fungsi sendiri yang terisolir sehingga mudah untuk digunakan ulang oleh setiap halaman website kita. Setiap komponen tersebut nantinya akan kita susun menjadi blok-blok yang saling terkait dan membangun sebuah tampilan utuh sebuah halaman website.

Menggunakan komponen berarti kita akan membuat custom tag di HTML template kita, secara mudah komponen di Vue.js bisa dibuat sesederhana kode berikut :

Mendefinisikan Vue.js Component

Dari pendefinisian diatas kita bisa menggunakan komponen tersebut dalam HTML template dengan cara yang tak kalah mudah, yakni seperti berikut :

Menggunakan Vue.js Component dalam HTML Template

2. Data Binding dalam Vue.js

Vue.js memang sangat terinspirasi dari AngularJS dalam hal data binding ini, itu mengapa sangat mudah untuk belajar Vue.js bilamana kita pernah belajar AngularJS sebelumnya. Bila di AngularJS kita mengenal ng-bind maka di Vue.js kita mengenal v:bind, berikut beberapa data binding dalam Vue.js :

👉 1. Binding data ke dalam view

Vue.js menggunakan syntax {{ }} seperti terlihat pada gambar diatas, dengan syntax tersebut berarti kita ingin menampilkan sebuah data yang ada dalam Javascript kita ke dalam HTML template.

👉 2. Attribute Binding

Attribute Binding di dalam Vue.js

Seperti disebut sebelumnya, di Vue.js kita menggunakan v-bind untuk melakukan binding ke dalam HTML. Maka jika kita melihat ke gambar diatas berarti kita ingin menambahkan attribute title ke dalam span dengan menggunakan data dinamis dari javascript. v-bind pada dasarnya bisa diterapkan pada berbagai attribute di HTML sehingga kita mungkin akan menemui banyak variasi v-bind ini seperti v-bind:src, v-bind:class, v-bind:alt, dan lain sebagainya.
Vue.js juga menyediakan shortcut untuk kita mendefinisikan v-bind di dalam HTML yakni dengan menghilangkan bagian v-bind nya, jadi kita bisa menggunakan shortcut seperti :title, :src, :class, :alt dan sebagainya.

👉 3. Two way data binding

Seperti AngularJS, Vue.js juga menyediakan fitur two way data binding yang artinya setiap perubahan pada Javascript akan berpengaruh pada view HTML dan sebaliknya perubahan pada HTML view pun akan mempengaruhi atau mengubah nilai di Javascript nya.
Di Vue.js kita menggunakan v-model untuk melakukan two way binding yang biasanya sering ditempelkan pada sebuah elemen input HTML, seperti gambar berikut :

Vue.js two-way data binding

 

👉 4. Event binding

Untuk memanggil suatu event yang telah kita buat di Javascript, Vue.js menggunakan v-on di dalam HTML template diikuti hook event yang akan ditambahkan. Jadi kita bisa menggunakan berbagai variasi v-on seperti v-on:click, v-on:blur, v-on:focus, v-on:keyup dan sebagainya.

Event binding di Vue.js

Vue.js menyediakan juga shortcut untuk melakukan event binding ini yakni menggunakan @, sehingga kita bisa menyingkat seperti : @click, @blur,@focus dan sebagainya.

---

Masih akan ada beberapa hal yang ingin saya bahas di judul ini, namun sepertinya akan saya pecah saja kedalam beberapa bagian agar lebih ringan saat membacanya.

Lanjut di Part 2 ya !!! Stay tuned dan follow publikasi ini 😅

Terima kasih dan semoga bermanfaat penjelasan singkatnya.