Brugerdefinerede direktiver giver dig mulighed for at udvide funktionaliteten af dine Vue-websider på en skalerbar og modulær måde.
Direktiver er programmeringskonstruktioner, der specificerer, hvordan tolke og compilere skal behandle input til en operation. Vue-direktiver udvider funktionaliteten af HTML-elementer i Vue-skabeloner, hvilket tillader direkte manipulation af DOM.
Du kan bruge direktiver i Vue til blandt andet at tilføje begivenhedslyttere. Du vil vedhæfte ekstra attributter til HTML-elementer for at bruge direktiver i din app.
Strukturen af Vue-direktiver
Direktiverne i Vue har en v- præfiks for at skelne dem fra almindelige HTML-attributter. Det v- præfikset fortæller Vue-kompileren, at attributten er et Vue-direktiv, så den kan behandle og anvende det pågældende direktivs adfærd på HTML-elementet.
Her er et eksempel, der viser brugen af v-show attribut for at vise indholdet af en h2 element:
"rigtigt">Hej Vue</h2>
Vue.js har mange flere indbyggede direktiver som v-bind
, v-if, og v-på, så du kan udføre opgaver som f.eks databinding, betinget gengivelse, begivenhedshåndtering, og mere.Definition af brugerdefinerede direktiver i Vue
Du kan definere brugerdefinerede direktiver for at tilføje ny, genbrugelig funktionalitet til dine Vue.js-apps. Oprettelse af brugerdefinerede direktiver kræver to store trin. Først skal du registrere direktivet lokalt eller globalt. Derefter vil du definere direktivets adfærd med livscykluskroge.
Registrering af brugerdefinerede direktiver
Du kan registrere et brugerdefineret direktiv i Vue lokalt eller globalt, afhængigt af dets tilsigtede omfang. Det er dog en mere almindelig praksis at registrere direktiver globalt. Dette sikrer, at direktiver er tilgængelige overalt i din Vue-applikation.
Du kan registrere brugerdefinerede direktiver lokalt, hvis du har til hensigt at bruge det brugerdefinerede direktiv i en simpel Vue-komponent. Sådan registrerer du en v-skift farve direktiv lokalt:
