Vue-filer (filer, der ender på .vue) er et Vue Component.
Et Vue Component kan indeholde 3 dele.
- En HTML-template (obligatorisk)
- Et script, hvor component-objektet eksporteres (optional)
- Et style-tag, der indeholder de styles, der er til HTML-template i samme component (optional)
I Vue via CDN kan man hurtigt lave et component i selve html-filen, hvor Vue er linket på. Men skal man lave større applikationer med mange components kan det blive uoverskueligt at have det hele i én fil. Her giver det mening at oprette components i filer for at holde styr på indholdet. Et component behøver ikke at være en hel sides layout, men kan i sig selv være et component til et andet component.
Hvis man ikke allerede har et Vue CLI-projekt man kan bruge i det følgende kan man følge guiden til at oprette et projekt i Vue CLI.
Kigger man i det oprettede projekt i src-mappen og åbner filen App.vue kan man se et eksempel på et component. App.vue er ert Vue-component, men er også det component, der bliver loaded som default i filen main.js. Men kigger man i component-filen Vue.app kan man se, at der bruges et andet component med navnet HelloWorld. HelloWorld er et Vue-component i sig selv som ligger i mappen components. Den hentes ind i App.vue med import i <script>-tagget.
Her er Vue-component App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Har man ikke startet en server, der afvikler Vue-projektet kan man gøre dette i en terminal med npm run serve.
Prøv i App.vue, i <template>-tagget at slette det indhold, der i forvejen er der og skriv i stedet <h1>Min første Vue App</h1>. Serveren vil automatisk genloade siden med det nye indhold.
I scriptet importeres HelloWorld component og selv det component, der arbejdes i, App, eksporteres. Da HelloWorld ikke længere bruges i denne template kan man fjerne import-linjen samt components-objektet fra scriptet, så scriptet kommer til at se sådan her ud:
<script>
export default {
name: 'App'
}
</script>Data-objektet
I et component kan man bruge et data-objekt ligesom i Vue via CDN. I Vue CLI sættes data-objektet ind i scriptet i et component. Man kan så udskrive data i html-template som også i Vue via CDN som vist her:
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
name: 'App',
data() {
return {
title: "Min første Vue App"
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
