Zusammenfassung der Entwicklung benutzerdefinierter Vue 3-Richtlinien

Was ist eine Richtlinie?

Sowohl Angular als auch Vue haben das Konzept der Direktive, das wir normalerweise als „Anweisungen“ übersetzen.

In der Computertechnologie ist ein Befehl eine einzelne CPU-Operation, die durch eine Befehlssatzarchitektur definiert ist. Im weiteren Sinne können „Anweisungen“ jede beliebige Darstellung eines Elements eines ausführbaren Programms sein, beispielsweise Bytecode.

Was genau ist also eine „Direktive“ im Front-End-Framework Vue und was ist ihre Funktion?

Bei der Vue-Entwicklung verwenden wir in Vorlagen häufig Schlüsselwörter, die mit v- beginnen, wie z. B. v-model und v-show. Diese Schlüsselwörter sind integrierte Anweisungen des Vue-Frameworks. Durch die Verwendung von v-model können Sie die Bindung von DOM und Daten erreichen; durch die Verwendung von v-show können Sie die Anzeige von DOM-Elementen steuern. Kurz gesagt, durch die Verwendung der Tags in diesen Vorlagen kann das Framework die angegebene Verarbeitung an DOM-Elementen durchführen und nach DOM-Änderungen gleichzeitig die angegebenen Daten aktualisieren. Anweisungen sind eine der Grundlagen von Vue MVVM.

Anwendungsszenarien für Anweisungen

Neben der Verwendung integrierter Anweisungen unterstützt Vue auch benutzerdefinierte Anweisungen. Die folgenden Szenarien können durch benutzerdefinierte Anweisungen implementiert werden:

Grundlegende DOM-Operationen. Wenn einige Verarbeitungsvorgänge in einer Komponente nicht mit vorhandenen Anweisungen implementiert werden können, können Sie benutzerdefinierte Anweisungen zur Implementierung verwenden. Beispielsweise Komponentenwasserzeichen und automatischer Fokus. Im Vergleich zur Verwendung von Ref zum Abrufen von DOM-Operationen entspricht die Kapselung von Anweisungen eher der MVVM-Architektur und M und V interagieren nicht direkt.

<p v-highlight="'yellow'">Diesen Text hellgelb hervorheben</p>

Gemeinsame Operationen, die für mehrere Komponenten verfügbar sind, können durch die Verwendung von Komponenten gut wiederverwendet werden. Ebenso können Funktionen für Komponenten wiederverwendet werden. Zum Beispiel Rechtschreibprüfung und verzögertes Laden von Bildern. Wenn Sie Komponenten verwenden, müssen Sie der Eingabekomponente, die eine Rechtschreibprüfung benötigt, nur ein Label hinzufügen und können die Rechtschreibprüfungsfunktion in die Komponente einfügen. Es ist nicht erforderlich, neue Rechtschreibunterstützungsfunktionen für verschiedene Komponenten zu kapseln.

So passen Sie Anweisungen in Vue 3 an

Vue unterstützt die globale und lokale Registrierung von Anweisungen.

Die globale Registrierung wird über die Direktive-Methode der App-Instanz registriert.

let app = erstelleApp(App)
app.direktive('hervorheben', {
vorMount(el, Bindung, vnode) {
el.style.background = Bindung.Wert
}
})

Die lokale Registrierung erfolgt durch Festlegen des Direktive-Attributs für die Komponente.

exportiere StandarddefiniereKomponente({
Name: "WebDesigner",
Komponenten:
Designer,
},
Anweisungen: {
Highlight:
vorMount(el, Bindung, vnode) {
el.style.background = Bindung.Wert;
},
},
},
});

Die registrierte Komponente enthält den Namen der Komponente, der eindeutig sein muss, und ein Implementierungsobjekt der Komponente. Nach der Registrierung kann es für jedes Element verwendet werden.

<p v-highlight="'yellow'">Diesen Text hellgelb hervorheben</p>

Eine benutzerdefinierte Komponente implementiert die von Vue bereitgestellte Hook-Funktion. In Vue 3 ähnelt der Lebenszyklus der Hook-Funktion dem Lebenszyklus der Komponente:

• erstellt – wird aufgerufen, nachdem das Element erstellt wurde, aber bevor seine Attribute und Ereignisse wirksam werden.
• beforeMount – wird nur einmal aufgerufen, wenn die Direktive zum ersten Mal an ein Element angehängt wird.
• gemountet – wird aufgerufen, wenn das Element in ein übergeordnetes Element eingefügt wird.
• beforeUpdate: wird aufgerufen, bevor das Element sich selbst aktualisiert
• Aktualisiert – wird aufgerufen, nachdem ein Element oder seine untergeordneten Elemente aktualisiert wurden.
• beforeUnmount: wird aufgerufen, bevor das Element ausgehängt wird.
• unmountet - wird aufgerufen, wenn der Befehl ausgehängt wird; wird nur einmal aufgerufen
  

Jede Hook-Funktion hat die folgenden Parameter:

• el: Das Element, an das die Anweisung gebunden ist, mit dem das DOM direkt manipuliert werden kann
• Bindung: Datenobjekt, einschließlich der folgenden Attribute

Instanz: Die Instanz der aktuellen Komponente. Es wird im Allgemeinen empfohlen, dass die Anweisung unabhängig von der Komponente ist. Wenn Sie den Komponentenkontext ViewModel verwenden müssen, können Sie ihn hier abrufen
value: der Wert der Anweisung, also "yellow" im obigen Beispiel
oldValue: Der vorherige Wert der Anweisung. In beforeUpdate und Updated kann er mit value identisch sein.
arg: Das an die Anweisung übergebene Argument, z. B. „Klick“ in v-on:click.
Modifikatoren: Ein Objekt, das Modifikatoren enthält. Beispielsweise kann v-on.stop:click ein Objekt von {stop:true} abrufen.

• vnode: virtueller Knoten, der durch Vue-Kompilierung generiert wurde,
• prevVNode: Der vorherige virtuelle Knoten während des Updates
  

Vue 2-Richtlinien-Upgrade

Die Direktive stellt einen Breaking Change in Vue3 dar und der Name und die Nummer der Hook-Funktionen der Direktive haben sich geändert. Vue3 erstellt mehr Funktionen für Anweisungen. Die Funktionsnamen entsprechen dem Komponentenlebenszyklus, was leichter zu verstehen ist.

Die Änderungen sind wie folgt

Eine weitere Änderung betrifft die Art und Weise, wie das Komponentenkontextobjekt abgerufen wird. Im Allgemeinen wird empfohlen, dass Anweisungen und Komponenteninstanzen unabhängig voneinander sind. Wenn Sie innerhalb einer benutzerdefinierten Anweisung auf eine Komponenteninstanz zugreifen, kann dies bedeuten, dass die Anweisung nicht gekapselt werden muss und die Anweisung die Funktion der Komponente selbst ist. Es kann jedoch Szenarien geben, in denen Sie eine Komponenteninstanz benötigen.

Abrufen über den Vnode-Parameter in Vue 2

binden(el, Bindung, vnode) {
  const vm = vnode.context
}

Erhalten Sie es durch Bindungsparameter in Vue 3

montiert(el, Bindung, vnode) {
  const vm = Bindung.Instanz
}

Beispiel für eine benutzerdefinierte Vue 3-Anweisung – Eingabe-Rechtschreibprüfung

Hier verwenden wir ein Plugin, um Anweisungen einzufügen.

Erstellen Sie eine neue SpellCheckPlugin.ts, deklarieren Sie das Plugin und fügen Sie Anweisungen in die Installationsmethode des Plugins ein.

importiere { App } von 'vue'

 Funktion SpellCheckMain(App: App, Optionen: beliebig) {
//
}

 Standard exportieren {
    installieren:SpellCheckMain
}

Die Methode SpellCheckMain implementiert die Komponente und die Rechtschreibprüfungsmethode. Die spezifischen Rechtschreibprüfungsregeln können je nach Unternehmen oder mithilfe anderer Plug-In-Methoden implementiert werden.

Funktion SpellCheckMain(App: App, Optionen: beliebig) {
    const SpellCheckAttribute = "Rechtschreibprüfung-el";

     let SpellCheckTimer: Map<Zeichenfolge, Zahl> = neue Map();
    lass checkerId = 0;
    Funktion checkElement(el: HTMLElement) {
        let attr = el.getAttribute(Rechtschreibprüfattribut);
        wenn (attr) {
            : ClearTimeout(SpellCheckTimer.get(attr));
            let timer = setTimeout(() => { checkElementAsync(el) }, 500);
            SpellCheckTimer.set(attr, timer)
        }
    }
    Funktion checkText(Wörter?: Zeichenfolge | null): [Zeichenfolge?] {
        wenn (!Wörter) {
            zurückkehren [];
        }
        let errorWordList: [Zeichenfolge?] = [];
        versuchen {
            let wordsList = words.match(/[a-zA-Z]+/ig);
            WörterListe?.forEach((Wort) => {
                wenn (!checkWord(Wort)) {
                    errorWordList.push(Wort);
                }
            })
        }
        fangen {

         }
        Fehlerwortliste zurückgeben;
    }
    Funktion checkWord(Text: Zeichenfolge) {
        //Rechtschreibprüfung simulieren, hier andere Prüfbibliotheken verwenden return text.length > 6 ? false : true;
    }
    Funktion checkElementAsync(el: HTMLElement) {

         let text = (el als HTMLInputElement).Wert || el.innerText;
        let ergebnis = checkText(text);

         let attr = el.getAttribute(Rechtschreibprüfattribut);
        wenn (!attr) {
            zurückkehren;
        }

         if (Ergebnis && Ergebnis.Länge) {
            el.style.background = "rosa"
            div = document.getElementById(attr);
            wenn (!div) {
                div = Dokument.createElement("div");
                div.id = attr;
                div.style.position = "absolut"
                div.style.top = "0px"
                div.style.left = el.clientWidth + "px"

                 wenn (el.übergeordnetesElement) {
                    el.parentElement.style.position = "relativ"
                    wenn (el.parentElement.lastChild === el) {
                        el.parentElement.appendChild(div);
                    }
                    anders {
                        el.parentElement.insertBefore(div, el.nextSibling);
                    }
                }
            }
            div.innerHTML = result.length.toString() + " - " + result.join(",");
        } anders {
            el.style.background = "";

             div = document.getElementById(attr);
            wenn (div) {
                div.innerHTML = ""
            }
        }

         console.log(Ergebnis)
    }

     app.direktive('Rechtschreibprüfung', {
        erstellt() {
            console.log("erstellt", Argumente)
        },
        gemountet: Funktion (el, Bindung, vnode, alter Vnode) {

             console.log("gemountet", Argumente)
            //Checker-ID für übergeordnetes Element festlegen
            let attr = "Rechtschreibprüfung-" + (checkerId++);
            el.setAttribute(Rechtschreibprüfattribut, attr);
            konsole.log("attr", attr)

             wenn (el.tagName.toUpperCase() === "DIV") {
                el.addEventListener("unschärfe", Funktion () {
                    checkElement(el)
                }, FALSCH);
            }
            wenn (el.tagName.toUpperCase() === "EINGABE") {
                el.addEventListener("keyup", Funktion () {
                    checkElement(el)
                }, FALSCH);
            }
            // el.addEventListener("Fokus", Funktion () {
            // Prüfelement(el)
            // }, FALSCH);
        },
        aktualisiert: Funktion (el) {
            console.log("Komponente aktualisiert", Argumente)
            Prüfelement(el);
        },
        nicht gemountet: Funktion (el) {
            console.log("nicht gemountet", Argumente)

             let attr = el.getAttribute(Rechtschreibprüfattribut);
            wenn (attr) {
                let div = document.getElementById(attr);
                wenn (div) {
                    div.entfernen();
                }
            }
        }
    })
}

Verwenden von Plugins in main.ts

/// <Referenzpfad="./vue-app.d.ts" />
importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
Router aus „./router“ importieren
importiere SpellCheckPlugin aus './plugins/SpellCheckPlugin'

 let app = erstelleApp(App)
app.use(Rechtschreibprüfungs-Plugin)
app.use(router).mount('#app')

Verwenden Sie die Direktive einfach direkt in der Komponente

<Vorlage>
  <div ref="ssHost" style="Breite: 100%; Höhe: 600px"></div>
  <div><div ref="fbHost" Rechtschreibprüfung v-spell-check="true" contenteditable="true" Rechtschreibprüfung="false" Stil="border: 1px solid #808080;width:600px;"></div></div>
  <div><input v-model="Wert1" v-spell-check spellcheck="false" style="width:200px;" /></div>
</Vorlage>

In Kombination mit der Verwendung von SpreadJS, basierend auf der Funktion zur Überprüfung der Rechtschreibeingaben des Benutzers, ist der Effekt wie folgt:

Oben finden Sie eine detaillierte Zusammenfassung der Entwicklung benutzerdefinierter Anweisungen für Vue 3. Weitere Informationen zur Entwicklung benutzerdefinierter Anweisungen für Vue 3 finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!