VUE -Benutzerdefiniten sind ein Mechanismus zur Einkapselung von sich wiederholenden DOM -Operationen, die für Szenarien geeignet sind, in denen die Komponentenlogik den Anforderungen nicht erfüllen kann und die DOM direkt betreibt. Es realisiert Funktionen wie Fokussierung von Eingabebrahmen, Berechtigungssteuerung, Scrollenverhaltensverarbeitung usw. durch Hakenfunktionen von Befehlsobjekten (z. B. montiert und aktualisiert). Zu den h?ufigsten Verwendungsbeispielen geh?ren: 1. Automatischer Fokus-Eingangsbox (V-FOCUS); 2. Befehl für die Berechtigungssteuerung (V-Permission), die feststellt, ob Elemente basierend auf den Benutzerberechtigungen entfernen sollen; 3.. Befehl zum Verhalten von Verhaltensverhalten (V-Scroll), der Datenlade- oder Animation durch die Schnittstelle Observer API ausl?st. Es ist zu beachten, dass benutzerdefinierte Anweisungen keine Komponentenlogik ersetzen sollten, wodurch Missbrauch vermieden wird, die zu Wartungsschwierigkeiten führt oder überm??ige Nebenwirkungen einführt.

In Vue.js sind benutzerdefinierte Richtlinien eine sehr praktische L?sung, wenn Sie das DOM direkt manipulieren müssen und die Komponentenkapselung den Anforderungen nicht erfüllen kann. Es bietet eine saubere, wiederverwendbare M?glichkeit, mit niedrigem Dom-Operationen umzugehen, die nicht für die platzierte Komponentenlogik geeignet sind.

Was sind Vue Custom Directives?

Die benutzerdefinierte Richtlinie von VUE ist im Wesentlichen eine spezielle Marke, die an ein DOM -Element angeh?ngt werden kann, um ein repetitives DOM -Betriebsverhalten zu verkapulieren. Konzentrieren Sie sich beispielsweise auf das Eingabefeld, setzen Sie das Scrolling -Verhalten, binden Sie das Ereignish?ren usw.

Vue bietet mehrere Standardanweisungen wie v-model und v-show , aber oft müssen wir unsere eigenen Anweisungen entsprechend den gesch?ftlichen Anforderungen erstellen.

Ein grundlegendes benutzerdefiniertes Richtlinienobjekt kann die folgenden Hakenfunktionen enthalten:

• created : Berufen Sie vor dem Befehl gebunden
• beforeMount : Berufen Sie, bevor das Element in den übergeordneten Knoten eingefügt wird
• mounted : Nach Abschluss der Befehlsbindung gerufen und das DOM eingefügt wird
• beforeUpdate : Vor dem Aktualisieren des Komponenten angerufen
• updated : Nach der Aktualisierung der Komponente aufgerufen
• beforeUnmount : Aufgerufen, wenn die Anweisung entfernt werden soll

Normalerweise verwenden wir am h?ufigsten mounted und updated Haken, da die meisten DOM -Vorg?nge in diesen beiden Phasen auftreten.

Gemeinsame Nutzungsszenarien und Implementierungsbeispiele

1. Automatischer Fokus-Eingangsbox ( v-focus )

Dies ist eine sehr h?ufige Anforderung: Die Seite positioniert den Cursor nach dem Laden automatisch auf einem Eingabefeld.

 app.directive ('Focus', {
  montiert (el) {
    El.Focus ();
  }
});

Verwenden Sie dann in der Vorlage:

 <Eingabe v-Fokus />

Hinweis: Nicht alle Browser l?sen den Fokus sofort aus. Wenn Sie auf Probleme sto?en, k?nnen Sie einen setTimeout hinzufügen, um die Ausführung zu verz?gern.

2. Implementieren Sie Anweisungen zur Berechtigungssteuerung (z. v-permission )

Manchmal m?chten Sie Berechtigungen verwenden, um zu steuern, ob eine Taste oder ein Bereich angezeigt wird. Obwohl Sie v-if oder v-show verwenden k?nnen, kann sie auch in Anweisungen eingekapselt werden, wenn die Logik relativ einheitlich ist.

 app.directive ('Erlaubnis', {
  montiert (El, Bindung) {
    const forders fordermission = bindung.Value;
    const userPermissions = ['admin', 'editor']; // Angenommen, dies ist die vom Store erhaltene Benutzerberechtigungsliste, wenn (! UserPermissions.includes (forders fordermission)) {
      el.parentnode.removechild (el);
    }
  }
});

Wie man verwendet:

 <Button V-Permission = "&#39;Admin&#39;"> Artikel l?schen </schaltet>

Auf diese Weise wird diese Schaltfl?che nicht im DOM angezeigt, wenn der Benutzer keine Administratorberechtigungen hat.

3. Handle Scrolling-Verhalten ( v-scroll )

M?glicherweise m?chten Sie einige Animationen oder Datenladen durchführen, wenn einige Elemente in visuellen Bereichen erscheinen, die durch die Schnittstelle der Beobachter API erreicht werden k?nnen.

 app.directive ('scrollen', {
  montiert (El, Bindung) {
    const asserver = neuer intersectionObserver ((Eintr?ge) => {
      Eintr?ge.foreach (Eintrag => {
        if (Eintrag. Issintersecting) {
          bindung.Value (); // die eingehende Methode des Beobachters ausl?sen.unobserve (EL); // nur einmal ausl?sen}
      });
    });

    Observer.observe (el);
  }
});

Verwendung in Komponenten:

 <div v-scroll = "loadMoredata"> laden Sie mehr Inhalt ... </div>

wobei loadMoreData eine Methode ist, die ausgeführt wird, wenn das Element in das Ansichtsfenster eintritt.

Tipps: Wann sollten Sie keine benutzerdefinierten Befehle verwenden?

Obwohl benutzerdefinierte Richtlinien leistungsf?hig sind, gibt es einige Situationen, auf die geachtet werden müssen:

• Wenn die Funktionalit?t durch Komponentenprops oder berechnete Eigenschaften implementiert werden kann, wird das Komponentenszenario bevorzugt.
• Missbrauche Anweisungen nicht, um den internen Zustand der Komponente zu ?ndern, da dies leicht zu Wartungsschwierigkeiten führen kann.
• Vermeiden Sie es, zu viele Nebenwirkungen in die Anweisungen einzuführen.

Grunds?tzlich ist das. Benutzerdefinierte Anweisungen sind ein nützlicher Erweiterungspunkt von VUE. Verwenden Sie es vernünftigerweise k?nnen Sie Ihren Code klarer machen und die Wiederverwendbarkeit verbessern. Aber denken Sie daran, es einfach zu halten und es nicht zu kompliziert zu lassen.

Das obige ist der detaillierte Inhalt vonVue.js benutzerdefinierte Richtlinien für DOM Manipulation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!