![Page 1: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/1.jpg)
1
Orientation in Objects GmbH
Weinheimer Str. 6868309 Mannheim
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
![Page 2: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/2.jpg)
2
Vue.js – eine Einführung© Orientation in Objects GmbH
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?
![Page 3: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/3.jpg)
3
Vue.js – eine Einführung© Orientation in Objects GmbH 5
Quelle: http://www.npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue
Vue.js – eine Einführung© Orientation in Objects GmbH 6
Quelle: http://www.npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue
![Page 4: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/4.jpg)
4
Vue.js – eine Einführung© Orientation in Objects GmbH 7
https://programm.javaland.eu/2018
https://github.com/dukecon/dukecon_pwa
Vue.js – eine Einführung© Orientation in Objects GmbH 8
Vue.js
“ Vue (pronounced /vjuː/, like view)
is a progressive framework for
building user interfaces.
Quelle: https://vuejs.org/v2/guide/
![Page 5: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/5.jpg)
5
Vue.js – eine Einführung© Orientation in Objects GmbH 9
Live Coding
Vue.js – eine Einführung© Orientation in Objects GmbH 10
Infos
Tools
Code
Komponenten
Ausblick
Agenda
Fazit
![Page 6: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/6.jpg)
6
Vue.js – eine Einführung© Orientation in Objects GmbH 11
Key-Facts
# Version 2.x
# Lizenz: MIT
# Leichtgewichtiger Kern: 20+ KByte (min + gzip)
# keine Abhängigkeiten
Vue.js – eine Einführung© Orientation in Objects GmbH 12
Historie
# Gründer: Evan You (Ex-Google)
# Alternative zu Angular
"flexible and lightweight … quick UI prototyping"
# 2013 gestartet, erste Veröffentlichung 02/2014
![Page 7: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/7.jpg)
7
Vue.js – eine Einführung© Orientation in Objects GmbH 13
Kernaspekte
# Schlank, anpassungsfähig, universell einsetzbar
# Progressiv
# Reaktives Data-Binding
# Deklarative Views
# Wiederverwendbare Komponenten
# Mixins, Router, Vuex, ...
Vue.js – eine Einführung© Orientation in Objects GmbH 14
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
![Page 8: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/8.jpg)
8
Vue.js – eine Einführung© Orientation in Objects GmbH
15
MVVM
View ViewModel Model
var data = {message: "Hello"
}
new Vue({el: "#app",data: data
}
<div id="app">{{message}}
</div>
Vue.js – eine Einführung© Orientation in Objects GmbH 16
Vue Core
# View-, Input-, Event-Binding
# Bedingungen, Schleifen
# Templates, Komponenten
# Lebenszyklus-Methoden, Computed Properties
# Mixins
# Transitionen
![Page 9: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/9.jpg)
9
Vue.js – eine Einführung© Orientation in Objects GmbH 17
Vue Zusätze
# Routing
# I18n
# Vuex (Flux/Redux Implementierung)
# TypeScript statt JavaScript
# JSX Templates statt HTML-Templates
# Server Side Rendering (SSR) mit Nuxt.js
Vue.js – eine Einführung© Orientation in Objects GmbH 18
Einsatzgebiete
# Modernisieren von Webanwendungen
# Rapid Prototyping
# Komplexe SPAs/PWAs (flexibel erweiterbar)
![Page 10: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/10.jpg)
10
Vue.js – eine Einführung© Orientation in Objects GmbH 19
Einstieg und Hilfe
https://vuejs.org/v2/guide/
https://github.com/vuejs/awesome-vue
https://github.com/vuejs/awesome-vue#books
Vue.js – eine Einführung© Orientation in Objects GmbH 20
Tools
![Page 11: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/11.jpg)
11
Vue.js – eine Einführung© Orientation in Objects GmbH 21
Werkzeuge (1)
# IDE-Plugins
IntelliJ, Visual Studio Code, ...
# Chrome-Plugin Vue DevTools
Vue.js – eine Einführung© Orientation in Objects GmbH 22
Werkzeuge (2)
# vue-cli
Webpack (Hot Reload, Linting, Testing, PWA)
Erweiterbar (Plugins), CLI oder UI
![Page 12: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/12.jpg)
12
Vue.js – eine Einführung© Orientation in Objects GmbH 23
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
Vue.js – eine Einführung© Orientation in Objects GmbH 24
Code
![Page 13: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/13.jpg)
13
Vue.js – eine Einführung© Orientation in Objects GmbH
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>
Vue.js – eine Einführung© Orientation in Objects GmbH
26
Input Binding
<div id="app">
<p>{{ message }}</p>
<p>
<input v-model =" message " />
</p>
</div>
var app = new Vue({
el: '#app',
data: {
message : 'Hello Vue!'
}
})
Two-Way-Data Binding
![Page 14: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/14.jpg)
14
Vue.js – eine Einführung© Orientation in Objects GmbH
27
Computed Properties
<div id="app">
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
<p>
<input v-model="message" />
</p>
</div>
var app = new Vue({
el: '#app',
data: {..},
computed: {
reversedMessage : function() {
return this.message…
}
}
})
Vue.js – eine Einführung© Orientation in Objects GmbH 28
Lifecycle + Hooks
export default { beforeMount : function () { console . log ( 'before mount' , this ); }}
https://codingexplained.com/coding/front-end/vue-js/vue-instance-lifecycle-hooks
![Page 15: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/15.jpg)
15
Vue.js – eine Einführung© Orientation in Objects GmbH
29
Bedingungen
<div id="app">
<p>{{ message }}</p>
<p v-if="message === ''" >
Please enter a message!
</p>
<p>
<input v-model=" message " />
</p>
</div>
var app = new Vue({
el: '#app',
data: {
message : 'Hello Vue!'
}
})
Vue.js – eine Einführung© Orientation in Objects GmbH
30
Event-Binding
<div id="app">
<p>{{ message }}</p>
<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('')
}
}
})
![Page 16: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/16.jpg)
16
Vue.js – eine Einführung© Orientation in Objects GmbH
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' }
]
}
})
Vue.js – eine Einführung© Orientation in Objects GmbH
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
}
![Page 17: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/17.jpg)
17
Vue.js – eine Einführung© Orientation in Objects GmbH
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
Vue.js – eine Einführung© Orientation in Objects GmbH
<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
![Page 18: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/18.jpg)
18
Vue.js – eine Einführung© Orientation in Objects GmbH 35
Komponenten
Vue.js – eine Einführung© Orientation in Objects GmbH 36
Quelle: https://vuejs.org/v2/guide/components.html
Komponenten
![Page 19: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/19.jpg)
19
Vue.js – eine Einführung© Orientation in Objects GmbH 37
…
Vue.js – eine Einführung© Orientation in Objects GmbH 38
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'
})
![Page 20: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/20.jpg)
20
Vue.js – eine Einführung© Orientation in Objects GmbH 39
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>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
new Vue({
el: '#components-demo'
})
data: {count: 0
}
Vue.js – eine Einführung© Orientation in Objects GmbH 40
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>
![Page 21: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/21.jpg)
21
Vue.js – eine Einführung© Orientation in Objects GmbH 41
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>
Vue.js – eine Einführung© Orientation in Objects GmbH 42
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>
![Page 22: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/22.jpg)
22
Vue.js – eine Einführung© Orientation in Objects GmbH 43
Single File Components
# Template, JavaScript und CSS
# Verwendung von Pre-Prozessoren:
Babel, TypeScript, Pug, SCSS,
Stylus, PostCSS
Vue.js – eine Einführung© Orientation in Objects GmbH 44
Ausblick
![Page 23: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/23.jpg)
23
Vue.js – eine Einführung© Orientation in Objects GmbH 45
Testen
Jest
Vue Test Utils
Vue.js – eine Einführung© Orientation in Objects GmbH 46
"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
![Page 24: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/24.jpg)
24
Vue.js – eine Einführung© Orientation in Objects GmbH 47
<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
Vue.js – eine Einführung© Orientation in Objects GmbH 48
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)
![Page 25: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/25.jpg)
25
Vue.js – eine Einführung© Orientation in Objects GmbH 49
State Handling mit Vuex
https://github.com/vuejs/vuex
Quelle: http://www.npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue
Vue.js – eine Einführung© Orientation in Objects GmbH 50
Vuex
const store = new Vuex.Store({state: {
count: 0},mutations: {
increment (state) {state.count++
}}
})
store.commit('increment')
console.log(store.state.count) // -> 1
![Page 26: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/26.jpg)
26
Vue.js – eine Einführung© Orientation in Objects GmbH 51
Server Side Pre Render
https://nuxtjs.org/
Vue.js – eine Einführung© Orientation in Objects GmbH 52
Vue.js GUI Bibliotheken
https://vuetifyjs.com
![Page 27: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/27.jpg)
27
Vue.js – eine Einführung© Orientation in Objects GmbH 53
Fazit
Vue.js – eine Einführung© Orientation in Objects GmbH 54
Leicht erlernbar
# standardisierte, wartbare Projektstruktur
# einfache Konzepte, leicht für Neueinsteiger
# viele Online-Ressourcen/Bücher
# Komponenten zum Strukturieren
![Page 28: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/28.jpg)
28
Vue.js – eine Einführung© Orientation in Objects GmbH 55
Performant?
# gutes Tooling (Hot-Reload, Dev Tools)
# beeindruckende Performance Benchmarks
# kleine Größe, keine Abhängigkeiten
Vue.js – eine Einführung© Orientation in Objects GmbH
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
![Page 29: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/29.jpg)
29
Vue.js – eine Einführung© Orientation in Objects GmbH
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
Orientation in Objects GmbH
Weinheimer Str. 6868309 Mannheim
??
? ?
????
Fragen ?
![Page 30: Vue.js – eine Einführung5 © Orientation in Objects GmbH Vue.js – eine Einführung 9 Live Coding © Orientation in Objects GmbH Vue.js – eine Einführung 10 Infos Tools](https://reader030.vdocuments.net/reader030/viewer/2022040410/5ec98161840bd01f0a0e2479/html5/thumbnails/30.jpg)
30
Orientation in Objects GmbH
Weinheimer Str. 6868309 Mannheim
Vielen Dank für Ihre Aufmerksamkeit !