Membuat Vue.js #01

Vue merupakan salah satu library pada bahasa pemrograman Javascript yang digunakan untuk membangun tampilan antarmuka pengguna dari suatu aplikasi berbasis web.

Mengapa menggunakan Vue?

1. Framwork Javascript yang populer
2. Didukung banyak pustaka (Library)
3. Banyak dikembangkan oleh komunitas
4. Banyak digunakan oleh perusahaan besar
5. Mudah dipelajari
6. Mudah di intergrasikan dengan pustaka lain. dan masih banyak lagi.

Implemntasi penggunan Vue :

Sebelum menggunakan Vue ada beberapa hal yang harus kita persiapkan 

A. Development Tools (Vue.js) 

1. Untuk mengembangkan aplikasi berbasis Vue sebenarnya hanya dibutuhkan code editor untuk menulis kode programnya, serta web browser untuk menampilkan hasilnya.
2. Tidak ada pilihan spesifik, silahkan gunakan code editor yang diinginkan, seperti : Sublime, Visual Studio Code, Netbeans, Notepad++, Intelij Idea, dsb.
3. Untuk web browser pun juga bebas, bisa menggunakan Google Chrome, Mozilla Firefox, Safari, bahkan Microsoft IE (versi 9 atau later).

B. Instalasi & Konfigurasi (Vue.js)

1. Sebagai sebuah library Javascript, maka kita perlu menambahkannya ke dalam halaman HTML sebelum menggunakaannya. Untuk melihat versi terbaru dan sebelumnya, silahkan cek pada tautan berikut https://github.com/vuejs/vue/releases.
2. Library Vue terbagi menjadi dua, yaitu mode development (filenya tidak dikompres) dan mode production (file dikompres). Sangat disarankan menggunakan mode development saat mengembangkan aplikasi menggunakan Vue karena semua informasi umum (warning) jika terjadi kesalahan kode akan dimunculkan.
3.  File Vue yang akan ditambahkan ke dalam halaman HTML bisa diunduh ke lokal (sehingga tidak membutuhkan koneksi internet) atau ditautkan langsung dengan server library Vue (CDN). Kita bisa mengunduh pustaka Vue versi development pada tautan berikut https://vuejs.org/js/vue.js , Adapun versi production bisa kita lihat pada tautan berikut ini https://vuejs.org/js/vue.min.js.
4. Buat struktur folder seperti ini
   

   
5. Copy code dari link berikut https://vuejs.org/js/vue.js, kemudian paste pada file lib/vue.js
6. Untuk Menghubungkan file HTML ke file vue.js maka cukup dengan kode berikut :
   

   
7. Kemudian edit file index.html menjadi seperti ini :
   

   
8. Kemudian kita uji coba kode tersebut di web Browser
   

   

C. Penjelasan Kode

1. Pertama, kita butuh HTML untuk menjalankan kode-kode Vue, karena Vue hanyalah sebuah library Javascript yang tugasnya memanipulasi tampilan HTML.
2. Kedua, Kita perlu menambahkan (include) library Vue ke HTML sebagaimana yang telah dijelaskan pada bagian Instalasi karena Vue merupakan library Javascript.
3. Ketiga, Kita perlu membuat kontainer (mount point) berupa elemen HTML, untuk menandai bahwa di dalam elemen tersebut nantinya hasil kompilasi Vue akan ditampilkan atau dimuat. Sebagai penanda, kita perlu tambahkan atribut id pada tag tersebut yang nantinya akan didefinisikan pada saat inisiasi objek Vue.
   

   
4. Keempat, Kita perlu menggunakan double kurung kurawal untuk menandai bahwa teks tersebut merupakan variabel yang akan dimanipulasi oleh Vue, model seperti ini telah umum digunakan diberbagai template engine.
   

   
5. Kelima, Kita perlu membuat instance/objek baru untuk class Vue, yang tentunya ditulis dengan menggunakan Javascript.
   

   
6. Objek Vue yang dibuat ini disimpan ke dalam variabel bernama vm (nama bebas) untuk memudahkan kita nantinya dalam mengakses objek ini. Objek Vue pada kode di atas menggunakan dua properti yaitu el dan data. Properti el menunjukkan id dari elemen HTML yang akan dijadikan sebagai target atau tempat ditampilkannya hasil manipulasi data dan template.
7. Properti berikutnya adalah data yang berbentuk objek, dimana di dalamnya terdapat key nama,prodi,tahun dan email dengan nilai berbeda beda yang merupakan representasi dari variabel. Key atau variabel dalam properti data inilah yang akan mengubah kode template {{ nama }} menjadi teks “Yogi Muhammad Aziz”. Dengan kata lain, jika kita mengubah nilai dari variabel nama ini menjadi misalnya “Hello!” maka tentu tampilan yang kita lihat pada browser juga akan berubah sesuai teks tersebut.

D.Kesimpulan

Kesimpulannya Vue.js adalah sebuah framwork dengan berbagai macam kelebihan yang ia miliki akan sangat membatu kita sebagai pengembang dalam mengembangkan aplikasi kita, dan juga penggunaan yang mudah kemudian untuk update juga bisa dilakukan secara langsung dan cepat, didukung juga oleh banyak komunitas membuat vue.js ini menjadi powerfull.