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!

Made with Slides.com