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

Ben Richter Frontend Developer @move:elevator 

General Angular / React / Vue 

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 https://vuejs.org/v2/guide/comparison.html Eco-system 

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!
 https://www.quora.com/Should-I-learn-React-js-or-Vue-js-Is-it-worth-it-if-I-learn-Vue-js-first-and-then-React- js/answer/Andy-Merskin?share=c40c234d&srid=TrWC The Best of all worlds 

Basics Startup, Templating, Structure, Plugins 

Starting a project IE8 and up with babel-polyfill CLI generator npm install -g vue-cli vue init webpack todo-app CDN in production 
 https://scotch.io/tutorials/build-a-to-do-app-with-vue-js-2 

Mustache interpolation {{ value }} Message: {{ msg }} Conditional rendering v-if, v-else, v-if-else

Now you see me

Visibility v-show

Hello!

List loops v-for

• {{ index }} - {{ item.message }}

Templating https://vuejs.org/v2/guide/syntax.html#Directives 

Dynamic property binding v-bind / : :class="todo.done ? 'green' : 'red'" Two-way data binding v-model Event listener v-on / @ ... ... Directives https://vuejs.org/v2/guide/syntax.html#Directives 

Data, Methods, Computed, Watch data() function! else shared 
 between instances props: methods: computed: watch: generic observer, good for heavy async computation https://vuejs.org/v2/guide/computed.html data() { return { todos: [‘string‘], } }, // Like methods, but are cached until dependency changes computed: { counterDone () { return this.todos.filter(todo => todo.done).length }, }, 

Lifecycle Hooks Lifecycle created mounted updated destroyed (+ beforeCreate, … ) https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram // no arrow functions! needs this context to vue instance created: function () { console.log('a is: ' + this.isCreating) }, 

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 

Let’s have a look Router, Vuex, Semantic-UI, Parcel-Bundler VueDo https://github.com/BenRichter/vue-todo 

Learnings 

Learnings Low learning curve, full speed in few weeks Very good Material Design implementation: vuetifyjs.com Always refactoring: first KISS then DRY
 (When separate components? Use data / props / store?) 

Styleguide 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: https://vuejs.org/v2/style-guide/ status: { type: String, required: true, validator: function (value) { return ['syncing', 'error'].indexOf(value) !== -1 }, }, 

move:elevator JavaScript, PHP, Typo3, Projectmanager … Neustadt —> Food Modern light office Terrace Kicker table Coffee Club Mate 

Vue ist FUN