Vue.js

An overview and pratical demonstration

Andrey Naldoni

Andrey Naldoni

  • Software Developer @ Bematech by TOTVS
  • Programming @ ETEC Praia Grande
  • System Analysis and Development @ FATEC Praia Grande
    		•

    Table of contents

    • What's Vue.js?
    • Reactive Data Binding
    • Directives
    • Components
    • Show me the code :)

    So, what's Vue.js?


    • Front-end lightweight (76kb on disk)* js library;
    • Reactive data binding and composable view components;
    • Very easy to use, straightforward syntax;
    • 175+ Supporting Libraries & Plugins **;
    • Ready for build large-scale applications.


    *Production version 1.0.26 https://vuejs.org/guide/installation.html#Standalone.
    **Awesome Vue.js list https://github.com/vuejs/awesome-vue.

    Vue.js compatibility

    Vue.js compatibility list *Compatibility list. From https://github.com/vuejs/vue

    Reactive Data Binding

    MVVM Architecture *MVVM Architecture. From vuejs.org/guide/overviw.html

    Here some code...

    HTML

    

<div id="app">
  {{ msg }}
</div>

    Javascript

    
new Vue({
  el: '#app',
  data: { msg: 'Hello World!'}
});

    Directives

    • HTML attribute vs directive;
    • Bind DOM Structure;
    • Transictions effects...

    Another portion of code...

    HTML

    
<div id="example">
  <p v-if="greeting">Hello World!</p>
</div>

    Javascript

    
new Vue({
  el: '#example',
  data: {
    greeting: true
  }
})

    Components

    Components *Component System. From vuejs.org/guide/overviw.html

    More static code example...

    HTML

    
<div id="example">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

    Defining components

    HTML

    
<div id="example">
  <my-component></my-component>
</div>

    Javascript

    
// Defining
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
})
// Registering
Vue.component('my-component', MyComponent)
// Vue root instance
new Vue({
  el: '#example'
})
    *vue-loader required, made with vue-cli generator.

    </> Let´s code guys! </>

    What you should look:

    • vue-cli
      • A simple CLI for scaffolding Vue.js project;
      • 5 official templates and hundreads of custom templates;
    • vuex
      • Vuex is an application architecture for centralized state management in Vue.js applications;
    • vue.js 2 (currently in RC)
      • It promises to speed up rendering and lower memory consumption by up to 2~4x in most scenarios

    vue-cli (Github) - https://github.com/vuejs/vue-cli
    Vuex - http://vuex.vuejs.org/
    Vue.js 2 (Annoucement) - https://vuejs.org/2016/04/27/announcing-2.0/
    Vue.js 2 (Branch next) - https://github.com/vuejs/vue/tree/next/

    Thanks for your attention!


    Useful links:

    Vue.js Official - https://vuejs.org/
    Vue.js Brasil Community - http://www.vuejs-brasil.com.br/
    Vue.js Brasil Telegram - https://telegram.me/vuejsbrasil
    Vue.js SP Meetup - https://www.meetup.com/VueJS-SP/