Berkenalan dengan Vue.js : Installasi, basic rendering

Vuejs merupakan progressive framework yang populer saat ini, progressive dalam artian vuejs bisa digunakan layaknya library jQuery yang biasa digunakan pada umumnya, hingga membangun `Simple Page Application` seperti `React` dan `Angular` pada tulisan kali ini saya mencoba membagikan pengetahuan saya mengenai vue-js.

Persiapan

Untuk memulai menggunakan vuejs, ada dua cara yaitu : mengintegrasikan library vuejs pada file html, atau menggunakan vue-cli, untuk info lebih lanjut mengenai installasi, dapat dilihat langsung di [dokumentasi]([Installation — Vue.js](https://vuejs.org/v2/guide/installation.html))

Pada artikel kali ini saya menggunakan cara pertama yaitu mengintegrasikan library vuejs ke file html :

Pada kode diatas saya mengintegrasikan library vue, dan juga mengintegrasikan bootstrap agar tampilan aga sedikit lebih baik :D

Declarative Rendering

Vue.js memungkinkan kita untuk merender data ke DOM menggunakan template syntax :

Buka file `html` di browser maka outputnya :

Halo dari Vue

Pada potongan kode diatas, kita membuat vue instance yang merefer pada element DOM dengan identifier id `app`, lalu mendeklarasikan data pada objek data di vue instance lalu me-rendernya dengan syntax `{{ }}` pada html.

Two-way Binding

Vuejs memungkinkan untuk melakukan two way binding dengan mudah, asumsikan kita ingin mengubah suatu variable yang berubah saat user melakukan input secara bersamaan. di vuejs kita dapat menggunakan `v-model` , sebuah direktif dari Vue :

Dengan menggunakan `v-model` dalam input tag, kita memberitahukan Vue variable mana yang harus di `bind` dengan input tersebut, pada kasus ini variable message. Two way binding berarti apabila kamu merubah nilai dari suatu model pada view, maka sebuah akan selalu berubah.

Perbandingan dengan jQuery

Mari kita bandingkan implementasi two-way binding pada vue dengan jquery :

Dari contoh diatas dapat dilihat, Vue lebih rapih dan lebih sedikit memakan waktu untuk membangun fitur seperti two-way binding, dan kode vue lebih mudah dipahami.

jQuery tentu nya merupakan library yang cukup powerful, namun seiring berjalan nya waktu, perubahan kebutuhan fitur yang ada saat ini, rasanya cukup sulit untuk mengandalkan jQuery sepenuhnya seperti dahulu kala.

Pada artikel selanjutnya akan membahas mengenai directive pada vue lebih lanjut : directive conditional (if, else, show) dan list rendering (foreach).

Referensi :
Introduction — Vue.js
Majesty of Vue.js 2 by Alex Kyriakidis et al. PDF/iPad/Kindle
Intro to Vue.js: Rendering, Directives, and Events | CSS-Tricks