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!