Nice to met Vue

Nice to met Vue

Vue.js 2 Introduction, Overview, Basics and Learnings from a practical standpoint after successful usage in a medium scaled customer project. Presentation held by Ben Richter at the Javascript User Group in Dresden.

Demo application:



April 13, 2018


  1. „Nice to met Vue“ Vue.js 2 Overview, Basics, Learnings

  2. Ben Richter Frontend Developer @move:elevator

  3. General Angular / React / Vue

  4. Overview Release 2013 by Evan You (formerly Meteor and Google)

    Open Source Single-Page-Webapps, MVVM
 Simplicity, Performance, Singlefile Components Popularity: 83K Github stars (React 88K)
 Enterprise: Gitlab, Alibaba (china google), nintendo Eco-system
  5. Cherry Picker Angular: HTML Templating engine with Directives 

    easier migration of existing Code
 Typescript-Support React: Virtual DOM, Props, Redux-like store & routing 
 Scoped CSS, CLI generator (multiple templates) Polymer / Riot: Singlepage components Coherent eco-system: vue-router, Vuex
 Low learning curve. Intuitive. Fun! js/answer/Andy-Merskin?share=c40c234d&srid=TrWC The Best of all worlds
  6. Basics Startup, Templating, Structure, Plugins

  7. Starting a project IE8 and up with babel-polyfill CLI generator

    npm install -g vue-cli vue init webpack todo-app CDN in production 
 <script src=„"></script>
  8. Mustache interpolation {{ value }} <span>Message: {{ msg }}</span> Conditional

    rendering v-if, v-else, v-if-else <p v-if="seen">Now you see me</p> Visibility v-show <h1 v-show="ok">Hello!</h1> List loops v-for <ul id="example-2"> <li v-for="(item, index) in items" key="index"> {{ index }} - {{ item.message }} </li> </ul> Templating <template>
  9. Dynamic property binding v-bind / : <div v-bind:class="{ active: isActive,

    'text-danger': hasError }"></div> :class="todo.done ? 'green' : 'red'" Two-way data binding v-model <input type='text' v-model="todo.title" > Event listener v-on / @ <!-- full syntax --> <a v-on:click="doSomething"> ... </a> <!-- shorthand --> <a @click="doSomething"> ... </a> Directives
  10. Data, Methods, Computed, Watch <script> data() function! else shared 

    between instances props: methods: computed: watch: generic observer, good for heavy async computation data() { return { todos: [‘string‘], } }, // Like methods, but are cached until dependency changes computed: { counterDone () { return this.todos.filter(todo => todo.done).length }, },
  11. Lifecycle Hooks Lifecycle created mounted updated destroyed (+ beforeCreate, …

    ) // no arrow functions! needs this context to vue instance created: function () { console.log('a is: ' + this.isCreating) },
  12. Quasi standard Plugins Vuex State management Vue-router (Vue-resource HTTP-client —>

    Axios) Vue-test-utils Unit testing (+ Jest, Mocha, tape, AVA) Documentation DevTools: Components & Vuex (Chrome & Firefox) Server-Side Rendering Cross-Plattform: Weex, NativeScript-Vue More goodies
  13. Let’s have a look Router, Vuex, Semantic-UI, Parcel-Bundler VueDo

  14. Learnings

  15. Learnings Low learning curve, full speed in few weeks Very

    good Material Design implementation: Always refactoring: first KISS then DRY
 (When separate components? Use data / props / store?)
  16. Styleguide <multi-word> Components, prefix —> prevent Namespace errors prefix single-instance:

    TheHeader prefix with parent/coupled name: TodoList, TodoListButton data () {} must be a function, else shared between instances Specific props: status: { type: String, required: true, validator: function (value) { return ['syncing', 'error'].indexOf(value) !== -1 }, },
  17. move:elevator JavaScript, PHP, Typo3, Projectmanager … Neustadt —> Food Modern

    light office Terrace Kicker table Coffee Club Mate
  18. Vue ist FUN