Artikelverzeichnis
1. Implementieren Sie statische Komponenten
1.1 Bestimmen Sie die Verzeichnisstruktur
1.2 Erstellen Sie 4 Dateien in Komponenten und legen Sie die Grundstruktur fest
- Grundstruktur von MyHeader:
- Importieren Sie Komponenten in App.vue
1.3 Struktur und Stil importieren
2. Dynamische Daten anzeigen
2.1 Initialisierungsliste
1. Daten erstellen
2. Daten durchlaufen und übertragen
3. Daten empfangen und anzeigen
2.2 Daten hinzufügen
1. Fügen Sie ein Klickereignis in MyHeader hinzu.
2. MyHeader und MyList sind Brüder und können keine Daten übertragen.
Lösung: Fügen Sie die Listendaten in MyList in App.vue ein und verwenden Sie sieKind>>Vater>>KindArt der Datenübertragung
- Fügen Sie die Listendaten in App.vue ein und erstellen Sie eine Funktion, damit das untergeordnete Element Daten an das übergeordnete Element übergeben kann
- Übergeben Sie den Listeninhalt an die Unterkomponente MyList und übergeben Sie die Funktion an die Unterkomponente MyHeader
- MyHeader akzeptiert die Funktion von App.vue und übergibt den Eingabeinhalt über die Funktion an App.vue
3. Interaktive Funktionen implementieren
3.1 Implementieren Sie die Prüffunktion
1. Erstellen Sie eine Funktion in App.vue, um den Fertigwert zu ändern und die Funktion zu übergebenOpa>>Vater>>SohnÜbergeben Sie die Funktion über MyItem.vue an die Unterkomponente
und übergeben Sie sie dann über die Unterkomponente an die Unterkomponente:
2. MyItem akzeptiert die Funktion und übergibt die ID an die Funktion
. 3. Überprüfen Sie die Funktionsimplementierung
3.2 Implementieren Sie die Löschfunktion
1. Fügen Sie eine Löschfunktion in App.vue hinzu.
2. Erstellen Sie eine Funktion in App.vue, um den Fertigwert zu ändern und die Funktion zu übergebenOpa>>Vater>>SohnÜbergeben Sie es an MyItem.vue.
3. Erstellen Sie eine Funktion in MyItem.vue, um die angeklickte ID abzurufen, und übergeben Sie die ID an die deleteTodo-Funktion.
4. Schließen Sie die Löschfunktion ab
3.3 Bodenstatistik
1. Übergeben Sie das Array an MyFooter.
2. Verwenden Sie die Länge des Arrays als alle Werte.
3. Schreiben Sie eine Funktion, um den vollständigen Wert im berechneten Attribut von MyFooter zu berechnen (drei Schreibweisen).
computed: {
//遍历写法
doneTotal() {
//1.遍历写法
let i = 0
this.todos.forEach((todo) => {
if(todo.done) i++
});
return i
// 2.reduce正常写法
const x = this.todos.reduce((pre,current)=>{
return pre + (current.done ? 1 : 0)
},0)
return x
//3.reduce简写
return this.todos.reduce((pre,current)=> pre +(current.done ? 1 : 0),0)
},
}
4. Schließen Sie die untere Statistikfunktion ab
3.4 Alle auswählen und abgeschlossene Funktionen löschen
1. Schaltfläche „Alle auswählen“.
- Erstellen Sie in App.vue eine Funktion zum Auswählen/Alles aufheben
- Übergeben Sie die Funktion an MyFooter.vue
- Fügen Sie der Schaltfläche eine Klickfunktion hinzu, übergeben Sie den überprüften Wert an die Funktion clearAllTodo(), und die Funktion „Alles auswählen“ ist abgeschlossen.
2. Deaktivieren Sie die Schaltfläche „Fertig“.
- Erstellen Sie in App.vue eine eindeutig abgeschlossene Funktion
- Übergeben Sie die Funktion an MyFooter.vue
- Akzeptieren Sie die Funktion, fügen Sie die Klickfunktion auf der Schaltfläche hinzu, führen Sie die Funktion clearAllTodo () aus und die Löschfunktion ist abgeschlossen
4. Zusammenfassung
1. Komponentencodierungsprozess:
(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
1).一个组件在用：放在组件自身即可。
2). 一些组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）。
(3).实现交互：从绑定事件开始。
2. Requisiten gelten für:
(1).父组件 ==> 子组件 通信
(2).子组件 ==> 父组件 通信（要求父先给子一个函数）
3. Denken Sie bei der Verwendung des V-Modells daran: Der an das V-Modell gebundene Wert kann nicht der von Requisiten übergebene Wert sein, da Requisiten nicht geändert werden können!
4. Wenn der von props übergebene Wert ein Objekttypwert ist, meldet Vue beim Ändern der Eigenschaften im Objekt keinen Fehler. Dies wird jedoch nicht empfohlen.