Phenquestions
Een raamwerk is bedoeld om dergelijke functies te bieden die het ontwikkelingsproces eenvoudiger en sneller maken voor de ontwikkelaars. Vue.js is zo'n feature-verrijkt JavaScript-framework dat veel ingebouwde functies en richtlijnen biedt om het ontwikkelingsproces snel te laten verlopen. Maar er moeten enkele scenario's komen waarin u functionaliteit nodig heeft die niet beschikbaar is door het framework, dus u moet uw eigen.
In dit bericht zullen we leren en kijken naar de ingebouwde richtlijnen van de Vue.js-framework, en we zullen ook leren om onze eigen op maat gemaakte Vue-richtlijn te maken en te gebruiken.
Richtlijn
Richtlijnen zijn attributen die u kunt koppelen aan de DOM-elementen, voorafgegaan door de clausule "v-", waardoor de bibliotheek weet dat het een speciaal type syntaxis is dat wordt gebruikt voor het uitvoeren van sommige taken. Richtlijnen worden meestal gebruikt voor directe manipulatie van DOM. Enkele van de meest gebruikte en bekende richtlijnen zijn "v-if", "v-for" en "v-show".
De richtlijnen worden gebruikt om effecten op DOM-elementen toe te passen, maar reactief. Laten we het begrijpen met een voorbeeld:
“v-if”-richtlijn
U kunt de tekst bekijken.
In de bovenstaande tag is de "v-if" een richtlijn die de alinea-tag " zal verwijderen of toevoegen
”, hangt af van de waarheid van de variabele "showText".
"v-show" richtlijn
Evenzo hebben we de "v-show" -richtlijn die dezelfde functionaliteit kan uitvoeren als hierboven beschreven:
U kunt de tekst bekijken.
Het subtiele verschil tussen "v-if" en "v-show" is dat "v-if" het element niet weergeeft tijdens het laden van de pagina als de afhankelijke variabele niet waar is en het laadt wanneer de variabele waar wordt. Daarentegen zal "v-show" het element weergeven op de laadtijd van de webpagina, maar het verbergen. Dus "v-if" is tijdbesparend bij de laadtijd van de pagina en tijdrovend wanneer de variabele waar wordt. Het moet het hele element weergeven terwijl "v-show" tijdbesparend is voor de waarheid van de variabele tijdrovend bij het laden van de webpagina.
Oke! Laten we eens kijken naar een richtlijn die het argument aanneemt.
"v-bind"-richtlijn
Een andere meest gebruikte richtlijn is "v-bind", die wordt gebruikt voor interactie en het bijwerken van de HTML-attributen. Als we bijvoorbeeld een variabele willen binden aan het "href" -attribuut van de tag, kunnen we het "href" -attribuut als volgt binden:
"v-on"-richtlijn
Net als de "v-bind" -richtlijn, biedt Vue een "v-on" -richtlijn voor het binden van de variabele voor het luisteren naar de gebeurtenissen die in de DOM worden afgevuurd. Als u bijvoorbeeld naar de gebeurtenis Click wilt luisteren en er een variabele aan wilt binden, ziet de syntaxis er als volgt uit:
In de aanhalingstekens kunnen we zowel de uitdrukking als functies leveren provide.
Conclusie
We hebben geleerd over de richtlijnen in Vue en zien hoe we de richtlijnen in Vue . kunnen gebruiken.js. We hebben enkele van de meest gebruikte en standaard ingebouwde richtlijnen van Vue . besproken.js, wat veel helpt en enorm veel tijd bespaart bij de ontwikkeling.
