HTML5-Tutorium: JavaScript: Hello World Vue 04

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3 (zu größeren Teilen überprüft)

Umfang: 4 (unwichtige Fakten fehlen)

Quellenangaben: 3 (wichtige Quellen vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 3 (gut)

Vorlesung WebProg

Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Vue 1 | Vue 2 | Vue 3 | Vue 4 | Vue 5 | Vue 6

Musterlösung
Git-Repository, git checkout v04 (JavaScript)
Git-Repository (TypeScript), git checkout v04

Anwendungsfälle (Use Cases)

Gegenüber dem ersten, zweiten und dritten Teil des Vue-Tutoriums ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.

Aufgabe

Aufgabe: Modularisieren Sie HelloWorld.vue Definieren Sie für die Komponente HelloWorld.vue zwei Subkomponenten:

• components/section/SectionHello.vue
• components/section/SectionQuestion.vue

Zuvor sollten Sie zwei wiederverwendbare Hilfskomponenten definieren:

• components/form/Button.vue
• components/form/Textfield.vue

Erstellen eines neuen Projektzweigs

Erstellen Sie einen neuen Projektzweig (branch) innerhalb von hello_world_vue und fügen Sie das Package uuid hinzu:

git checkout v03     # Wechsle in den Branch v03
git checkout -b v04  # Klone v03 in einen neuen Branch v04
npm i uuid
npm i

Erstellen der Hilfskomponenten

Button.vue

Eine parametrisierbare Button-Komponente.

// src/components/form/Button.vue

<script setup>
  defineProps
  ({ type:  { type: String, default: 'button' },
     label: { type: String, default: 'Button' }
  })

  const
    emit  = defineEmits(['click']),
    click = () => emit('click')
</script>

<template>
  <input :value="label" :type="type" @click="click"/>
</template>

<style scoped lang="scss">
  @import '@/css/form/Button.scss'
</style>

Das zugehörige SCSS-Modul importiert lediglich ein SCSS-Modul für Formulare.

// src/css/form/Button.scss
@import './_Form.scss'

Das Formular-SCSS-Modul definiert Eigenschaften, die sich mehrere Formular-Elemente teilen.

// src/css/form/_Form.scss
@import 'config';

label
{ font-family: $font-family-serif;
  font-size:   $font-size-p !important;
}

label, input
{ width:      10em;
  font-size:  100%;
  display:    inline-block;
  box-sizing: border-box;
  margin:     0.5ex;
}

label
{ text-align: right; }

Textfield.vue

Eine parametrisierbare Textfield-Komponente zum Erfassen von Texteingaben.

// src/components/form/Textfield.vue

<script setup>
  import { computed, onMounted, onUnmounted } from 'vue'
  import { v4 as uuid } from 'uuid'
  import ControllerKey  from '@/controller/ControllerKey'

  const
    props         = defineProps
                    ({ label:     { type: String,  default: '' },
                       text:      { type: String,  default: '' },
                       autofocus: { type: Boolean, default: false }
                    }),
    id            = uuid(),
    emit          = defineEmits(['update:text', 'enter']),
    text          = computed
                    ({ get()        { return props.text },
                       set(p_value) { return emit('update:text', p_value) }
                    }),
    enter         = () => emit('enter'),
    controllerKey = new ControllerKey('Enter', enter, id)

  onMounted  (() => controllerKey.add())
  onUnmounted(() => controllerKey.remove())
</script>

<template>
  <div>
    <label :for="id" v-if="label !== ''">{{label}}</label>
    <input :id="id" type="text" v-model="text" :autofocus="autofocus" />
  </div>
</template>

<style scoped lang="scss">
  @import '@/css/form/Textfield.scss'
</style>

Mit Hilfe von "computed" wird für die Property "text" bidirektionales Binding ermöglicht.

Die Getterfunktion liest den Wert aus der Property des Aufrufers. Die Setterfunktion erzeugt bei jeder Änderung ein passendes Ereignis. Der Name des Ereignisse muss laut Vue-Konvention 'update:<Propertyname>' lauten.

Wie zuvor wird das Formular-SCSS-Modul verwendet.

@import './_Form.scss'

Die in diesem SCSS-Modul enthaltenen Inhalte können, sobald die Modularisierung abgeschlossen ist, aus der Datei body.scss gelöscht werden.

Fortsetzung des Tutoriums

Sie sollten nun Teil 5 des Vue-Tutoriums bearbeiten. In diesem Tutorium werden die Daten extern aus JSON-Dateien geladen, erst statisch, dann dynamisch. Zum Schluss wird die Anwendung internationalisiert.

Quellen

1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)