Aitindo Sharing Session

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

3. Apa yang ditawarkan Vue.js ?
● Simple
● Reactive
● Components
● Compact
● Fast
● Package Ready

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

5. Reactive
Mendukung expression dan computed property

6. Component
Susun aplikasi dengan menggunakan component yang dapat dipakai kembali

7. Compact
● 24 kb
● No dependency

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

9. Package Ready
Bisa di-install melalui NPM atau Bower

10. Compatibility Notes
Vue.js tidak support IE 8 ke bawah

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

12. 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

13. 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

14. 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

15. Jauh lebih baik, bukan ?

16. Methods and Event Handling
Code : https://github.com/sandi-racy/aitindo-sharing-session

17. 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

18. Form Input Binding
Code : https://github.com/sandi-racy/aitindo-sharing-session

19. 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

20. 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

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

22. Thank You