Skip to content

Commit

Permalink
de: auto-fix Markdownlint issues
Browse files Browse the repository at this point in the history
  • Loading branch information
mdn-bot committed Jan 4, 2025
1 parent f999046 commit d8235c1
Show file tree
Hide file tree
Showing 91 changed files with 626 additions and 621 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ mit

Als nächstes können wir in unseren `index.hbs`, `completed.hbs` und `active.hbs` Vorlagen (die sich ebenfalls im Vorlagenverzeichnis befinden) vorerst den Aufruf der TodoList-Komponente einfügen.

In jedem Fall ersetzen Sie
In jedem Fall ersetzen Sie

```hbs
\{{outlet}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ Ihr Code wird dadurch reichhaltiger und professioneller, und Sie werden Probleme
- [Rendern einer Liste von Vue-Komponenten](/de/docs/Learn_web_development/Core/Frameworks_libraries/Vue_rendering_lists)
- : An diesem Punkt haben wir eine voll funktionsfähige Komponente; wir sind jetzt bereit, unserer App mehrere `ToDoItem`-Komponenten hinzuzufügen. In diesem Artikel werden wir uns ansehen, wie wir eine Reihe von To-Do-Elementdaten zu unserer `App.vue`-Komponente hinzufügen, die wir dann durchlaufen und in `ToDoItem`-Komponenten mithilfe der `v-for`-Direktive anzeigen.
- [Hinzufügen eines neuen To-Do-Formulars: Vue-Events, Methoden und Modelle](/de/docs/Learn_web_development/Core/Frameworks_libraries/Vue_methods_events_models)
- : Wir haben jetzt Beispieldaten eingerichtet und eine Schleife, die jedes Stück Daten nimmt und in einem `ToDoItem` in unserer App rendert. Was wir wirklich als nächstes brauchen, ist die Fähigkeit, unseren Benutzern die Eingabe ihrer eigenen To-Do-Elemente in die App zu ermöglichen, und dafür benötigen wir ein Text-<input>, ein Event, das beim Übermitteln der Daten ausgelöst wird, eine Methode, die beim Übermitteln der Daten zum Hinzufügen der Daten an die Liste und das erneute Rendern der Liste ausgelöst wird, und ein Modell zur Steuerung der Daten. Das werden wir in diesem Artikel behandeln.
- : Wir haben jetzt Beispieldaten eingerichtet und eine Schleife, die jedes Stück Daten nimmt und in einem `ToDoItem` in unserer App rendert. Was wir wirklich als nächstes brauchen, ist die Fähigkeit, unseren Benutzern die Eingabe ihrer eigenen To-Do-Elemente in die App zu ermöglichen, und dafür benötigen wir ein Text-`<input>`, ein Event, das beim Übermitteln der Daten ausgelöst wird, eine Methode, die beim Übermitteln der Daten zum Hinzufügen der Daten an die Liste und das erneute Rendern der Liste ausgelöst wird, und ein Modell zur Steuerung der Daten. Das werden wir in diesem Artikel behandeln.
- [Styling von Vue-Komponenten mit CSS](/de/docs/Learn_web_development/Core/Frameworks_libraries/Vue_styling)
- : Es ist endlich an der Zeit, unsere App ein wenig ansprechender aussehen zu lassen. In diesem Artikel werden wir die verschiedenen Möglichkeiten erkunden, Vue-Komponenten mit CSS zu stylen.
- [Verwendung von Vue-Berechneten Eigenschaften](/de/docs/Learn_web_development/Core/Frameworks_libraries/Vue_computed_properties)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -254,12 +254,12 @@ Im Großen und Ganzen sind {{Glossary("DSL/Domain_specific_language", "domänens

Sie sollten ernsthaft die Unterstützungs-Matrix und DSLs eines Frameworks in Betracht ziehen, wenn Sie eine Wahl für ein neues Projekt treffen. Nicht passende Browserunterstützung kann ein Hindernis für Ihre Benutzer sein; nicht passende DSL-Unterstützung kann ein Hindernis für Sie und Ihre Teamkollegen sein.

| Framework | Browserunterstützung | Bevorzugte DSL | Unterstützte DSLs | Zitierung |
| --------- | ----------------------------------- | --------------- | ---------------------- | ------------------------------------------------------------------------------- |
| Angular | Modern | TypeScript | HTML-basiert; TypeScript | [offizielle Dokumentation](https://angular.dev/guide/browser-support) |
| React | Modern | JSX | JSX; TypeScript | [offizielle Dokumentation](https://react.dev/reference/react-dom/client#browser-support) |
| Vue | Modern (IE9+ in Vue 2) | HTML-basiert | HTML-basiert, JSX, Pug | [offizielle Dokumentation](https://cli.vuejs.org/guide/browser-compatibility.html) |
| Ember | Modern (IE9+ in Ember Version 2.18) | Handlebars | Handlebars, TypeScript | [offizielle Dokumentation](https://guides.emberjs.com/v3.3.0/templates/handlebars-basics/) |
| Framework | Browserunterstützung | Bevorzugte DSL | Unterstützte DSLs | Zitierung |
| --------- | ----------------------------------- | -------------- | ------------------------ | ------------------------------------------------------------------------------------------ |
| Angular | Modern | TypeScript | HTML-basiert; TypeScript | [offizielle Dokumentation](https://angular.dev/guide/browser-support) |
| React | Modern | JSX | JSX; TypeScript | [offizielle Dokumentation](https://react.dev/reference/react-dom/client#browser-support) |
| Vue | Modern (IE9+ in Vue 2) | HTML-basiert | HTML-basiert, JSX, Pug | [offizielle Dokumentation](https://cli.vuejs.org/guide/browser-compatibility.html) |
| Ember | Modern (IE9+ in Ember Version 2.18) | Handlebars | Handlebars, TypeScript | [offizielle Dokumentation](https://guides.emberjs.com/v3.3.0/templates/handlebars-basics/) |

> [!NOTE]
> Die DSLs, die wir als "HTML-basiert" beschrieben haben, haben keine offiziellen Namen. Sie sind nicht wirklich echte DSLs, aber sie sind nicht-standardisiertes HTML, also glauben wir, dass es sich lohnt, sie hervorzuheben.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,14 @@ In diesem Beispiel fügen wir dem `<button>`-Element ein `onClick`-Attribut hinz

Das `onClick`-Attribut hat hier eine besondere Bedeutung: Es sagt React, dass eine bestimmte Funktion ausgeführt werden soll, wenn der Benutzer auf den Button klickt. Es gibt ein paar weitere Dinge zu beachten:

- Die [CamelCase]-Natur von `onClick` ist wichtig — JSX erkennt `onclick` nicht (es wird bereits in JavaScript für einen bestimmten Zweck verwendet, der verwandt, aber anders ist – standardmäßige [`onclick`](https://developer.mozilla.org/de/docs/Web/API/Element/click_event)-Handler-Eigenschaften).
- Die [CamelCase]-Natur von `onClick` ist wichtig — JSX erkennt `onclick` nicht (es wird bereits in JavaScript für einen bestimmten Zweck verwendet, der verwandt, aber anders ist – standardmäßige [`onclick`](/de/docs/Web/API/Element/click_event)-Handler-Eigenschaften).
- Alle Browser-Events folgen diesem Format in JSX – `on`, gefolgt vom Namen des Events.

Wenden wir dies nun in unserer App an, beginnend in der `Form.jsx`-Komponente.

### Formulardatenübermittlung handhaben

Erstellen Sie am Anfang der `Form()`-Komponentenfunktion (d. h. direkt unter der Zeile `function Form() {`) eine Funktion mit dem Namen `handleSubmit()`. Diese Funktion sollte [das Standardverhalten des `submit`-Events verhindern](https://developer.mozilla.org/de/docs/Learn_web_development/Core/Scripting/Events#preventing_default_behavior). Danach sollte sie eine `alert()` auslösen, die sagen kann, was Sie möchten. Sie sollte am Ende so aussehen:
Erstellen Sie am Anfang der `Form()`-Komponentenfunktion (d. h. direkt unter der Zeile `function Form() {`) eine Funktion mit dem Namen `handleSubmit()`. Diese Funktion sollte [das Standardverhalten des `submit`-Events verhindern](/de/docs/Learn_web_development/Core/Scripting/Events#preventing_default_behavior). Danach sollte sie eine `alert()` auslösen, die sagen kann, was Sie möchten. Sie sollte am Ende so aussehen:

```jsx
function handleSubmit(event) {
Expand Down Expand Up @@ -182,7 +182,7 @@ Es passiert einiges in dieser Zeile Code:

- Wir definieren eine `name`-Konstante mit dem Wert `"Learn React"`.
- Wir definieren eine Funktion, deren Aufgabe es ist, `name` zu ändern, die `setName()` genannt wird.
- `useState()` gibt diese beiden Dinge in einem Array zurück, sodass wir [Array-Destrukturierung](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) verwenden, um sie beide in separaten Variablen zu erfassen.
- `useState()` gibt diese beiden Dinge in einem Array zurück, sodass wir [Array-Destrukturierung](/de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) verwenden, um sie beide in separaten Variablen zu erfassen.

### State lesen

Expand Down Expand Up @@ -231,7 +231,7 @@ function handleChange() {

Derzeit ändert sich der Wert unserer Eingabe nicht, wenn Sie versuchen, Text einzugeben, aber Ihr Browser wird das Wort "Typing!" in der JavaScript-Konsole protokollieren, also wissen wir, dass unser Event-Listener an die Eingabe angehängt ist.

Um die Anschläge des Benutzers zu lesen, müssen wir auf die `value`-Eigenschaft der Eingabe zugreifen. Wir können dies tun, indem wir das `event`-Objekt lesen, das `handleChange()` erhält, wenn es aufgerufen wird. `event` wiederum hat [eine `target`-Eigenschaft](https://developer.mozilla.org/de/docs/Web/API/Event/target), die das Element darstellt, das das `change`-Event ausgelöst hat. Das ist unsere Eingabe. Also ist `event.target.value` der Text innerhalb der Eingabe.
Um die Anschläge des Benutzers zu lesen, müssen wir auf die `value`-Eigenschaft der Eingabe zugreifen. Wir können dies tun, indem wir das `event`-Objekt lesen, das `handleChange()` erhält, wenn es aufgerufen wird. `event` wiederum hat [eine `target`-Eigenschaft](/de/docs/Web/API/Event/target), die das Element darstellt, das das `change`-Event ausgelöst hat. Das ist unsere Eingabe. Also ist `event.target.value` der Text innerhalb der Eingabe.

Sie können diesen Wert `console.log()` verwenden, um ihn in der Konsole Ihres Browsers zu sehen. Versuchen Sie, die `handleChange()`-Funktion wie folgt zu aktualisieren, und geben Sie in das Eingabefeld ein, um das Ergebnis in Ihrer Konsole zu sehen:

Expand Down Expand Up @@ -349,7 +349,7 @@ Wir haben jetzt einen `setTasks`-Hook, den wir in unserer `addTask()`-Funktion v
Zuerst müssen wir `name` in ein Objekt einfügen, das die gleiche Struktur wie unsere vorhandenen Aufgaben hat. Innerhalb der `addTask()`-Funktion erstellen wir ein `newTask`-Objekt, das dem Array hinzugefügt werden soll.
Wir müssen dann ein neues Array erstellen, in dem diese neue Aufgabe hinzugefügt wurde, und dann den Zustand der Aufgabendaten auf diesen neuen Zustand aktualisieren. Um dies zu tun, können wir Spread-Syntax verwenden, um [das vorhandene Array zu kopieren](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Spread_syntax#copying_an_array) und unser Objekt am Ende hinzuzufügen. Dann übergeben wir dieses Array in `setTasks()`, um den Zustand zu aktualisieren.
Wir müssen dann ein neues Array erstellen, in dem diese neue Aufgabe hinzugefügt wurde, und dann den Zustand der Aufgabendaten auf diesen neuen Zustand aktualisieren. Um dies zu tun, können wir Spread-Syntax verwenden, um [das vorhandene Array zu kopieren](/de/docs/Web/JavaScript/Reference/Operators/Spread_syntax#copying_an_array) und unser Objekt am Ende hinzuzufügen. Dann übergeben wir dieses Array in `setTasks()`, um den Zustand zu aktualisieren.
Alles zusammengefügt, sollte Ihre `addTask()`-Funktion wie folgt aussehen:
Expand Down Expand Up @@ -486,7 +486,7 @@ function toggleTaskCompleted(id) {
}
```
Hier definieren wir eine `updatedTasks`-Konstante, die über das ursprüngliche `tasks`-Array mappt. Wenn die `id`-Eigenschaft der Aufgabe mit der `id` übereinstimmt, die der Funktion übergeben wurde, verwenden wir [Object-Spread-Syntax](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Spread_syntax), um ein neues Objekt zu erstellen und die `completed`-Eigenschaft dieses Objekts zu kippen, bevor wir es zurückgeben. Wenn es nicht übereinstimmt, geben wir das ursprüngliche Objekt zurück.
Hier definieren wir eine `updatedTasks`-Konstante, die über das ursprüngliche `tasks`-Array mappt. Wenn die `id`-Eigenschaft der Aufgabe mit der `id` übereinstimmt, die der Funktion übergeben wurde, verwenden wir [Object-Spread-Syntax](/de/docs/Web/JavaScript/Reference/Operators/Spread_syntax), um ein neues Objekt zu erstellen und die `completed`-Eigenschaft dieses Objekts zu kippen, bevor wir es zurückgeben. Wenn es nicht übereinstimmt, geben wir das ursprüngliche Objekt zurück.
Dann rufen wir `setTasks()` mit diesem neuen Array auf, um unseren Zustand zu aktualisieren.
Expand Down Expand Up @@ -573,7 +573,7 @@ export default Todo;
Da wir nun wissen, dass `deleteTask()` korrekt aufgerufen wird, können wir unseren `setTasks()`-Hook in `deleteTask()` aufrufen, um diese Aufgabe tatsächlich aus dem Zustand der App zu löschen, ebenso wie visuell in der App-Benutzeroberfläche. Da `setTasks()` ein Array als Argument erwartet, sollten wir ihm ein neues Array zur Verfügung stellen, das die vorhandenen Aufgaben kopiert, _ohne_ die Aufgabe, deren ID mit der ID übereinstimmt, die an `deleteTask()` übergeben wurde.
Dies ist eine perfekte Gelegenheit, [`Array.prototype.filter()`](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) zu verwenden. Wir können jede Aufgabe prüfen und eine Aufgabe aus dem neuen Array ausschließen, wenn ihre `id`-Prop mit dem `id`-Argument übereinstimmt, das an `deleteTask()` übergeben wurde.
Dies ist eine perfekte Gelegenheit, [`Array.prototype.filter()`](/de/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) zu verwenden. Wir können jede Aufgabe prüfen und eine Aufgabe aus dem neuen Array ausschließen, wenn ihre `id`-Prop mit dem `id`-Argument übereinstimmt, das an `deleteTask()` übergeben wurde.
Aktualisieren Sie die `deleteTask()`-Funktion in Ihrer `App.jsx`-Datei wie folgt:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -170,8 +170,8 @@ Nachdem Sie TypeScript konfiguriert haben, können Sie es in einer Svelte-Kompon
> Siehe die [Modulauflösung für Bundler, TypeScript-Laufzeiten und Node.js-Loader](https://www.typescriptlang.org/docs/handbook/modules/theory.html#module-resolution-for-bundlers-typescript-runtimes-and-nodejs-loaders) Sektion des TypeScript-Handbuchs für weitere Informationen.
> [!NOTE]
> Die Verwendung von TypeScript in Markup-Bereichen von Komponenten wird in Svelte 4, auf dem dieser Leitfaden basiert, nicht unterstützt.
> Während Sie JavaScript aus dem Markup verwenden können, müssen Sie TypeScript im `<script lang='ts'>`-Bereich verwenden.
> Die Verwendung von TypeScript in Markup-Bereichen von Komponenten wird in Svelte 4, auf dem dieser Leitfaden basiert, nicht unterstützt.
> Während Sie JavaScript aus dem Markup verwenden können, müssen Sie TypeScript im `<script lang='ts'>`-Bereich verwenden.
> TypeScript in Komponenten-Markup ist ab Svelte 5 erlaubt.
## Verbesserte Entwicklererfahrung mit TypeScript
Expand Down Expand Up @@ -240,8 +240,8 @@ Wir definieren einen `TodoType` Typ, um zu sehen, wie TypeScript durchsetzt, das
};
```

> [!NOTE]
> Das Svelte Template verwendet [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) 4.0.0, um TypeScript zu unterstützen. Ab dieser Version müssen Sie die `export`/`import`-Syntax verwenden, um Typen und Schnittstellen zu importieren. Überprüfen Sie [diesen Abschnitt des Fehlerbehebungsleitfadens](https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#how-do-i-import-interfaces-into-my-svelte-components-i-get-errors-after-transpilation) für weitere Informationen.
> [!NOTE]
> Das Svelte Template verwendet [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) 4.0.0, um TypeScript zu unterstützen. Ab dieser Version müssen Sie die `export`/`import`-Syntax verwenden, um Typen und Schnittstellen zu importieren. Überprüfen Sie [diesen Abschnitt des Fehlerbehebungsleitfadens](https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#how-do-i-import-interfaces-into-my-svelte-components-i-get-errors-after-transpilation) für weitere Informationen.
4. Nun verwenden wir `TodoType` von unserer `Todo.svelte`-Komponente. Fügen Sie zuerst dem `<script>`-Tag `lang="ts"` hinzu.
5. Importieren Sie den Typ und verwenden Sie ihn, um die `todo`-Eigenschaft zu deklarieren. Ersetzen Sie die Zeile `export let todo` durch folgende Zeile:
Expand Down Expand Up @@ -872,7 +872,7 @@ export class StringStack {
Das würde funktionieren. Aber wenn wir mit Zahlen arbeiten wollten, müssten wir denselben Code duplizieren und eine `NumberStack`-Klasse erstellen. Und wie könnten wir einen Stapel von Typen handhaben, die wir noch nicht kennen und die vom Benutzer definiert werden sollten?
Um all diese Probleme zu lösen, können wir Generika verwenden.
Um all diese Probleme zu lösen, können wir Generika verwenden.
Das ist unsere `Stack`-Klasse neu implementiert mit Generics:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@ Jetzt ist es an der Zeit, tiefer in Vue einzutauchen und unsere eigene benutzerd
<th scope="row">Voraussetzungen:</th>
<td>
<p>
Vertrautheit mit den grundlegenden <a href="/de/docs/Learn_web_development/Core/Structuring_content">HTML</a>,
<a href="/de/docs/Learn_web_development/Core/Styling_basics">CSS</a> und
<a href="/de/docs/Learn_web_development/Core/Scripting">JavaScript</a> Sprachen,
Kenntnis des
Vertrautheit mit den grundlegenden <a href="/de/docs/Learn_web_development/Core/Structuring_content">HTML</a>,
<a href="/de/docs/Learn_web_development/Core/Styling_basics">CSS</a> und
<a href="/de/docs/Learn_web_development/Core/Scripting">JavaScript</a> Sprachen,
Kenntnis des
<a
href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line"
>Terminals/Kommandozeile</a
Expand Down
Loading

0 comments on commit d8235c1

Please sign in to comment.