Matura: Systemtechnik

Einsatz von Frameworks wie React, Vue, Angular

React

Quelle: https://de.wikipedia.org/wiki/React

Vue

Quelle: https://de.wikipedia.org/wiki/Vue.js

Angular

Quelle: https://de.wikipedia.org/wiki/Angular

Express

Quelle: https://de.wikipedia.org/wiki/Express.js

Warum setzt man so etwas überhaupt ein?

Grundidee von Vue

Quelle: https://blog.oio.de/2018/02/15/welches-javascript-framework-passt-zu-mir-vue-js/

Toolchain für Erstellung einer Vuebasierten App

Vue2/Vue3

Unterschiede:

Quelle:

Grundidee der „Reaktivität“

Quelle: https://vuejs.org/guide/extras/reactivity-in-depth.html

MVVM-Pattern

Quelle: https://www.dev-insider.de/was-bedeutet-mvvm-a-1103448/

Refresh des GUI

Transpiler

Code --(parse)-->AST--(transform)-->AST--(generate)-->Code

Quelle:

Informations/Datenhaltung in einer VueAnwendung

Progressive Framework

Quelle: https://www.interactivated.me/blog/progressive-javascript-framework/

Single-File-Component

<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting"></p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

Quelle: https://vuejs.org/guide/scaling-up/sfc.html

Typische Struktur eines *.vue-Files?

<template>
    <div>
        <div id="header">
            <img src="@/assets/logo.png" alt="HTL Logo">
            <h2>Stundenplan für:</h2>
            <h3></h3>
        </div>
    </div>
</template>

<script>
export default {
    name: "Header",
    props: {
        name: {
            type: String,
            required: true,
        },
    },
}
</script>

<style scoped>
#header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
}
#header h3 {
    margin-left: 10px;
}
img {
    height: 100px;
    margin-right: 20px;
}
</style>

Template Syntax

Quelle:

Wie wird „Reactivity“ realisiert?

export default {
  data() {
    return {
      count: 1
    }
  },

  // `mounted` is a lifecycle hook which we will explain later
  mounted() {
    // `this` refers to the component instance.
    console.log(this.count) // => 1

    // data can be mutated as well
    this.count = 2
  }
}

Quelle: https://vuejs.org/guide/essentials/reactivity-fundamentals.html

Properties und deren Verwendung

export default {
  props: {
    title: String,
    likes: Number
  }
}

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

List Rendering

data() {
  return {
    parentMessage: 'Parent',
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="(item, index) in items">
   -  - 
</li>

Quelle: https://vuejs.org/guide/essentials/list.html

Handling von Forms

Quelle: https://012.vuejs.org/guide/forms.html

Event-Handling (z.B. Button-Click)

<button @click="count++">Add 1</button>
<p>Count is: 8</p>

Quelle: https://vuejs.org/guide/essentials/event-handling.html

Componenten-Orientierung

Quelle: https://entwickler.de/javascript/vuejs-tutorial-so-entwickelt-man-komponenten-mit-vuejs

Anforderungen an eine Component

s.o.

Props

s.o.

Registrierung

<script>
    import Stundenplan from "./components/Stundenplan.vue";
    import Header from "./components/Header.vue";
    import Login from "./components/Login.vue";
    import {
        ref
    } from "vue";
...

Konzept der losen Bindung

Error-Handling

Asynchronitäten in einer Vue-Anwendung

– nicht gemacht –

Debugging

States

– nicht gemacht –

Kommunikation von Components

Nutzung von Modulen