Bygg din første Vue.js-komponent

Vue.js er et komponentbasert rammeverk, noe som betyr at applikasjoner bygges ved hjelp av gjenbrukbare komponenter. Hver komponent innkapsler sin egen HTML, CSS og JavaScript. Denne artikkelen vil guide deg gjennom prosessen med å bygge din første Vue.js-komponent fra bunnen av.

Opprette en ny Vue-komponent

Vue.js-komponenter er vanligvis lagret i .vue-filer. Hver komponentfil består av tre hovedseksjoner: '<template>', '<script>' og '<style>'. La oss lage en enkel komponent kalt Greeting.vue.

1. Naviger til prosjektmappen din: Bruk terminalen til å flytte inn i Vue-prosjektkatalogen din:

cd my-vue-project

2. Opprett en ny komponentfil: I katalogen src/components oppretter du 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-komponenten inneholder:

• <template>: Definerer HTML-strukturen til komponenten.
• <script>: Inneholder JavaScript-logikken for komponenten, for eksempel dataegenskaper og metoder.
• <style>: Inneholder CSS-stilene som er omfattet av denne komponenten. scoped-attributtet sikrer at stilene kun gjelder for denne komponenten.

Bruke komponenten din

Etter å ha opprettet komponenten, må du bruke den i Vue-applikasjonen din. Åpne src/App.vue-filen og endre den slik at den inkluderer 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 oppdaterte App.vue-filen:

• Importer komponenten: Bruk importer hilsen fra './components/Greeting.vue'; for å importere Greeting-komponenten.
• Registrer komponenten: Legg til Greeting til components-objektet i export default-blokken.
• Bruk komponenten: Sett inn '<Greeting />'-taggen i '<template>'-delen for å bruke komponenten i appen din.

Tester komponenten din

Lagre endringene og sørg for at utviklingsserveren din kjører. Åpne nettleseren din og naviger til http://localhost:8080. Du bør se innholdet i Greeting-komponenten gjengitt på siden.

Konklusjon

Du har opprettet og brukt din første Vue.js-komponent. Komponenter er byggesteinene i Vue.js-applikasjoner, som lar deg innkapsle og administrere ulike deler av brukergrensesnittet ditt. Etter hvert som du blir mer kjent med Vue.js, kan du utforske avanserte funksjoner som komponentrekvisitter, hendelser og livssykluskroker for å bygge mer interaktive og komplekse applikasjoner.

Fortsett å eksperimentere med Vue.js-komponenter og utvid kunnskapen din for å lage dynamiske og engasjerende nettapplikasjoner.