Apa Itu Vue JS?

Framework adalah sebuah kumpulan kode program sebagai kerangka kerja yang dapat membantu mempercepat dan mempermudah di dalam membangun perangkat lunak. Di dalamnya sudah terdapat fungsi-fungsi yang umum dibutuhkan, siap pakai dan lengkap.

Apa itu Vue JS?

Vue (dibaca view) adalah sebuah framework berbasis JavaScript open-source yang membantu programmer untuk membangun antarmuka interaktif website.

Fitur-Fitur Vue

Bukanlah sebuah framework yang powerful jika tidak memiliki fitur-fitur yang powerful pula. Berikut adalah daftar fitur-fitur yang dimiliki oleh Vue JS: 

• Directive
  Adalah sebuah fitur yang memungkinkan programmer menambahkan atribut custom pada tag HTML. Setiap atribut directive selalu diawali dengan tanda v-.
• Conditional Rendering
  Atribut v-if memungkinkan programmer memerintahkan render elemen html tertentu apabila memenuhi kondisi value atau state tertentu.
• List Rendering
  Atribut v-for memungkinkan programmer memerintahkan render dari list data untuk membentuk list tampilan dalam format html.
• Form Input Binding
  Tersedia juga v-model yang dapat digunakan untuk melakukan data binding pada form input. Apabila terjadi perubahan pada value input tertentu, maka state komponen juga akan ikut berubah.
• Event Handling
  Atribut v-on memungkinkan programmer untuk mengeksekusi atau menjalan sebuah fungsi apabila ada triger tertentu seperti click, keyup atau submit.

Komponen-Komponen Vue JS

Komponen adalah instansiasi (instance) Vue yang dapat digunakan kembali (re-usable) dengan nama yang sama. Perhatikan contoh kode program di bawah ini sebagai contoh perintah untuk mendaftarkan sebuah komponen dan diberikan nama tertentu. 

Vue.component('my-component-name', { /* ... */ })

Contoh: 

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

Efek Transisi pada Vue

Vue juga menyediakan berbagai cara untuk menerapkan efek transisi ketika ada item yang dimasukkan (add), diubah (edit), atau dikeluarkan (remove) dari DOM (Document Object Model). Berikut adalah contoh: 

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active di bawah versi 2.1.8 */ {
  opacity: 0;
}

Baca Juga : Tips Praktis! Mempelajari Coding untuk Pemula

Framework Selain Vue JS

Terdapat berbagai framework yang serupa dengan Vue JS yang mungkin bisa jadi pertimbangan belajar dan eksperimen berikutnya. Lihat daftar sebagai berikut: 

• ReactJS
• Angular
• Node.js
• Bootstrap
• Nuxt.js