"Overvue"

a short overview on the vue framework

webworkerNRW @sipgate, 16.01.2019

Andreas Mautz

Agenda:

  1. Basics
  2. Tools
  3. Ecosystem

Basics

  • JavaScript Framework
  • MVVM
  • PWA

Overview over the Basic Concepts

  • Components
  • Component Lifecycle
  • Component Templates
  • Props and Data
  • Events
  • Mixins

Components

Instance

                            
var vm = new Vue({
    el: "body",
    data: {
    message: "Hallo Vue",
    [...]
    }
});

Component Tree

                            
Root Instance
└─ TodoList
    ├─ TodoItem
    │  ├─ DeleteTodoButton
    │  └─ EditTodoButton
    └─ TodoListFooter
        ├─ ClearTodosButton
        └─ TodoListStatistice

Component Definition

                            
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

Component Usage

HTML Part 
                            
<div id="components-demo">
  <button-counter></button-counter>
</div>
JS Part 
                            
new Vue({ el: '#components-demo' })

Reusing Components

SAMPLE

Component Lifecycle

Lifecycle (1/5)

Lifecycle (2/5)

Lifecycle (3/5)

Lifecycle (4/5)

Lifecycle (5/5)

Component Templates

Simple (String) Templates

X-Templates

Single File Components

Other Templates (not complete)

  • Template literals
  • Inline
  • Render functions
  • JSX

Props and Data

Probs

“props are properties that can be set in your HTML markup. You can access them in your Vue instance and expose getters and setters to them.”
“one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child”

Probs

Data

“data is much more than that. anything in the data will become 'reactive'”

Events

Events

  • Simple: on-click
  • Event Modifiers: stop, prevent, once
  • Key Modifiers: esc, space, up, ...
  • System Modifier Keys: ctrl, alt, shift, ...
  • Mouse Button Modifier: left, right, middle
  • Advanced shit: Custom Events

Mixins

Mixins - Basics

Defined mixins will be mixed into the components context

Global Mixins

Defined global mixins will be mixed into EVERY components context in EVERY instance, overwriting style

Tools

  • CLI
  • Debug

Vue CLI

  • CLI
  • CLI Service (just named here)
  • CLI Plugins (just named here)

CLI

  • vue create
  • vue ui

Vue Debug Tools - Visual Studio Code

Vue Debug Tools - Chrome Extension

Ecosystem

Short History

  • 2013
  • v1.0 2016
  • current version 2.5.22

UI Frameworks

  1. Vuetify
  2. Vue Material
  3. Keen UI
  4. Element
  5. Buefy
  6. Bootstrap-Vue
  7. AT-UI
  8. Fish-UI
  9. Quasar
  10. Muse UI
  11. Vux

Vuetify

Material Component Framework for Vue.js 2

Bootstrap Vue

VuePress Code

vuestorefront

Questions?

Sources:

Thanks