SlideShare ist ein Scribd-Unternehmen logo
1 von 73
Graphic by Freepik
•
•
•
•
•
•
•
•
•
•
Quellen: https://github.com/HerrLoesch/DWX2019-vueExample
•
•
•
•
•
Ursprünglicher Release 2010 2013 2014
Website angular.io reactjs.org vuejs.org
Lizenz MIT MIT MIT
Verwendet von Google, Microsoft Facebook, Uber Alibaba, Apple
Größe (komprimiert und verkleinert) 563kB 100kB 33,kB
https://madewithangular.com/
https://madewithreact.com/
https://madewithvuejs.com/
•
•
•
Quelle: https://star-history.t9t.io/#vuejs/vue&facebook/react&angular/angular
•
•
Quelle: http://kangax.github.io/compat-table/es5/
Quelle: https://vuejs.org/v2/guide/#What-is-Vue-js
Vue Instanz
Data Binding
Event Binding
https://vuejs.org/v2/guide/events.html#Event-Modifiers
Müssen gleich sein
Vue.filter('capitalize', function (value) {
if (!value)
return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
{{ message | capitalize }}
•
•
•
•
•
•
https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
nicht unbedingt nötig
Neue Datei router.js anlegen
In main.js referenzieren
App.vue
LottoDrawings.vue
this.$router.push({name: 'details', params: {drawing: this.drawing.dateTime}})
LottoDrawingDetails.vue
•
•
LottoDrawings.vue
LottoDrawingDetails.vue
•
•
Wandelt Eingabe in Zahl um.
•
•
•
Neues Projekt anlegen
Plugin hinzufügen
•
•
•
•
•
•
https://vue-test-utils.vuejs.org/
•
•
•
Wichtig
Wichtig
Pluginfähig
Server-side
rendering
https://vuetifyjs.com/en/
•
•
•

•
•
•
Eine Komponente
Mehrere
Komponenten
Eine SPA Eine PWA
Siehe:https://github.com/HerrLoesch/vlingo-auth-ui/tree/master/src/store
•
•
•
•

Weitere ähnliche Inhalte

Ähnlich wie Einstieg in das Vueniverse

Ähnlich wie Einstieg in das Vueniverse (20)

Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 
HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
Was nicht passt wird responsive gemacht - Conference Edition
Was nicht passt wird responsive gemacht - Conference EditionWas nicht passt wird responsive gemacht - Conference Edition
Was nicht passt wird responsive gemacht - Conference Edition
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
Einfach Für Alle - Mit dem KERN UX-Standard zu einer intuitiven und barriere...
Einfach Für Alle - Mit dem KERN UX-Standard  zu einer intuitiven und barriere...Einfach Für Alle - Mit dem KERN UX-Standard  zu einer intuitiven und barriere...
Einfach Für Alle - Mit dem KERN UX-Standard zu einer intuitiven und barriere...
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
 
Azure WorkshopPart1 Intro
Azure WorkshopPart1   IntroAzure WorkshopPart1   Intro
Azure WorkshopPart1 Intro
 
Mit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidMit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & Android
 
BizSpark goes Cloud
BizSpark goes CloudBizSpark goes Cloud
BizSpark goes Cloud
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
 
Infopark CMS Fiona mit Ruby on Rails
Infopark CMS Fiona mit Ruby on RailsInfopark CMS Fiona mit Ruby on Rails
Infopark CMS Fiona mit Ruby on Rails
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
 
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 SeitenjQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
 
Chaos Kata Fitnesstraining für DevOps Teams
Chaos Kata Fitnesstraining für DevOps TeamsChaos Kata Fitnesstraining für DevOps Teams
Chaos Kata Fitnesstraining für DevOps Teams
 

Mehr von Hendrik Lösch

„Wie reden Sie denn mit mir?!?“ – Stakeholder überzeugen als Softwarearchitekt
„Wie reden Sie denn mit mir?!?“ – Stakeholder überzeugen als Softwarearchitekt„Wie reden Sie denn mit mir?!?“ – Stakeholder überzeugen als Softwarearchitekt
„Wie reden Sie denn mit mir?!?“ – Stakeholder überzeugen als Softwarearchitekt
Hendrik Lösch
 

Mehr von Hendrik Lösch (20)

Why (most) softwareprojects fail silently
Why (most) softwareprojects fail silentlyWhy (most) softwareprojects fail silently
Why (most) softwareprojects fail silently
 
We (don't) need a software architect!?!
We (don't) need a software architect!?!We (don't) need a software architect!?!
We (don't) need a software architect!?!
 
Restrukturierung einer industriellen Großapplikation
Restrukturierung einer industriellen GroßapplikationRestrukturierung einer industriellen Großapplikation
Restrukturierung einer industriellen Großapplikation
 
Vom Monolith zum Modulith
Vom Monolith zum ModulithVom Monolith zum Modulith
Vom Monolith zum Modulith
 
Der Software auf den Zahn gefühlt - Einstieg in die Architekturbewertung
Der Software auf den Zahn gefühlt - Einstieg in die ArchitekturbewertungDer Software auf den Zahn gefühlt - Einstieg in die Architekturbewertung
Der Software auf den Zahn gefühlt - Einstieg in die Architekturbewertung
 
„Wie reden Sie denn mit mir?!?“ – Stakeholder überzeugen als Softwarearchitekt
„Wie reden Sie denn mit mir?!?“ – Stakeholder überzeugen als Softwarearchitekt„Wie reden Sie denn mit mir?!?“ – Stakeholder überzeugen als Softwarearchitekt
„Wie reden Sie denn mit mir?!?“ – Stakeholder überzeugen als Softwarearchitekt
 
Software ist was du draus machst!
Software ist was du draus machst!Software ist was du draus machst!
Software ist was du draus machst!
 
Modular mit .NET
Modular mit .NETModular mit .NET
Modular mit .NET
 
.NET zu .NET Core
.NET zu .NET Core.NET zu .NET Core
.NET zu .NET Core
 
Migrationsstrategien
MigrationsstrategienMigrationsstrategien
Migrationsstrategien
 
Survivalkit für Codehausmeister
Survivalkit für CodehausmeisterSurvivalkit für Codehausmeister
Survivalkit für Codehausmeister
 
Confessions of a Codehausmeister
Confessions of a CodehausmeisterConfessions of a Codehausmeister
Confessions of a Codehausmeister
 
Hey, wie geht es dir?
Hey, wie geht es dir?Hey, wie geht es dir?
Hey, wie geht es dir?
 
WPF Dos n Don'ts - der WPF Rundumschlag
WPF Dos n Don'ts - der WPF RundumschlagWPF Dos n Don'ts - der WPF Rundumschlag
WPF Dos n Don'ts - der WPF Rundumschlag
 
Clean mit visual studio
Clean mit visual studioClean mit visual studio
Clean mit visual studio
 
Advanced Refactoring Patterns
Advanced Refactoring PatternsAdvanced Refactoring Patterns
Advanced Refactoring Patterns
 
Codesmells
CodesmellsCodesmells
Codesmells
 
Advanced Refactoring Patterns - Dev Day 2018
Advanced Refactoring Patterns - Dev Day 2018Advanced Refactoring Patterns - Dev Day 2018
Advanced Refactoring Patterns - Dev Day 2018
 
Der Healthcheck für Softwareprojekte
Der Healthcheck für SoftwareprojekteDer Healthcheck für Softwareprojekte
Der Healthcheck für Softwareprojekte
 
MVVM mit WPF
MVVM mit WPFMVVM mit WPF
MVVM mit WPF
 

Einstieg in das Vueniverse

Hinweis der Redaktion

  1. Wir konzentrieren uns vor allem auf VueJS!!!
  2. Man findet massenhaft Informationen dazu. Aber irgendwie ist das häufig nur von dem getrieben was man als erstes wahrnimmt. Wir wollen das Framework kennen lernen und begründen warum es eine Daseinsberechtigung hat.