Details zu benutzerdefinierten Vue3-Anweisungen

1. Benutzerdefinierte Anweisungen registrieren

Bei den folgenden Beispielen handelt es sich um benutzerdefinierte Anweisungen zum Implementieren eines Eingabefelds, um automatisch den Fokus zu erhalten.

1.1. Globale benutzerdefinierte Anweisungen

In vue2 werden globale, benutzerdefinierte Anweisungen mithilfe von „ directive auf dem Vue-Objekt bereitgestellt, indem Vue.directive('name',opt) verwendet wird.

Beispiel 1 : Globale benutzerdefinierte Anweisungen für Vue2

Vue.direktive('Fokus',{

 eingefügt:(el)=>{

  el.fokus()

 }

})

inserted ist eine Hook-Funktion, die ausgeführt wird, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird.

In vue3 wird die Vue-Instanz über createApp erstellt, daher hat sich auch die Art und Weise der Bereitstellung globaler benutzerdefinierter Anweisungen geändert und directive wird in der App bereitgestellt.

Beispiel 2 : Globale benutzerdefinierte Anweisungen für Vue3

//Globale benutzerdefinierte Direktive app.directive('focus',{

 montiert(el){

  el.fokus()

 }

})

//Komponente verwendet <input type="text" v-focus />



 

1.2. Lokale benutzerdefinierte Anweisungen

In einer Komponente werden directives verwendet, um lokale benutzerdefinierte Anweisungen einzuführen. Die in Vue2 und Vue3 eingeführten benutzerdefinierten Anweisungen sind genau gleich.

Beispiel 3 : Lokale benutzerdefinierte Anweisungen

<Skript>

//Lokale benutzerdefinierte Anweisungen const defineDir = {

 Fokus:

  montiert(el){

   el.fokus()

  }

 }

}

Standard exportieren {

 Anweisungen:defineDir,

 aufstellen(){}

}

</Skript>

2. Lebenszyklus-Hook-Funktionen in benutzerdefinierten Anweisungen

Ein Direktivendefinitionsobjekt kann die folgenden Hook-Funktionen bereitstellen (alle optional und werden nach Bedarf eingeführt):

• created : Wird aufgerufen, bevor ein gebundenes Elementattribut oder ein Ereignislistener angewendet wird. Dies ist nützlich, wenn die Direktive Ereignis-Listener anhängen muss, die vor den normalen v-on-Ereignis-Listenern aufgerufen werden müssen.
• beforeMounted : Wird ausgeführt, wenn die Direktive zum ersten Mal an ein Element gebunden wird und bevor die übergeordnete Komponente gemountet wird.
• mounted : wird aufgerufen, nachdem die übergeordnete Komponente des gebundenen Elements gemountet wurde.
• beforeUpdate : Wird aufgerufen, bevor der VNode, der die Komponente enthält, aktualisiert wird.
• updated : Wird aufgerufen, nachdem der VNode der enthaltenen Komponente und die VNodes ihrer Unterkomponenten aktualisiert wurden.
• beforeUnmounted : Wird aufgerufen, bevor die übergeordnete Komponente des gebundenen Elements ausgehängt wird
• unmounted : Wird nur einmal aufgerufen, wenn die Direktive von einem Element gelöst und die übergeordnete Komponente ausgehängt wurde.

Beispiel 3 : Testen Sie die Ausführung von Lebenszyklusfunktionen innerhalb von Anweisungen

<Vorlage>

 <div>

  <Eingabetyp="Text" v-Fokus v-if="Anzeigen"><br>

  <button @click="changStatus">{{show?'Ausblenden':'Anzeigen'}}</button>

 </div>

</Vorlage>

 

//Lokale benutzerdefinierte Anweisungen const autoFocus = {

 Fokus:

  erstellt(){

   console.log('erstellt');

  },

  vorMount(){

   console.log('vorMount');

  },

  montiert(el){

   Konsole.log('gemountet');

  },

  vorAktualisiert(){

   console.log('vorAktualisiert')

  },

  aktualisiert(){

   console.log('aktualisiert');

  },

  vorUnmount(){

   console.log('vorUnmount');

  },

  unmontiert(){

   console.log('ausgehängt');

  }

 },

}

importiere { ref } von 'vue'

Standard exportieren {

 Anweisungen: Autofokus,

 aufstellen(){

  const zeigen = ref(true)

  zurückkehren {

   zeigen,

   Status ändern(){

    zeige.Wert = !zeige.Wert

   }

  }

 }

}

　

Durch Klicken auf die Schaltfläche stellen wir fest, dass beim Erstellen eines input die drei Hook-Funktionen „ created “, beforeMount und mounted ausgelöst werden.

Wenn input Eingabeelement ausgeblendet ist, werden beforeUnmount und unmounted ausgelöst.

beforeUpdate und updated wurden jedoch nicht ausgeführt.

Wenn wir an diesem Punkt v-if des input in v-show ändern, werden die beiden oben genannten Methoden ausgeführt. Sie können den jeweiligen Ausführungsstatus selbst überprüfen.

Von Vue2 zu Vue3 hat sich die Lebenszyklus-Hook-Funktion von benutzerdefinierten Anweisungen geändert. Die spezifischen Änderungen sind wie folgt:

• Die bind -Funktion wurde durch beforeMounted ersetzt.
• update wurde entfernt.
• componentUpdated wurde durch updated ersetzt.
• unbind wurde durch unmounted ersetzt.
• inserted wurde entfernt.

3. Parameter der benutzerdefinierten Anweisungs-Hook-Funktion

Der Hook-Funktion werden folgende Parameter übergeben:

• el : Das Element, an das die Anweisung gebunden ist, die DOM direkt manipulieren kann.
• binding : ist ein Objekt, das alle Informationen der Direktive enthält.

Die in der Bindung enthaltenen Eigenschaften sind:

• arg ist der Parametername der benutzerdefinierten Anweisung.
• Wert: value .
• Der vorherige Wert, an den oldValue gebunden war.
• dir Hook-Funktion ausgeführt
• modifiers : Ein Objekt, das Modifikatoren enthält.

<Vorlage>

 <div>

  <div v-fixed >Positionierung</div>

 </div>

</Vorlage>

 

<Skript>

//Benutzerdefinierte Anweisung dynamische Parameter const autoFocus = {

 behoben:

  vorMount(el,Bindung){

   Konsole.log('el',el)

   console.log('Bindung',Bindung)

  }

 }

}

Standard exportieren {

 Anweisungen: Autofokus,

 aufstellen(){

 }

}

</Skript>

4. Benutzerdefinierte Befehlsparameter

Benutzerdefinierte Anweisungen können auch Parameter haben, die dynamisch sein und basierend auf Komponenteninstanzdaten in Echtzeit aktualisiert werden können.

Beispiel 4 : Anpassen dynamischer Parameter von Anweisungen

<Vorlage>

 <div>

  <div v-fixed:pos="posData" style="width:100px;height:100px;background:grey">Positionierung</div>

 </div>

</Vorlage>

<Skript>

//Benutzerdefinierte Anweisung dynamische Parameter const autoFocus = {

 behoben:

  vorMount(el,Bindung){

   el.style.position = "fest"

   el.style.left = Bindung.Wert.left+'px'

   el.style.top = Bindung.Wert.top + 'px'

  }

 }

}

Standard exportieren {

 Anweisungen: Autofokus,

 aufstellen(){

  const posData = {

   links:20,

   oben:200

  }

  zurückkehren {

   posData,

  }

 }

}

</Skript>

Wann benötigen Sie benutzerdefinierte Anweisungen?

• Es ist erforderlich, Low-Level-Operationen an gewöhnlichen DOM-Elementen durchzuführen. Zu diesem Zeitpunkt werden benutzerdefinierte Anweisungen verwendet.
• Einige Funktionen müssen auf bestimmte DOM-Elemente angewendet werden. Wenn jedoch eine große Anzahl von DOM-Elementen bedient werden muss oder größere Änderungen vorgenommen werden müssen, empfiehlt es sich, Komponenten anstelle von Anweisungen zu verwenden.

Dies ist das Ende dieses Artikels über die Details der benutzerdefinierten Anweisungen für Vue3. Weitere relevante benutzerdefinierte Anweisungen für Vue3 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!