Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live...

1

Orientation in Objects GmbH

Weinheimer Str. 6868309 Mannheim

[email protected]:

Vue.js – eine Einführung

1.0

Vue.js – eine Einführung© Orientation in Objects GmbH

Abstract

Im Schatten von Angular und React hat sich mit Vue.js ein weiteresJavaScript-Webframework als ernstzunehmende Alternative zurErstellung von modularen Single Page Applications entwickelt.

Der Einstieg ist dank des einfachen und minimalen Kerns einfach.Durch die hohe Anpassungsfähigkeit und das wenigerdogmenbehaftete Programmiermodell bietet es zudem vieleMöglichkeiten für die Erstellung flexibler und performanterWebanwendungen.

In diesem Vortrag werden wir am Beispiel eines Konferenzplanners dieKonzepte von Vue.js vorstellen.

2

2


Ihre Sprecher

Trainer, Berater, Entwickler

3

Falk Sippach (@sippsack)

ArchitekturAgile Softwareentwicklung

CodequalitätCo-Organisator

Commiter DukeCon

Vue.js – eine Einführung© Orientation in Objects GmbH 4

Yet another

JavaScript

framework?

3


Quelle: http://www.npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue



4


https://programm.javaland.eu/2018

https://github.com/dukecon/dukecon_pwa


Vue.js

“ Vue (pronounced /vjuː/, like view)

is a progressive framework for

building user interfaces.

Quelle: https://vuejs.org/v2/guide/

5


Live Coding


Infos

Tools

Code

Komponenten

Ausblick

Agenda

Fazit

6


Key-Facts

# Version 2.x

# Lizenz: MIT

# Leichtgewichtiger Kern: 20+ KByte (min + gzip)

# keine Abhängigkeiten


Historie

# Gründer: Evan You (Ex-Google)

# Alternative zu Angular

"flexible and lightweight … quick UI prototyping"

# 2013 gestartet, erste Veröffentlichung 02/2014

7


Kernaspekte

# Schlank, anpassungsfähig, universell einsetzbar

# Progressiv

# Reaktives Data-Binding

# Deklarative Views

# Wiederverwendbare Komponenten

# Mixins, Router, Vuex, ...


Component

Component Component

Component Component Component Component

Component ComponentDiff

Virtual DOM DOM

Re-Render

Component

Component Component

Component Component Component Component

Component Component

Virtual DOM

8


15

MVVM

View ViewModel Model

var data = {message: "Hello"

}

new Vue({el: "#app",data: data

}

<div id="app">{{message}}

</div>


Vue Core

# View-, Input-, Event-Binding

# Bedingungen, Schleifen

# Templates, Komponenten

# Lebenszyklus-Methoden, Computed Properties

# Mixins

# Transitionen

9


Vue Zusätze

# Routing

# I18n

# Vuex (Flux/Redux Implementierung)

# TypeScript statt JavaScript

# JSX Templates statt HTML-Templates

# Server Side Rendering (SSR) mit Nuxt.js


Einsatzgebiete

# Modernisieren von Webanwendungen

# Rapid Prototyping

# Komplexe SPAs/PWAs (flexibel erweiterbar)

10


Einstieg und Hilfe

https://vuejs.org/v2/guide/

https://github.com/vuejs/awesome-vue

https://github.com/vuejs/awesome-vue#books


Tools

11


Werkzeuge (1)

# IDE-Plugins

IntelliJ, Visual Studio Code, ...

# Chrome-Plugin Vue DevTools


Werkzeuge (2)

# vue-cli

Webpack (Hot Reload, Linting, Testing, PWA)

Erweiterbar (Plugins), CLI oder UI

12


Installation

# HTML, <script>vue.min.js</script>

# vue-cli (Simple, Webpack, ...)

$ npm install -g vue

$ npm install -g @vue/cli

$ vue create my-project # oder

$ vue init webpack my-project

$ cd my-project && npm install && npm run dev

ODER


Code

13


25

Deklaratives Rendern

<div id=" app ">

{{ message }}

</div>

<script src ="js/ vue.js "></script>

<script >

var app = new Vue ({

el: '# app ',

data: {

message : 'Hello Vue!'

}

})

</script>


26

Input Binding

<div id="app">

<p>{{ message }}</p>

<p>

<input v-model =" message " />

</p>

</div>

var app = new Vue({

el: '#app',

data: {


}

})

Two-Way-Data Binding

14


27

Computed Properties

<div id="app">


<p>{{ reversedMessage }}</p>

<p>

<input v-model="message" />

</p>

</div>

var app = new Vue({

el: '#app',

data: {..},

computed: {

reversedMessage : function() {

return this.message…

}

}

})


Lifecycle + Hooks

export default { beforeMount : function () { console . log ( 'before mount' , this ); }}

https://codingexplained.com/coding/front-end/vue-js/vue-instance-lifecycle-hooks

15


29

Bedingungen

<div id="app">


<p v-if="message === ''" >

Please enter a message!

</p>

<p>

<input v-model=" message " />

</p>

</div>

var app = new Vue({

el: '#app',

data: {


}

})


30

Event-Binding

<div id="app">


<p>

<input v-model="message" />

</p>

<button v-on:click="reverse" >

Reverse Message

</button>

</div>

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

},

methods: {

reverse: function() {

this.message =

this.message

.split('').reverse().join('')

}

}

})

16


31

List Rendering

<ul id="app">

<li v-for="item in items" >

{{ item.message }}

</li>

</ul>

var app = new Vue({

el: '#app',

data: {

items: [

{ message: 'Foo' },

{ message: 'Bar' }

]

}

})


32

Style Bindings

<div class=" static "

v-bind:class="{

active: isActive ,

'text-danger': hasError

}">

</div>

<div class=" static active "></div>

data: {

isActive : true,

hasError : false

}

17


33

Syntactic Sugar: v-model

<div id="app">

<p>{{ msg }}</p>

<p>

<input v-model =" msg" />

</p>

</div>

<div id="app">

<p>{{ msg }}</p>

<p>

<input

v-bind:value="msg"

v-on:input=

"msg = $event.target.value" >

</p>

</div>

Two-Way-Data Binding


<div id="app">

<p>{{ msg }}</p>

<p>

<input

v-bind:value ="msg"

v-on:input ="msg = ...">

</p>

</div>

34

Kurzform v-bind/v-on

<div id="app">

<p>{{ msg }}</p>

<p>

<input

:value ="msg"

@input ="msg = ...">

</p>

</div>

v-bind:value

v-on:input

18


Komponenten


Quelle: https://vuejs.org/v2/guide/components.html

Komponenten

19


…


Einfache KomponenteVue.component('button-counter', {

data: function () {

return {

count: 0

}

} ,

template: `<button @click="count++">

{{ count }} mal angeklickt.

</button>`

})

<div id="components-demo">

<button-counter />

</div>

new Vue({

el: '#components-demo'

})

20


Komponenten-ReuseVue.component('button-counter', {

data: function () {

return {

count: 0

}

},

template: `<button @click="count++">

{{ count }} mal angeklickt.

</button>`

})

<div id="components-demo">

<button-counter></button-counter>



</div>

new Vue({

el: '#components-demo'

})

data: {count: 0

}


Komponenten-Parameter

Vue.component('blog-post', {

props: ['title'],

template: '<h3>{{ title }}</h3>'

})

<blog-post title="My journey with Vue" ></blog-post>

<blog-post title="Blogging with Vue" ></blog-post>

<blog-post title="Why Vue is so fun" ></blog-post>

21


Parent-Child<template >

<div class ="container" ><h2>Parent: {{ name}} </ h2><child name="Kind" />

</ div ></ template ><script >

import Child from "./Child.vue"export default {

name: "parent" ,data : function () {

return { name: "Eltern" };},components: { Child }

};</ script ><style lang ="scss" ></ style >

<template>

<div>

<h3>Child: {{name}}</h3>

</div>

</template>

<script>

export default {

name: "child",

props: {

name: String

},

};

</script>

<style lang="scss">

</style>


Slots

Vue.component('blog-post', {

props: ['title'],

template: `

<h3>{{ title }}</h3>

<slot></slot>

`

})

<blog-post title="My journey with Vue"> Inhalt 1 </blog-post>

<blog-post title="Blogging with Vue"> Inhalt 2 </blog-post>

<blog-post title="Why Vue is so fun"> Inhalt 3 </blog-post>

22


Single File Components

# Template, JavaScript und CSS

# Verwendung von Pre-Prozessoren:

Babel, TypeScript, Pug, SCSS,

Stylus, PostCSS


Ausblick

23


Testen

Jest

Vue Test Utils


"devDependencies": {"eslint-plugin-vue" : "^4.5.0“/* ... */

}

module. exports = {extends : [

'standard' ,'plugin:vue/essential'

],plugins : [

'vue']

}

Styleguide + ESLint

https://vuejs.org/v2/style-guide/ https://github.com/vuejs/eslint-plugin-vue

24


<div id ="app" > <p> <router-link to ="/" >Home</router-link> <router-link to ="/about" >About </router-link> </p> <router-view></router-view></div>

import Vue from 'vue' ;import VueRouter from 'vue-router' ;Vue. use ( VueRouter );

const Home = { template : '<div>Home</div>' }const About = { template : '<div>About</div>' }

const routes = [ { path : '/' , component : Home }, { path : '/about' , component : About }]

const router = new VueRouter ({ routes // short for `routes: routes`})

const app = new Vue ({ router}). $mount ( '#app' )

Routing


import axios from 'axios';

axios.get ('/user?ID=12345'). then (function (response) {

console.log(response);console.log(response.data);

}). catch (function (error) {

console.log(error);});

axios.post ('/user', {firstName: 'Fred',lastName: 'Flintstone'

}). then (function (response) {

console.log(response);}). catch (function (error) {

console.log(error);});

Remote-Zugriff (axios)

25


State Handling mit Vuex

https://github.com/vuejs/vuex



Vuex

const store = new Vuex.Store({state: {

count: 0},mutations: {

increment (state) {state.count++

}}

})

store.commit('increment')

console.log(store.state.count) // -> 1

26


Server Side Pre Render

https://nuxtjs.org/


Vue.js GUI Bibliotheken

https://vuetifyjs.com

27


Fazit


Leicht erlernbar

# standardisierte, wartbare Projektstruktur

# einfache Konzepte, leicht für Neueinsteiger

# viele Online-Ressourcen/Bücher

# Komponenten zum Strukturieren

28


Performant?

# gutes Tooling (Hot-Reload, Dev Tools)

# beeindruckende Performance Benchmarks

# kleine Größe, keine Abhängigkeiten


Vue.js vs. ...

Kriterien:

# Paketgröße

# Performance

# Erlernbarkeit

# Wartbarkeit

# https://vuejs.org/v2/guide/comparison.html

# https://medium.com/@TechMagic/reactjs-vs-angular5-vs-vue-js-what-to-choose-in-2018-b91e028fa91d

29


Links

• Vue.js-Dokumentation– https://vuejs.org/v2/guide/

• Awesome Vue.js– https://github.com/vuejs/awesome-vue

• Vue.js: Zeitgemäße und wartbare JavaScript-Client-Anwendungen– https://www.heise.de/developer/artikel/Vue-js-Zeitgemaesse-und-wartbare-JavaScript-Client-

Anwendungen-4041158.html

• Vue.js im Enterprise-Umfeld– https://entwickler.de/entwickler-magazin/entwickler-magazin-4-18-579845105.html

57



[email protected]

??

? ?

????

Fragen ?

30



[email protected]

Vielen Dank für Ihre Aufmerksamkeit !

Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live...

Documents

Transcript of Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live...