HTML5-Tutorium: JavaScript: Hello World Vue 01

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
v01:   index.html (HTML validate, CSS validate, Google PageSpeed)
v01a: index.html (HTML validate, CSS validate, Google PageSpeed)
v01b: index.html (HTML validate, CSS validate, Google PageSpeed)
v01c: index.html (HTML validate, CSS validate, Google PageSpeed)

Git-Repository:
git checkout v01, git checkout v01a, git checkout v01b, git checkout v01c

Anwendungsfälle (Use Cases)

Gegenüber dem dritten, vierten, fünften und sechsten Teil des Tutoriums ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.

Aufgabe

In diesem Teil geht es zunächst darum, die Lösung aus Teil 6 des Tutoriums mit vue zu realisieren.

Erstellen eines neuen Projekts

Erstellen Sie ein neues Projekt hello_world_vue:

cd <somewhere>

npm init vue@latest
  Project name: » hello_world_vue
  > Nun können Sie ESLint und Prettier auswählen.
  > Die Module Pinia und Router behandeln wir später.
  > Für die Praktikumsaufgaben sollten Sie TypeScript nicht aktivieren.

Nun können Sie das Prorjekt in VSC öffnen und dort in einem zugehörigen Terminal weiterarbeiten.

cd hello_world_vue # In VSC nicht mehr notwendig.
npm i
npm run dev  # Im Browser: http://localhost:5173/

# Linefeed ändern (unter Windows => Unix-Zeilenende)
cat <<EOF > .vscode/settings.json
{ "files.eol": "\n" }
EOF
# Tragen Sie
#     !.vscode/settings.json
# in die Datei .gitignore ein.
# VSC (neu) starten, damit settings.json gelesen wird
# und dann ein Terminal für das Projekt öffnen

# initialize git
git init
git add -A
git commit -m "initial commit"

git remote add origin https://gitlab.multimedia.hs-augsburg.de/ACCOUNT/hello_world_vue
git remote -v
git push --set-upstream origin master

# create a new git branch
git checkout -b v00
git push --set-upstream origin v00

Anmerkungen

Vue ist ein Framework zum Erstellen von Single-Page-Web-Anwendungen. Es ist allerdings möglich, mehrere Web-Seiten unter die Kontrolle von Vite zu stellen.

Beispiel: wk_ecmascript_01

Achtung: Bauen Sie diesen Code NICHT in Ihre vue-Anwendung ein. Diese basiert als Single-PAge-Anwendung vollständig auf der Datei index.html.

// vite.config.js

...
  build: 
  { ...
    rollupOptions: 
    { input: 
      { main:     resolve(__dirname, './src/index.html'),
        solution: resolve(__dirname, './src/index_solution.html')
      }
    }
  },
...

Vue basierte bis Version 3.0 auf Webpack. Webpack gilt allerdings schon wieder als Dinosaurier (existiert seit 2012).

Seit Version 3.2 verwendet Vue Vite (französisch „schnell“). Dies hat zur Konsequenz, dass das Initialisieren und Testen einer Vue-Anwendung anders erfolgt als früher.

Vue 3 unterstützt im Gegensatz zu Vue 2 TypeScript. Allerdings wird im Tutorium Typescript nicht eingesetzt.

Vue-Anwendungen sind aus Komponenten aufgebaut. Das passt sehr gut zum Atomic-Design-Prinzip.

Überführung von hello-world-06 nach vue

git checkout -b v01   # neuen Git-Zweig (branch) anlegen

.gitignore            # ansehen
LICENSE               # wird aus einem anderen Projekt kopiert
package.json          # mit package.json von hello_world_06 mergen
vite.config.js        # mit vite.config.js von hello_world_06 mergen
                      # Ausnahmen: root, publicDir, und outDir
index.html            # gemäß hello_world_06 definieren; Import von 'main.js' anpassen:
                      # * <code>@import url("/css/head.css");</code>
                      # * <code>src="src/main.js"</code>)
                      # * Der Inhalt des Body-Elements wird ersetzt: <main id="app"></main>
src/css               # Ordner <code>src/css</code> von hello_world_06 übernehmen
public                # favicon ersetzen
README.md             # ansehen und verbessern

npm run dev           # Vite-Server neu starten

Tipp
Passen Sie die Datei eslint.config.js an. Wenn Sie Code von mir verwenden, benötigen Sie die Regel 'no-unexpected-multiline': 0. Sonst bekommen Sie bei Code von mir regelmäßig Fehlermeldungen.

import js               from '@eslint/js'
import pluginVue        from 'eslint-plugin-vue'
import globals          from 'globals'
import { defineConfig } from "eslint/config";

export default defineConfig([
  { name: 'app/files-to-lint',
    files: [ '**/*.{js,mjs,jsx,vue}' ],
  },

  { name: 'app/files-to-ignore',
    ignores: ['**/node_modules/**', '**/dist/**', '**/public/**', '**/dist-ssr/**', '**/coverage/**'],
  },

  { languageOptions:
    { globals:
      { ...globals.browser,
      },
    },
  },

  js.configs.recommended,
  ...pluginVue.configs['flat/essential'],

  { rules:
    { 'no-unexpected-multiline': 0,
    },
  },
])

Relative Pfade
Um relative Pfade beim Building zu erzwingen, reicht es nicht, die Option base: '' in vite.config.js einzufügen. Sie müssen dies zusätzlich in vue.config.js festlegen:

export default
{ publicPath: '' }

Passen Sie auch noch die Datei jsconfig.json an, damit in Visual Studio Code die Pfadverfolgung mittels Point and Click ermöglicht wird. Leider funktioniert dies nicht für den Alias config.

{ "compilerOptions": 
  {  "baseUrl": ".",
     "paths": 
      {  "@/*":           ["./src/*"],
         "config.css":    ["./src/css/_config.css"],
         "/css/*":        ["./src/css/*.css"],
         "/js/*":         ["./src/js/*"],
         "/controller/*": ["./src/controller/*"],
         "/service/*":    ["./src/service/*"],
         "/component/*":  ["./src/component/*"],
         "/store/*":      ["./src/store/*"]
      }
  },
  "exclude":    [ "node_modules", "dist" ],
  "extensions": [".js", ".vue", ".json"]
}

src/main.js

Da wir in diesem Tutorium die JavaScript-Dateien asynchron laden, müssen sie das Main-Skript entsprechenden anpassen. Die App darf erst erstellt und gemounted werden, wenn alle Dateien der App vollständig geladen wurden.

import { createApp } from 'vue'
import App           from './App.vue'

window.addEventListener
( 'load', 
  () => createApp(App).mount('#app')
)

index.html

• Die Single-Page-Datei index-html wird gemäß Hello World 06 definiert.

Allerdings wird der Inhalt des Bodies in die Komponenten-Datei App.vue verlagert. Wenn Sie eine Datei favicon.ico zur Hand haben, können Sie die Vite-Version dieser Datei ersetzen.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset = "UTF-8">
  <meta name    = "viewport"
        content = "width=device-width, initial-scale=1.0, user-scalable=yes"
  >

  <title>Hello World Vue (v01)</title>
  
  <style>
    @import url("/css/head.css");
  </style>
 
  <script src="src/main.js" async type="module"></script>
</head>

<body>
  <main id="app"></main>
</body>

</html>

src/App.vue

• Die Hello-World-Komponente und das Style-Element laden.
• Nur die Hello-World-Komponente ins Template einfügen.
• body.css importieren (ohne das Attribut scoped, damit der Inhalt der CSS-Datei allen Komponenten zur Verfügung steht).

<script setup>
  import HelloWorld from './component/HelloWorld.vue'
</script>

<template>
  <HelloWorld />
</template>

<style lang="css">
  @import '/css/body.css';
</style>

Der Ordner src/assets wird nun nicht mehr benötigt und kann gelöscht werden ebenso wie die anderen beiden Komponenten.

src/component/HelloWorld.vue

In die HelloWorld-Komponente werden die beiden Sections aus der Hello-World-06-App eingefügt.

Sections aus index.html in Template-Element einfügen.

<!-- src/component/HelloWorld.vue -->

<template>
  <section id="section_form" class="hidden">
    <h1>Hello, Stranger!</h1>
    <form>
      <div>
        <label for="input_name">What's your name?</label>
        <input id="input_name" autofocus>
      </div>
      <div>
        <input id="button_reset"  type="reset"  value="Reset">
        <input id="button_submit" type="button" value="Say hello">
      </div>
    </form>
  </section>
  <section id="section_hello" class="hidden">
    <h1 id="heading_hello">Hello, ...!</h1>
    <p>Welcome to Full-Stack Web Development!</p>
  </section>
</template>

Sectionspezifische CSS-Anweisungen aus der Hello-World-06-App werden in die Datei src/css/HelloWorld.css verschoben. Diese Datei wird in der Komponetne in src/component/HelloWorld.vue als Style importiert (import '@/css/component/HelloWorld'; ).

CSS für die Hello-World-Komponente

/* src/css/component/HelloWorld.css */

/* Hier wird alles aus der Datei body.css übernommen,
 * bis auf html {...} und body {...}.
 * Die Config-Datei wird in beiden CSS-Dateien importiert.
 */

Anschließend wird diese CSS-Datei in der Datei HelloWorld.vue importiert. Mittels scoped wird angegeben, dass die CSS-Anweisungen nur Auswirkungen auf den HTML-Code innerhalb der Datei HelloWorld.vue hat. Beachten Sie: In der Datei App.vue wurde bewusst auf scoped verzichtet. Das hat zu Folge, dass die dort importierten CSS-Anweisungen auf den gesamten HTML-Code der App auswirkungen haben.

<!-- src/component/HelloWorld.vue -->

<style scoped lang="css">
  @import '/css/component/HelloWorld.css';
</style>

Die wesentlichen Hello-World-Attribute und -Funktionen aus den JavaScript-Dateien der Hello-World-06-App werden in den Script-Bereich eingefügt.

Diese Elemente werden mittel ref und computed im nachfolgenden Schritt bidirektional mit den HTML-Elementen im Template-Element verknüpft.

Script für die HelloWorld-Komponenten

<!-- src/component/HelloWorld.vue -->

<script setup>
  import { ref, computed } from 'vue'

  const
    section       = ref('form'),
    helloStranger = ref('Hello, Stranger'),
    name          = ref(''),

    hello    = computed(() => name.value === '' ? helloStranger.value : `Hello, ${name.value}!`),
    sayHello = () => section.value = 'hello'
</script>

Im Template von HelloWorld.vue sollten Sie alle Attribute "id" mit Ausnahme von "input_name" löschen.

Der Grund ist, dass ID-Attribute im HTML-Dokument eindeutig sein müssen. Wenn in einer Komponente ein ID-Attribut definiert wird, kann man diese nicht mehrfach in eine andere Komponente einfügen. Man sollte in Komponenten, die mehrfach verwendet werden sollte, keine fest definierten IDs einfügen.

Ein Ausnahme bildet zunächst noch das Attribut "input_name", da dieser Identifikator vom zugehörigen Label referenziert wird: <label for="input_name">.

Verknüpfen Sie nun das Template bidirectional mit den Script-Elementen:

• v-if="section==='form'"
• v-if="section==='hello'"
• v-model="name"
• v-on:click="sayHello"
• {{helloStranger}}
• {{hello}}

<template>
  <section v-if="section==='form'">
    <h1>{{helloStranger}}</h1>
    <form>
      <div>
        <label for="input_name">What's your name?</label>
        <input id="input_name" autofocus v-model="name" >
      </div>
      <div>
        <input type="reset"  value="Reset">
        <input type="button" value="Say hello" v-on:click="sayHello">
      </div>
    </form>
  </section>
  <section v-if="section==='hello'">
    <h1>{{hello}}</h1>
    <p>Welcome to Full-Stack Web Development!</p>
  </section>
</template>

Autofokus-Aktivierung per JavaScript
Wir können auch noch den Autofokus-Mechanismus von Hello-World-06 nachbilden. Dazu verwenden wird zwei Vue-Observerfunktionen onMounted und onUnmounted. Diese werden jeweils aufgerufen, wenn das Ergeignis „Komponente wurde in den DOM-Baum eingefügt“ bzw. „Komponente wurde aus dem DOM-Baum entfernt“ eintritt. Wenn die Kompontente eingefügt wird, werden die bekannten Autofokus-Eventlistener registriert und der Autofokus aktiviert. Wenn die Komponenten entfernt wird, werden die Autofokus-Eventlistener gelöscht, da evtl. andere Komponenten einen anderen Autofokus aktivieren möchten.

<script setup>
  import { ref, computed, onMounted, onUnmounted } from 'vue'

  const
    section       = ref('form'),
    helloStranger = ref('Hello, Stranger'),
    name          = ref(''),

    hello     = computed(() => name.value === '' ? helloStranger.value : `Hello, ${name.value}!`),
    sayHello  = () => section.value = 'hello',
    autofocus = () => document.getElementById('input_name').focus(),
    visOn     = () => window.addEventListener('visibilitychange', autofocus),
    visOff    = () => window.removeEventListener('visibilitychange', autofocus)

  onMounted  (visOn);
  onUnmounted(visOff);
</script>

Darüber hinaus wird autofocus bei der Aktivierung des Resetbuttons ausgeführt. Damit wird der Fokus bei einem Rest auf das Eingaefeld gesetzt. Da der Event automatisch an den Default-Handler weitergeleitet wird, funktioniert die eigentliche Reset-Funktion (löschen der Feldinhalte) weiterhin.

<template>
...
      <div>
        <input type="reset"  value="Reset"     v-on:click="autofocus"/>
        <input type="button" value="Say hello" v-on:click="sayHello"/>
      </div>
...

Mounting in Vue

Man beachte, dass onMounted und onUnmounted Callback-Funktionen als Eingabeparameter erwarten. Diese werden ausgeführt, sobald die entsprechenden Ereignisse von Vue signalisiert werden. Es gibt noch diverse weitere Eventhandler für verschiedene Vue-Ereignisse.

Komponenten-Zustände
Vue-Komponenten durchlaufen verschiedene Zustände. Bei jedem Zustandswechsel wird ein Event ausgelöst:

• beforeCreate: Zustand, bevor eine Komponente initialisiert wird
• created: Zustand, nachdem eine Komponente vollständig initialisiert wurde
• beforeMount: Zustand, bevor eine Komponente in den DOM-Baum des Browsers eingefügt wird
• mounted: Zustand, nachdem eine Komponente in den DOM-Baum des Browsers eingefügt wurde
• beforeUpdate: Zustand, bevor eine Komponente im DOM-Baum des Browsers modifiziert wird (wegen einer Änderung des zugehörigen Modells)
• updated: Zustand, nachdem eine Komponente im DOM-Baum des Browsers modifiziert wurde
• beforeUnmount: Zustand, bevor eine Komponente aus dem DOM-Baum des Browsers gelöscht wird
• unmounted: Zustand, nachdem eine Komponente aus dem DOM-Baum des Browsers gelöscht wurde

In der Composition API und der Setup-API kann man sich für diese Ereignisse (mit Ausnahme der ersten beiden) als Observer mittels der Methoden

 onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted

registrieren. Daneben gibt es in der Composition API noch ein paar weitere Ereignisse, für die man sich als Observer registrieren kann.

Testen

Rufen Sie nun npm run dev oder npm run build sowie npm run prebuild auf.

Alternative Skript-Varianten

Im Folgenden sehen Sie drei Skript-Varianten (ohne Behandlung von Autofocus). Bitte benutzen Sie in Ihrem Prhekte die erste Variante (<script setup).

<script setup> (Vue 3.2, Vue 3.4, Vue 3.5)

<script setup>
  import { ref, computed, onMounted, onUnmounted } from 'vue'

  const
    section       = ref('form'),
    helloStranger = ref('Hello, Stranger'),
    name          = ref(''),

    hello     = computed(() => name.value === '' ? helloStranger.value : `Hello, ${name.value}!`),
    sayHello  = () => section.value = 'hello',
    autofocus = () => document.getElementById('input_name').focus(),
    visOn     = () => window.addEventListener('visibilitychange', autofocus),
    visOff    = () => window.removeEventListener('visibilitychange', autofocus)

  onMounted  (visOn);
  onUnmounted(visOff);
</script>

Musterlösung wk_hello_world_vue, git checkout v01a

Composition API (Vue 3.0)

<script>
  import { ref, computed, onMounted, onUnmounted } from 'vue'

  export default
  { setup()
    { const
        section       = ref('form'),
        helloStranger = ref('Hello, Stranger'),
        name          = ref(''),

        hello     = computed(() => name.value === '' ? helloStranger.value : `Hello, ${name.value}!`),
        sayHello  = () => section.value = 'hello',
        autofocus = () => document.getElementById('input_name').focus(),
        visOn     = () => window.addEventListener('visibilitychange', autofocus),
        visOff    = () => window.removeEventListener('visibilitychange', autofocus)

      onMounted  (visOn);
      onUnmounted(visOff);

      return {
        section, helloStranger, name,
        hello, sayHello, autofocus
      }
    }
  }
</script>

Diese Variante kann ohne weitere Anpassungen an Stelle der Script-Setup-Variante verwendet werden. Allerdings ist die Script-Setup-Variante leichter zu schreiben und zu lesen.

Musterlösung wk_hello_world_vue, git checkout v01b

Options API (Vue 2.0)

<script>
  export default
  { name: 'HelloWorld',

    data:
    function()
    { return {
        section:       'form',
        helloStranger: 'Hello, Stranger!',
        name:          ''
      }
    },

    computed:
    { hello()
      { return this.name === '' ? this.helloStranger : `Hello, ${this.name}!` }
    },

    methods:
    { sayHello()
      { this.section = 'hello' },

      autofocus()
      { document.getElementById('input_name').focus() },
    },

    mounted()
    { window.addEventListener('visibilitychange', this.autofocus).bind(this) },

    unmounted()
    { window.removeEventListener('visibilitychange', this.autofocus).bind(this) }
  }
</script>

Diese Variante kann ohne weitere Anpassungen an Stelle der Script-Setup-Variante verwendet werden. Allerdings ist die Script-Setup-Variante leichter zu schreiben und zu lesen. Die Options-API gilt als veraltet.

Musterlösung wk_hello_world_vue, git checkout v01c

Entfernen der letzten ID

Zurzeit existiert in der Komponente noch die ID input_name. In den älteren Vue-Versionen musste man eine zufällige ID erzeugen (z.B. milltel dem Paket uuid, um sicherzustellen, dass die Komponenten mehrfach verwendet werden kann, ohne dass diese ID mehrfach im HTML-Dokument vorkommt.

Seit Vue 3.5 gibt es für diese Augabe die Funktion useId.

<script setup>
  import { useId, ref, computed, onMounted, onUnmounted } from 'vue'

  const
    inputId       = useId(),
    ...
...
</script>

<template>
...
  <div>
    <label :for="inputId">What's your name?</label>
    <input :id="inputId" v-model="name" autofocus>
  </div>
...
</template>

Nun sollte es klappen, die Komponente zweimal in eine HTML-Seite einzubauen.

Musterlösung wk_hello_world_vue, git checkout v01

Properties

Wenn man den HTML-Code der App mit zwei Modulen HelloWorld untersucht, stellt man fest, dass die Property autofocus zweimal auf der HTML-Seite vorkommt, in jeder Komponenteninstanz einmal. Das ist laut HTML-Spezifikation nicht erlaubt.

Abhilfe schaffen die Template-Properties, die man mittels defineProps im Script-Bereich der Komponenten-Datei deklarieren kann.

const
  props = defineProps ({ autofocus: { type: Boolean } }),
  ...
  autoFocus = () => { if (props.autofocus)
                        document.getElementById(inputId).focus()
                    },
  ...

Nun kann man das Attribut dynamisch ins Template einbinden:

<input :id="inputId" v-model="name" :autofocus>

Ersetzen Sie außerdem in der gesamten Datei HelloWorld.vue den Strin 'input_name' durch die Konstante inputId (ohne Anführungsstriche!)

Fügen Sie folgenden Code in die Datei App.vue ein, um das Funktionieren der Property autofocus zu überprüfen.

<template>
  <HelloWorld autofocus />
  <HelloWorld />
</template>

Perfekt ist diese Lösung noch nicht, da der Autofokus-Mechanischmus nur für das erste HelloWorld-Element korrekt funktioniert. Wenn ein Dokument aus mehreren verschiedenen Komponenten besteht und die Seite ein auf der Seite in einer Komponete enthlatenes Autofokus-Element unterstützen soll, benötigt man einen Store, in dem die ID dieses Elements für alle Komponenten zugänglich ist. Mit Stores befassen wir uns später.

Vite für Development- und Produktionsmodus

Ein Problem gibt es bei der aktuellen Vue-Version nocht. Im Development-Modus integriert Vue irgendwelche __devtools__ in die Test-Anwendung. Die kommen mit dem Vite-Modul postcss-var-replace nicht zurecht.

Als Lösung teilen wir die Datei vite.config.js in drei Dateien auf:

• vite.config.common.js: Enthält alles bis auf postcss-var-replace.
• vite.config.js: Importiert vite.config.common.js und exportiert das importierte Objekt. Hier könnten weitere Konfigurationsanweisungen stehen, die speziell für den Development-Modus von Bedeutung sind. Das werden wir in einem späteren Tutorium noch ausnutzen.
• vite.config.build.js: Importiert ebenfalls vite.config.common.js, bindet aber postcss-var-replace vor dem Export in das Konfigurationsobjekt ein.

//vite.config.js

import common from './vite.config.common'

export default common

//vite.config.build.js

import common                from './vite.config.common'
import { postcssVarReplace } from 'postcss-var-replace';

common.css.postcss.plugins = [ postcssVarReplace() ]; 

export default common

Nun müssen wir in der Datei package.json das Build-Script noch anpasse, damit Vite die neue Konfigurationsdatei verwendet.

"scripts": {
  "dev": "vite",
  "build": "vite build --config ./vite.config.build.js --emptyOutDir",
  "prepreview": "vite build --config ./vite.config.build.js --emptyOutDir",
  "preview": "vite preview",
  "lint": "eslint . --fix"
},

Fortsetzung des Tutoriums

Sie sollten nun Teil 2 des Vue-Tutoriums bearbeiten. Es wird ein Keyup-Event-Handler ergänzt, zu Wahrung der Barrierefreiheit.

Quellen

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