Sales•٢٥ يوليو ٢٠٢٢•2 min read•349 words

Wat is een Vue.JS Custom Directive (Direktief) en Hoe Maak je deze Aan

Emir Eskici

PlusClouds Author

Cloud & SaaS

Vue.JS Aangepaste Richtlijn Wat Is Het En Hoe Te Creëren

Wat is een Vue.js Custom Directive en hoe maak je het aan?

Directives zijn codefragmenten die ervoor zorgen dat geselecteerde componenten of elementen zich gedragen op basis van hun definitie, volgens de schrijfrule v-directiveName (syntax). Er zijn verschillende ingebouwde directives binnen Vue.js. Dankzij deze vooraf gedefinieerde krachtige directives kunnen we verschillende processen veel praktischer uitvoeren. Stel dat deze directives niet aan onze behoeften voldoen, wat doen we dan? Vue.js Custom Directive biedt hiervoor ook een praktische oplossing.

Als de door Vue.js aangeboden directives onvoldoende of niet naar wens zijn, biedt Vue.js de mogelijkheid om onze eigen directives te creëren. Deze gepersonaliseerde Vue.js directives worden custom directives genoemd. Laten we samen onderzoeken hoe je een custom directive in Vue.js kunt aanmaken.

Wanneer we een custom directive maken, moeten we deze global definiëren, zodat we deze overal kunnen aanroepen en gebruiken. De definitie ziet er als volgt uit:

Beschrijving

Voor de werking van de directive zijn 5 verschillende methoden nodig, deze worden
Directive Hooks genoemd. Directive Hooks zijn methoden die worden geactiveerd in de levenscyclus van de directive en de meest gebruikte is de bind methode (el, binding) zoals te zien in het bovenstaande voorbeeld, en deze bevat enkele parameters, laten we nu eens kijken naar de parameters die deze methode ontvangt.

el: Met deze parameter kunnen we het element bereiken waarop de directive wordt toegepast (interferentie met de DOM).
binding: Dit is de parameter die bijhoudt welke argumenten de gedefinieerde directive ontvangt en wat voor soort gegevens er worden verzonden. (eigenschappen)

Hoe kunnen we gegevens naar de door ons gemaakte directive sturen?

We kunnen gegevens naar de directive die we in main.js hebben gedefinieerd sturen binnen ons app.vue bestand, want we willen tenslotte geen directive met slechts één enkele waarde blijven gebruiken. Maar hoe gaan we dit doen?

Beschrijving

Hoe gaan we het gebruiken?

Het antwoord is heel eenvoudig. Er is geen verschil met de normaal gebruikte directives. Je kunt het hieronder bekijken...

Beschrijving

Conclusie

Beschrijving

Bedankt voor het lezen, tot de volgende blog met nieuwe informatie.

Volgende week delen we een mooie applicatie. Blijf op de hoogte!

Frequently Asked Questions

Wat is een Vue.js custom directive en waarom zou je er een maken?

Een custom directive is een door jezelf gemaakte directive in Vue.js die gedrag toevoegt aan geselecteerde elementen. Je maakt ze wanneer de ingebouwde directives niet voldoen aan jouw wensen. De definitie van zo'n directive moet global zijn zodat je hem overal in de app kunt aanroepen en gebruiken.

Welke onderdelen heeft een custom directive in Vue.js en wat is het bind hook?

Een custom directive bestaat uit meerdere directive hooks die geactiveerd worden in de levenscyclus van de directive. De vijf mogelijke hook-methoden zorgen voor verschillende fases van het gedrag, en de bind hook is de meest gebruikte. De bind hook ontvangt de parameters el en binding, waarbij el het doel-element is en binding bijhoudt welke argumenten en gegevens er verzonden worden.

Hoe kun je gegevens naar de directive sturen die je hebt gemaakt?

Je kunt gegevens sturen naar de directive die je in main.js hebt gedefinieerd vanuit app.vue. Hiermee kun je voorkomen dat de directive beperkt blijft tot slechts één enkele waarde. Zo kun je de functionaliteit van de directive flexibel maken.

Hoe gebruik je een custom directive in Vue.js en is het anders dan built-in directives?

Het gebruik van een custom directive werkt op dezelfde manier als het gebruik van gewone directives; er is geen verschil. Je kunt de werking van de directive op dezelfde manier toepassen als bij de normaal gebruikte directives.

Waarom zou je kiezen voor een custom directive als de ingebouwde directives niet voldoen?

Vue.js biedt hiermee een praktische oplossing door aangepaste directives mogelijk te maken. Als de ingebouwde directives onvoldoende of niet naar wens zijn, kun je je eigen directive creëren.

Wat betekenen el en binding in de bind hook van een directive?

El geeft het element aan waarop de directive wordt toegepast. Binding is de parameter die bijhoudt welke argumenten de gedefinieerde directive ontvangt en wat voor soort gegevens er worden verzonden.

Hoe definieer je een custom directive globaal zodat je deze overal kunt gebruiken?

Wanneer we een custom directive maken, moeten we deze global definiëren, zodat we deze overal kunnen aanroepen en gebruiken.