Opbygning af din første Vue.js-komponent

Vue.js er en komponent-baseret ramme, hvilket betyder, at applikationer er bygget ved hjælp af genanvendelige komponenter. Hver komponent indkapsler sin egen HTML, CSS og JavaScript. Denne artikel vil guide dig gennem processen med at bygge din første Vue.js-komponent fra bunden.

Oprettelse af en ny Vue-komponent

Vue.js-komponenter gemmes typisk i .vue-filer. Hver komponentfil består af tre hovedsektioner: '<template>', '<script>' og '<style>'. Lad os lave en simpel komponent kaldet Greeting.vue.

1. Naviger til din projektmappe: Brug terminalen til at flytte ind i din Vue-projektmappe:

cd my-vue-project

2. Opret en ny komponentfil: I mappen src/components skal du oprette en ny fil med navnet Greeting.vue.

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
    <p>Welcome to your first Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Denne Greeting.vue-komponent indeholder:

• <template>: Definerer HTML-strukturen for komponenten.
• <script>: Indeholder JavaScript-logikken for komponenten, såsom dataegenskaber og metoder.
• <style>: Indeholder CSS-stilene, der er omfattet af denne komponent. scoped-attributten sikrer, at stilene kun gælder for denne komponent.

Brug af din komponent

Når du har oprettet komponenten, skal du bruge den i din Vue-applikation. Åbn filen src/App.vue, og rediger den til at inkludere Greeting-komponenten:

<template>
  <div id="app">
    <Greeting />
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  name: 'App',
  components: {
    Greeting
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

I denne opdaterede App.vue fil:

• Importer komponenten: Brug importhilsen fra './components/Greeting.vue'; til at importere Greeting-komponenten.
• Registrer komponenten: Tilføj Greeting til components-objektet i export default-blokken.
• Brug komponenten: Indsæt '<Greeting />'-tagget i '<template>'-sektionen for at bruge komponenten i din app.

Test af din komponent

Gem dine ændringer og sørg for, at din udviklingsserver kører. Åbn din browser og naviger til http://localhost:8080. Du bør se indholdet af Greeting-komponenten gengivet på siden.

Konklusion

Du har med succes oprettet og brugt din første Vue.js-komponent. Komponenter er byggestenene i Vue.js-applikationer, så du kan indkapsle og administrere forskellige dele af din brugergrænseflade. Efterhånden som du bliver mere fortrolig med Vue.js, kan du udforske avancerede funktioner såsom komponentrekvisitter, begivenheder og livscyklushooks for at bygge mere interaktive og komplekse applikationer.

Bliv ved med at eksperimentere med Vue.js-komponenter og udvid din viden for at skabe dynamiske og engagerende webapplikationer.