Grundstruktur#
Aufgaben#
Geben Sie weitere Textzeilen mit der Komponente »ExpBeschreibung.vue« aus.
Der klickbare Bereich soll eine Hintergrundfarbe erhalten.
Erläuterungen#
In jeder Komponente können drei Bereiche definiert werden:
template
script
styles (hier nicht genutzt), die Style-Angaben werden durch Klassen des Tachyons-Projektes zugeordnet.
Quellcode#
Die View: »Exp001ConsoleLog.vue«
1<script setup>
2import ExpBeschreibung from "@/components/ExpBeschreibung.vue";
3// variable
4const msg = "Klick mich... :-)";
5
6// functions
7function log() {
8 console.log(msg);
9}
10</script>
11
12<template>
13 <h1 class="f2 lh-title fw9 mb3 mt0 pt3">EXPERIMENT</h1>
14 <ExpBeschreibung topic="- Ausgabe einer lokalen Zeichenkette..." />
15 <ExpBeschreibung topic="- CSS für die Tabelle nutzt Tachyons-Klassen." />
16 <ExpBeschreibung topic="- Ausgabe mit console.log" />
17 <ExpBeschreibung topic="- Reaktion auf ein Klick-Ereignis." />
18 <div>
19 <h2>Lokale Ausgaben</h2>
20 <div class="bg-yellow w-40 pa4"
21 @click="log">{{ msg }}</div>
22 <p>
23 Beobachten Sie die Ausgaben in der Entwickler-Konsole, wenn Sie den Text
24 anklicken.
25 </p>
26 </div>
27</template>
In dieser Datei werden schon typische Konzepte angewendet.
Import einer Komponente#
Die Komponente »ExpBeschreibung« erwartet eine Zeichenkette als Parameter und wird nach dem Import, im Templatebereich aufgerufen: Nachfolgend nochmal die entspechenden Zeilen
import ExpBeschreibung from "@/components/ExpBeschreibung.vue";
<ExpBeschreibung topic="- Ausgabe einer lokalen Zeichenkette..." />
<ExpBeschreibung topic="- CSS für die Tabelle nutzt Tachyons-Klassen." />
<ExpBeschreibung topic="- Ausgabe mit console.log" />
<ExpBeschreibung topic="- Reaktion auf ein Klick-Ereignis." />
Variablen und Funktionen#
Im Script-Block werden auch lokal Variablen und Funktionen definiert, die im Template-Block genutzt werden.
// variable
const msg = "Klick mich... :-)";
// functions
function log() {
console.log(msg);
}
@click="log">{{ msg }}</div>
Klickereignisse#
Mit den Klick-Ereignis wird die Funktion »log« aufgerufen. Die Variable »msg« bildet den anklickbaren Bereich.
@click="log">{{ msg }}</div>
