Im Kosmos der Web UI Frameworks ist es nicht leicht sich neben den Platzhirschen Angular und React zu behaupten, bieten diese doch scheinbar alles was das Entwicklerherz begehrt. Nichts desto trotz hat sich Vue.js in den vergangenen Jahren einen Namen als dritte Möglichkeit erarbeitet. In dieser Session soll daher begründet werden wie dem Framework das gelingen konnte. Wie es grundsätzlich funktioniert und wie es das Ökosystem aussieht, dass sich mittlerweile rund um Vue.JS gebildet hat. Zeitgleich werden die darin befindlichen Ansätze mit denen in Angular und React verglichen um eine Entscheidungsgrundlage für oder auch gegen Vue.JS bieten zu können.

1. Graphic by Freepik

8. •
•
•
•
•
•
•
•
•
•

9. Quellen: https://github.com/HerrLoesch/DWX2019-vueExample

11. •
•
•
•
•

12. 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/

13. •
•
•

15. Quelle: https://star-history.t9t.io/#vuejs/vue&facebook/react&angular/angular

17. •
•
Quelle: http://kangax.github.io/compat-table/es5/

19. Quelle: https://vuejs.org/v2/guide/#What-is-Vue-js
Vue Instanz

26. Data Binding
Event Binding
https://vuejs.org/v2/guide/events.html#Event-Modifiers

28. Müssen gleich sein

29. Vue.filter('capitalize', function (value) {
if (!value)
return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
{{ message | capitalize }}

32. •
•
•
•
•
•

33. https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

34. nicht unbedingt nötig

35. Neue Datei router.js anlegen
In main.js referenzieren

36. App.vue

37. LottoDrawings.vue
this.$router.push({name: 'details', params: {drawing: this.drawing.dateTime}})

38. LottoDrawingDetails.vue

39. •
•

43. LottoDrawings.vue
LottoDrawingDetails.vue

44. •
•
Wandelt Eingabe in Zahl um.

47. •
•
•

48. Neues Projekt anlegen

49. Plugin hinzufügen

52. •
•

54. •
•
•

55. •
https://vue-test-utils.vuejs.org/

60. •
•
•

61. Wichtig
Wichtig
Pluginfähig
Server-side
rendering

62. https://vuetifyjs.com/en/

64. •
•
•

65. 

67. •
•
•

68. Eine Komponente
Mehrere
Komponenten
Eine SPA Eine PWA

70. Siehe:https://github.com/HerrLoesch/vlingo-auth-ui/tree/master/src/store

73. •
•
•
•