Vue.js is een progressief JavaScript-framework dat wordt gebruikt om gebruikersinterfaces te bouwen. In tegenstelling tot andere monolithische frameworks, is Vue ontworpen vanuit de grond opgebouwd om incrementeel adopteerbaar te zijn. De kernbibliotheek is gericht op de viewlaag alleen en is gemakkelijk te integreren met andere bibliotheken of bestaande projecten.
Het gebruik van Vue.js begint typisch met het omzetten van een deel van een webpagina in een herbruikbaar Vue-component. Dit component is een zelfstandige, onafhankelijke eenheid van een applicatie die kan bestaan uit zijn eigen state (data), methods, en zelfs zijn eigen verfijnde HTML en CSS.
Een eenvoudig Vue.js-component kan er bijvoorbeeld zo uitzien:
```
new Vue({
el: ‘#app’,
data: {
message: ‘Hallo Vue!‘
}
})
```
In bovenstaande code, vertelt de ‘el’-parameter aan Vue om de controle over het HTML-element met ID ‘app’ over te nemen. Vervolgens vertelt de ‘data’-parameter aan Vue welke data er binnen dit element beschikbaar moet zijn. Dit maakt het mogelijk om dynamische data in de HTML te gebruiken, zoals dit:
```
In bovenstaande HTML-code, wordt het ‘message’ data-item gebruikt binnen dubbele accolades. Dit is een eenvoudig template-systeem dat Vue biedt. Wanneer de bovenstaande HTML wordt weergegeven, vervangt Vue de dubbele accolades en alles daarbinnen met de werkelijke waarde van het ‘message’-data-item.
Zodra je bekend bent met Vue.js, kun je met behulp van Vue CLI, een krachtig command-line hulpmiddel, volledige single-page applicaties bouwen. Dit hulpmiddel helpt je bij het instellen van een robuuste ontwikkelomgeving met hot-reloading, linting, unit-testing en end-to-end testing.
