Fitur Vue.js

Templates

Vue menggunakan sintaksis template berbasis HTML yang memungkinkan penggunanya untuk melakukan bind secara deklaratif terhadap rendered DOM ke data dari Vue Intance. Semua template Vue.js adalah HTML valid yang bisa diparse oleh spec-compilant browser dan HTML parsers.

Untuk informasi lengkap mengenai sintaksis template Vue.js, dapat mengunjungi halaman ini.

Reactivity

Salah satu fitur paling berbeda dari Vue adalah unobtrusive reactivity system. Model hanyalah objek JavaScript kosong. Saat kalian memodifikasinya, terjadi update pada view. Hal ini membuat pengolahan state menjadi sederhana dan intuitif. Vue menyediakan re-rendering teroptimasi secara langsung, tanpa perlu disiapkan oleh penggunanya. Setiap komponen menyimpan jejak ketergantungan reaktifnya saat melakukan render, sehingga sistem mengetahui secara pasti kapan harus melakukan render ulang, dan komponen mana yang di render ulang.

Components

Components adalah salah satu fitur terkuat dari Vue. Dalam aplikasi besar, diperlukan pembagian aplikasinya menjadi komponen yang kecil, self-contained, dan reusable agar development dapat dimanage dengan baik. Components membantu kalian mengembangkan elemen HTML dasar untuk mengenkapsulasi code yang reuseable. Pada tingkat tinggi, components merupakan element kostum yang akan ditambahkan tingkah laku (behavior) oleh compiler Vue. Dalam beberapa kasus, components juga bisa muncul sebagai elemen HTML asli yang dikembangkan dengan atribut spesial is . Snippet code di bawah ini merupakan contoh dari komponen Vue. Komponennya menampilkan sebuah tombol dan mencetak berapa kali tombol tersebut diklik.

Code Snippet:

Vue.component('buttonclicked', {
  props: ["initial_count"],
  data: function() {var q = {"count": 0}; return q;} ,
  template: '<button v-on:click="onclick">Clicked {{ count }} times</button>'
  ,
  methods: {
    "onclick": function() {
        this.count = this.count + 1;
    }
  },
  mounted: function() {
    this.count = this.initial_count;
  }
});

Transitions

Vue menyediakan berbagai cara untuk memberikan efek transisi saat item dimasukkan, diupdate, atau dihapur dari DOM. Tools yang termasuk memiliki fungsi:

• secara otomatis menerapkan kelas untuk transisi dan animasi CSS
• mengintegrasi library animasi CSS 3rd-party, seperti Animate.css
• menggunakan JavaScript untuk memanipulasi DOM saat transition hooks secara langsung
• mengintegrasi library animasi JavaScript 3rd-party, seperti Velocity.js

Informasi tambahan mengenai transisi dan penerapannya pada Vue.js bisa mengunjungi halaman ini.

Routing

Front end router merupakan solusi dari kelemahan single-page application (SPA) yaitu ketidakmampuannya untuk memberikan link ke "sub" page yang tepat dalam sebuah halaman web spesifik. Front end router memberikan URL hash-based yang dipisahkan oleh hashbang (#!), namun browser HTML 5 modern dapat melakukan routing tanpa menggunakan hashbang.

Vue memberikan tampilan yang mudah diubah berdasarkan jalur URL yang sedang diakses, tanpa mempedulikan bagaimana URLnya berubah (entah dari link yang terkirim melalui email, refresh, atau link dalam halaman).

Referensi:

• https://en.wikipedia.org/wiki/Vue.js
• https://vuejs.org/v2/guide/syntax.html
• https://alligator.io/vuejs/templating/
• https://vuejs.org/v2/guide/components.html
• https://vuejs.org/v2/guide/routing.html