Vue JS Intro
-
Upload
muhammad-rizki-rijal -
Category
Technology
-
view
155 -
download
0
Transcript of Vue JS Intro
Vue.js Introductionby @eezhal92
June 24th, 2016 @ IBTI Palu
Sema?
Muhammad Rizki Rijal a.k.a @eezhal92
Full-stack Developer,FreelancerPalu-er, linkedin: https://goo.gl/9xAKSr
fb: https://goo.gl/KVWAZE
What is Vue JS?
“ Vue.js (pronounced /vju /, like view) is a library for building interactive web interfaces “
Why using Vue?
- Reactive data binding- Composable view component- Mix and match small library- Progressive framework! (router, resource/ajax stuff,
state management and many more)- Simple API (easy to learn)- Lightweight- Rapid grow community- .etc
A little bit aboutMVVM and ”reactive”
INAF!!! JAS SOW ME DA
KOD!
Puhli~s
Todo List
jquery demo
vue demo
Commonly used API
Options/Data- data- props- computed- methods- watch
Options/Misc- events
Options/DOM- el- template
Global API- Vue.component- Vue.extend
Options/Assets- components
Directives- v-if- v-show- v-else- v-for- v-on- v-bind- v-model
Instance Methods- vm.$emit- vm.$dispatch- vm.$broadcast
Lifecycle Hooks
- init- created- beforeCompile- compiled- ready- attached- detached- beforeDestroy- destroyed
illustration
Component
Comment Box
demo
Progressive
Vue JS Official Plugin
- Vue Router (client-side routing)- Vue Resource (ajax)- Vuex (flux/redux-like state management)- many more...
Demo
Vue JS 2.0?
- Server-side rendering- Virtual DOM- Render function & JSX- etc.
https://youtu.be/c9esL3I4IGM
https://medium.com/the-vue-point/announcing-vue-js-2-0-8af1bde7ab9#.7f985q4to
Any question?
- https://laracasts.com/series/learning-vue-step-by-step- http://vue-workshop.surge.sh/- https://lepture.com/en/2016/vuejs-from-view-to-view- Vue JS Indonesia
https://www.facebook.com/groups/1675298779418239
Resources
Thanks!