Her tages udgangspunkt i Vue 3. Der kan være dele af indlægget, der ikke kan bruges med Vue < 3
VueJS er et JavaScript framework. Det udtales “view” og er netop view-delen af et MVC-pattern.
VueJS bruges til
- SPA (single page applications) eller headless applications om man vil
- Det kan bruges til enkelte, små delelementer på et website
- Kan bruges til data-drevet websites, hvor VueJS er view-delen, der får data fra et API
I Vue laves små dele af en applikation i komponenter. Det kunne f.eks. være en “sign up”-formular, der laves i Vue og så kan indsættes de steder man skal bruge dem i en applikation.
I gang med VueJS
Vue bruges ofte med Vue CLI (command line interface) som en del af NodeJS, men kan også bruges direkte i kode med et link til biblioteket i <head>-tagget
<script src="https://unpkg.com/vue@3.0.2"></script>For at gøre koden mere overskuelig oprettes app.js, hvor Vue-kode skrives i og filen linkes ind i index.html. div#app er elementet, hvor Vue kan ændre i indholdet.
<!--index.html-->
<body>
<div id="app">
<p>{{ title }} - by {{ author }}</p>
<p>Book in series: {{ book_number }}</p>
</div>
<script src="app.js"></script>
</body>//app.js
const app = Vue.createApp({
data() {
return {
title: 'Game of Thrones',
author: 'George R. R. Margin',
book_number: 1
}
}
})
// app "mountes" i elementet med id'et app
app.mount('#app')- Introduktion til VueJS
- Vue – Events
- Vue – Methods
- Vue – Directives
- Vue – Attribute binding
- Vue – Computed properties
- Vue – refs
Læs mere om Vue
