Referenz
jquery vereinfacht den Prozess von Programmierern, DOM zu manipulieren
Vue-Vorteil: MVVM In vue muss der Programmierer das DOM nicht manipulieren. Sie müssen nur die Daten pflegen! (Datengesteuerte Ansicht)
Fazit: Im vue-Projekt wird dringend davon abgeraten, jQuery zu installieren und zu verwenden! ! !
1. Was ist Referenz
-
ref wird verwendet, um Entwicklern dabei zu helfen, Verweise auf DOM-Elemente oder -Komponenten zu erhalten , ohne sich auf jQuery verlassen zu müssen .
-
Jede vue-Komponenteninstanz enthält ein $refs -Objekt, das die Referenz des entsprechenden DOM-Elements oder der entsprechenden Komponente speichert.
-
Standardmäßig zeigen die $refs einer Komponente auf einen
空对象.
Der folgende Code dient nur dazu, das Instanzobjekt der Komponente abzurufen, um zu veranschaulichen, dass $refs standardmäßig auf ein leeres Objekt zeigt
Alles, was mit $ beginnt, ist ein eingebautes Mitglied von vue
2. Verwenden Sie ref, um auf DOM-Elemente zu verweisen
Wenn Sie ref verwenden möchten, um auf ein DOM-Element auf der Seite zu verweisen , können Sie dies wie folgt tun:
3. Verwenden Sie ref, um auf die Komponenteninstanz zu verweisen
Wenn Sie ref verwenden möchten, um auf die Komponenteninstanz auf der Seite zu verweisen , können Sie dies wie folgt tun:
my-counterAuf diese Weise können Sie die Methode add() in der Komponente aufrufen , indem Sie die Komponenteninstanz abrufen
Bei der Benennung eines Refs wird empfohlen, Ref am Ende hinzuzufügen, um die Ref-Erkennung zu erleichtern
4. Das Folgende ist die Ref-Kastanie: Steuerung der bedarfsgesteuerten Umschaltung von Textfeldern und Schaltflächen
Verwenden Sie den booleschen Wert inputVisible, um das bedarfsgesteuerte Umschalten des Textfelds und der Schaltfläche in der Komponente zu steuern. Der Beispielcode lautet wie folgt:
5. Lassen Sie das Textfeld automatisch den Fokus erhalten
Wenn das Textfeld angezeigt wird und Sie möchten, dass es sofort den Fokus erhält, können Sie ihm eine Referenz hinzufügen und die Methode .focus() des nativen DOM-Objekts aufrufen. Der Beispielcode lautet wie folgt:
Der folgende Fehler wird gemeldet:
Dieser Fehler tritt häufig am Frontend auf, was bedeutet, dass 'Focus' nicht undefiniert ist, sondern dass derjenige vor dem Aufruf der Eigenschaft oder Methode undefiniert ist
Es wird zu diesem Zeitpunkt nicht wirksam, da die Seite nach Abschluss der Ausführung sofort ausgeführt und gerendert wird, daher ist this.$refs.ipt nicht this.inputVisible = truedefiniertthis.$refs.ipt.focus()
6. diese Methode $nextTick (cb).
Die $nextTick(cb) -Methode der Komponente verzögert die Ausführung des cb-Callbacks bis zum nächsten DOM-Aktualisierungszyklus. Das gängige Verständnis lautet: Warten Sie, bis das DOM-Update der Komponente abgeschlossen ist, und führen Sie dann die cb-Callback-Funktion aus. Dadurch wird sichergestellt, dass die cb-Callback-Funktion mit dem neuesten DOM-Element arbeiten kann .
Der Grund für die Nichtverwendung der Lebenszyklusfunktion „updated“ ist, dass „updated“ immer noch ausgelöst wird, wenn die Eingabe auf eine Schaltfläche umgeschaltet wird. Zu diesem Zeitpunkt gibt es keine Eingabe, sodass kein „ipt“ einen Fehler meldet.