Anpassade direktiv låter dig utöka funktionaliteten på dina Vue-webbsidor på ett skalbart och modulärt sätt.
Direktiv är programmeringskonstruktioner som specificerar hur tolkar och kompilatorer ska behandla indata för en operation. Vue-direktiv utökar funktionaliteten för HTML-element i Vue-mallar, vilket möjliggör direkt manipulation av DOM.
Du kan använda direktiv i Vue för att bland annat lägga till händelseavlyssnare. Du kommer att bifoga extra attribut till HTML-element för att använda direktiv i din app.
Vue-direktivens struktur
Direktiv i Vue har en v- prefix för att skilja dem från vanliga HTML-attribut. De v- prefixet talar om för Vue-kompilatorn att attributet är ett Vue-direktiv så att det kan bearbeta och tillämpa beteendet för det direktivet på HTML-elementet.
Här är ett exempel som visar användningen av v-show attribut för att visa innehållet i en h2 element:
"Sann">Hej Vue</h2>
Vue.js har många fler inbyggda direktiv som v-binda, v-if, och v-på, så att du kan utföra uppgifter som databindning, villkorlig återgivning, händelsehantering, och mer.
Definiera anpassade direktiv i Vue
Du kan definiera anpassade direktiv för att lägga till ny, återanvändbar funktionalitet för dina Vue.js-appar. Att skapa anpassade direktiv kräver två stora steg. Först ska du registrera direktivet lokalt eller globalt. Sedan kommer du att definiera direktivets beteende med livscykelkrokar.
Registrering av anpassade direktiv
Du kan registrera ett anpassat direktiv i Vue lokalt eller globalt, beroende på dess avsedda omfattning. Det är dock en vanligare praxis att registrera direktiv globalt. Detta säkerställer att direktiv är tillgängliga överallt i din Vue-applikation.
Du kan registrera anpassade direktiv lokalt om du tänker använda det anpassade direktivet i en enkel Vue-komponent. Så här registrerar du en v-byte färg direktiv lokalt:
