Kaj Rietberg

Front-end Developer

Mijn beeld van het JavaScript framework Vue

Gepubliceerd op:

Een Vue instance is de root van de applicatie. Deze wordt gemaakt door een opties object er aan te koppelen. Hierdoor heeft de instance verschillende mogelijkheden om data te tonen en acties te ondergaan. Middels de el optie koppel je de instance aan een HTML element. De el krijgt het id of class van het HTML element.

Een van de opties van de instance is de data property. Dit is de data die je wilt tonen in je HTML. Dit kan data zijn die jezelf toevoegt in de data property of die je ophaalt vanuit een API. Middels een JavaScript expression kan je de data tonen in de HTML.

Aan de Vue instance kan je ook een methods property toevoegen waarin je JavaScript methods kan toevoegen die bijvoorbeeld op een v-on:click uitgevoerd wordt.

Daarnaast is er nog een computed property waarmee je bijvoorbeeld verschillende onderdelen kan samenvoegen tot 1 titel. Voordeel van computed properties is dat ze gecached worden.

Vue directives

  • v-bind plakt een attribute, zoals src, aan een expression. Zo kan je dit ook doen voor class, title, href, alt, etc. Bij src kan je gebruiken v-bind:src=. Dat kan je afkorten naar :src=.
  • v-if reageert er op of iets true is en anders wordt de v-else-if of uiteindelijk de v-else getoond.
  • v-show toont de data als het true is en anders komt er een display: none; op.
  • v-for toont data uit een array om er een lijst van te maken. Het is dan wel handig om een v-bind:key te doen zodat de applicatie weet om welke het gaat.
  • v-on:naarwathierstaat luistert naar wat achter de : staat. Bijvoorbeeld v-on:click.
  • Data kan je ook binden aan een class of een style attribute
  • v-model zorgt voor een 2-wegs data binding. Hierdoor kan data gekoppeld worden aan een template en andersom.

Components

Componenten bouw je om te hergebruiken. Zo maak je iets 1x en kan je het op meerdere plekken in je applicatie aanroepen. In een component is de data property een functie, hierdoor blijft de data binnen het component, het data object wordt ge-returned. Via props wordt data vanuit de parent naar het child (component) gebracht. De props worden benoemd in het component zodat deze weet wat die kan verwachten.

Vue project

Om een Vue project te starten kan je gebruik maken van de Vue CLI of de Vue UI tools. De laatste is een UI getoont via de webbrowser die je een project laat maken met daarbij de functionaliteiten die je graag wilt hebben. Deze kan in het Nederlands.

Naast het opstarten van een project met bovenstaande kan je ook Vue aanroepen in je HTML pagina en kan je werken met Vue.

Vue router

Vue router zorgt er voor dat je de juiste pagina kan bezoeken in een Vue web applicatie.

Links

Wil je reageren op dit bericht, hit me up on Twitter.

Webmentions