Egendefinerte direktiver lar deg utvide funksjonaliteten til Vue-nettsidene dine på en skalerbar og modulær måte.
Direktiv er programmeringskonstruksjoner som spesifiserer hvordan tolker og kompilatorer skal behandle inndata for en operasjon. Vue-direktiver utvider funksjonaliteten til HTML-elementer i Vue-maler, og tillater direkte manipulering av DOM.
Du kan bruke direktiver i Vue for å legge til hendelseslyttere, blant annet. Du vil legge til ekstra attributter til HTML-elementer for å bruke direktiver i appen din.
Strukturen til Vue-direktiver
Direktiv i Vue har en v- prefiks for å skille dem fra vanlige HTML-attributter. De v- prefikset forteller Vue-kompilatoren at attributtet er et Vue-direktiv, slik at det kan behandle og bruke oppførselen til det direktivet på HTML-elementet.
Her er et eksempel som viser bruken av v-show attributt for å vise innholdet i en h2 element:
"ekte">Hei Vue</h2>
Vue.js har mange flere innebygde direktiver som v-bind, v-if, og v-på, slik at du kan utføre oppgaver som databinding, betinget gjengivelse, hendelseshåndtering, og mer.
Definere egendefinerte direktiver i Vue
Du kan definere tilpassede direktiver for å legge til ny, gjenbrukbar funksjonalitet for Vue.js-appene dine. Å lage tilpassede direktiver krever to hovedtrinn. Først skal du registrere direktivet lokalt eller globalt. Deretter vil du definere direktivets oppførsel med livssykluskroker.
Registrering av egendefinerte direktiver
Du kan registrere et tilpasset direktiv i Vue lokalt eller globalt, avhengig av dets tiltenkte omfang. Det er imidlertid en mer vanlig praksis å registrere direktiver globalt. Dette sikrer at direktiver er tilgjengelige overalt i Vue-applikasjonen din.
Du kan registrere tilpassede direktiver lokalt hvis du har tenkt å bruke det tilpassede direktivet i en enkel Vue-komponent. Slik kan du registrere en v-skift farge direktiv lokalt:
