Framework Vue.js

The Progressive
JavaScript Framework

Dalam membangun sebuah website yang interaktif dan mudah, banyak aplikasi yang berkembang. Begitu juga framework dalam pembuatan website, salah satunya adalah Vue.js.

Apa itu vue.js ?

Vue.js merupakan sebuah library yang digunakan dalam membangun sebuah halaman website yang interaktif menarik dengan cara pembuatan yang lebih mudah. Kita tidak perlu memikirkan bagaimana mengkaitkan data satu dengan data lainnya antara halaman website yang satu dengan lainnya.
Vue.js bukanlah sebuah framework yang seutuhnya berfungsi dalam membuat halaman website tersebut, tetapi lebih berfokus pada tampilan atau view. Dan jika kita memiliki suatu project membuat website, maka akan lebih mudah jika menggunakan framework seperti vue.js dalam menintegrasikan atau menghubungkan web application pada project website yang akan kita buat.
Ada istilah yang disebut data-binding(data=data, binding/bind (kalau di mobile legend 'bind account', yang artinya 'kaitkan akun')), sebut saja mengkaitkan data dan Vue.js ini memiliki fitur reactive data-binding yang memudahkan kita dalam menjaga sebuah data dan DOM(Document Object Model) agar tetap terhubung. Ketika kita menggunakan jQuery untuk memanipulasi sebuah DOM secara manual maka kemungkinan besar terjadi error, tetapi jika menggunakan vue.js, maka kita gunakan konsep data driven View. Maksudnya itu kita bisa gunakan sintaks dalam template HTML.
Berikut ini adalah gambaran proses dari vue.js

Nah, sekarang kita coba menggunakan vue.js dalam membuat sebuah web page sederhana. Coba copy paste kode dibawah ke text-editor(notepad / notepad++ / sublime, etc...) dan simpan dengan nama index.html, nama filenya bebas tetapi format file nya harus .html.


<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>Test Menggunakan Vue.js</title>
</head>
<body>
 <div id="id-untuk-dikatikan">
  Hello {{ nama }}!
 </div>
 <script type="text/javascript" src="https://vuejs.org/js/vue.js"></script>
 <script type="text/javascript">
  /* Ini Modelnya */
  var contohData = {
   nama: 'John Doe'
  }

  /* "ViewModel"
   * ini adalah variable yang menghubungkan antara view dan model
   */
  var myViewModel = new Vue({
    el: '#id-untuk-dikatikan',
    data: contohData
  })
 </script>
</body>
</html>

Untuk catatan, warna biru adalah library dimana vue.js berada, sedangkan yang warna merah adalah contoh penggunaan vue.js sebagai data-binding.
Jika sudah selesai dan di simpan, selanjutnya buka index.html nya di browser anda dan hasilnya akan seperti ini.