Pengetahuan Dasar Vue.js — Bagian 1

Berbagai pengetahuan dasar yang perlu Anda ketahui di Vue.js.

Sumber : https://vuejs.id/

Artikel ini merupakan seri lanjutan dari artikel yang sebelumnya sudah di publikasikan, baca semua seri Pengetahuan Dasar Vue.js :

  1. Pengetahuan Dasar Vue.js — Bagian 1(Anda disini)
  2. Pengetahuan Dasar Vue.js — Bagian 2
  3. Pengetahuan Dasar Vue.js — Bagian 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.

Pada tulisan kali ini kita akan membahas beberapa pengetahuan dasar dan beberapa istilah yang akan sering kita temui jika belajar Vue.js, semoga pembahasan ini akan membantu saya dan kita yang sedang belajar framework ini.
Langsung saja, silahkan disimak beberapa poin pembahasan berikut :

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 Bagian 2 ya !!! Stay tuned dan follow publikasi ini 😅

Terima kasih dan semoga bermanfaat penjelasan singkatnya.

Ditulis oleh Irfan Maulana
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.