Aitindo Sharing Session
-
Upload
sandi-rosyandi -
Category
Software
-
view
91 -
download
0
Transcript of Aitindo Sharing Session
Overview
Vue.js (dibaca seperti view) adalah sebuah library untuk membangun antarmuka web yang interaktif.
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
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
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