Vue.js
The progressive JavaScript framework
Kashif Ullah
Lead Front-end Developer
Core JavaScript, Vue.js and React.js
@ikashifullah
PTA Website and Portal
Pakistan Telecommunication Authority
http://dirbs.pta.gov.pk
DIRBS
Device Identification, Registration and Blocking Sytem
http://dirbs.pta.gov.pk
DIRBS International
Device Identification, Registration and Blocking Sytem
Today's Talk
- Introduction to Vue.js
- Who's using it?
- Template Syntax
- Components Basics
-
Demos
- Blog Posts
- Boilerplate (Vue Cli)
Introduction to Vue.js
- Progressive framework for building user interfaces.
Introduction to Vue.js (Cont.)
Approachable
Already know HTML, CSS and JavaScript? You are ready to start building things in no time!
Versatile
An incrementally adoptable ecosystem that scales between a library and a full-featured framework.
Performant
20KB min+gzip Runtime
Blazing Fast Virtual DOM
Minimal Optimization Efforts
Introduction to Vue.js (Cont.)
- Create Single Page Applications by using Vue-router and Vuex.
-
Out of box integration with Laravel (onwards 5.3)
Who's using it?
-
9gag.com
-
laracasts.com
-
weex.com
-
gitlab.com
-
baidu.com
-
chess.com
-
app.codeship.com
More at https://www.wappalyzer.com/technologies/vue-js
Easy to get started
Hello to Vue.js
Wow, this is Vue.js?
Template Syntax
Text
Directives
Bind
Shortcut
v-if, v-else
Loops
Indexing Loops
Models
Two way data-binding
Event Handlers
Class and Style Binding
Custom Components
Loops in custom components
Useful Links
https://madewithvuejs.com
https://github.com/vuejs/awesome-vue
https://bulma.io/
https://buefy.github.io/
https://vuejs.org/2016/02/06/common-gotchas/
https://vuejs.org
https://baianat.github.io/vee-validate/
https://github.com/axios/axios
https://cli.vuejs.org/
Thank You!