Overview

Vue.js (dibaca seperti view) adalah sebuah library untuk membangun antarmuka web yang interaktif.

Apa yang ditawarkan Vue.js ?

● Simple● Reactive● Components● Compact● Fast● Package Ready

Simple

● Write some HTML● Grab some JSON● Create a Vue instance● That's it.

Reactive

Mendukung expression dan computed property

Component

Susun aplikasi dengan menggunakan component yang dapat dipakai kembali

Compact

● 24 kb● No dependency

Fast

http://regularjs.github.io/example/performance.html

Package Ready

Bisa di-install melalui NPM atau Bower

Compatibility Notes

Vue.js tidak support IE 8 ke bawah

Hello World

Code : https://github.com/sandi-racy/aitindo-sharing-session

Directive

● Directive adalah atribut khusus dengan prefix “v-”● Value dari directive adalah expression yang bisa disertai filter● Directive berfungsi untuk meng-apply special behavior kepada DOM ketika

nilai dari expression-nya berubah

Code : https://github.com/sandi-racy/aitindo-sharing-session

Computed Property

In-template expression sangat nyaman, tapi benar-benar ditujukan untuk operasi sederhana saja.

Template ditujukan untuk mendeskripsikan struktur view, menaruh terlalu banyak logic di template dapat membuat template menjadi berat dan susah untuk di-maintain.

Itulah alasan Vue.js membatasi binding expression hanya satu expression saja. Untuk logic yang memerlukan lebih dari satu expression sebaiknya menggunakan computed property.

Code : https://github.com/sandi-racy/aitindo-sharing-session

Computed Property vs $watch

Vue.js memberikan method API yang disebut $watch untuk mengamati perubahan data pada Vue instance. Ketika memiliki beberapa data yang harus berubah berdasarkan pada data-data yang lain maka bisa menggunakan $watch (terutama jika familiar dengan AngularJS). Namun, lebih baik menggunakan computed property daripada $watch.

Code : https://github.com/sandi-racy/aitindo-sharing-session

Jauh lebih baik, bukan ?

Methods and Event Handling

Code : https://github.com/sandi-racy/aitindo-sharing-session

Kenapa Listener di HTML ?

● Mempermudah mencari handler function di kode JS hanya dengan membaca sekilas template HTML

● Tidak harus menaruh event listener di JS, kode ViewModel dapat hanya berisi logic dan DOM-free

● Ketika ViewModel dihancurkan, semua event listener otomatis dihapus

Form Input Binding

Code : https://github.com/sandi-racy/aitindo-sharing-session

Transition

● Transition system di Vue.js memungkinkan untuk menerapkan efek transisi otomatis ketika elemen dimasukan atau dikeluarkan dari DOM

● Vue.js secara otomatis akan menambah atau menghapus class CSS untuk memicu transisi/animasi

● Vue.js juga memberikan Javascript hook function untuk memanipulasi DOM selama transisi

Code : https://github.com/sandi-racy/aitindo-sharing-session

Component

Component adalah salah satu fitur paling powerful di Vue.js. Component membantu meng-extend elemen dasar HTML untuk dapat digunakan kembali.

Secara sulitnya, component adalah elemen khusus yang compiler Vue.js akan melampirkan behavior tertentu. Dalam beberapa case, component juga dapat muncul sebagai elemen HTML asli yang di-extend dengan atribut khusus.

Code : https://github.com/sandi-racy/aitindo-sharing-session

Plugin

Code : https://github.com/sandi-racy/aitindo-sharing-session

Thank You