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) |
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 Attributscoped
, 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 wirdcreated
: Zustand, nachdem eine Komponente vollständig initialisiert wurdebeforeMount
: Zustand, bevor eine Komponente in den DOM-Baum des Browsers eingefügt wirdmounted
: Zustand, nachdem eine Komponente in den DOM-Baum des Browsers eingefügt wurdebeforeUpdate
: 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 wurdebeforeUnmount
: Zustand, bevor eine Komponente aus dem DOM-Baum des Browsers gelöscht wirdunmounted
: 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 aufpostcss-var-replace
.vite.config.js
: Importiertvite.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 ebenfallsvite.config.common.js
, bindet aberpostcss-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
- Kowarschick (WebProg): Wolfgang Kowarschick; Vorlesung „Web-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2024; Quellengüte: 3 (Vorlesung)