Bygg din första Vue.js-komponent

Vue.js är ett komponentbaserat ramverk, vilket innebär att applikationer byggs med hjälp av återanvändbara komponenter. Varje komponent kapslar in sin egen HTML, CSS och JavaScript. Den här artikeln guidar dig genom processen att bygga din första Vue.js-komponent från grunden.

Skapa en ny Vue-komponent

Vue.js-komponenter lagras vanligtvis i .vue-filer. Varje komponentfil består av tre huvudsektioner: '<template>', '<script>' och '<style>'. Låt oss skapa en enkel komponent som heter Greeting.vue.

1. Navigera till din projektmapp: Använd terminalen för att flytta in i din Vue-projektkatalog:

cd my-vue-project

2. Skapa en ny komponentfil: I katalogen src/components, skapa en ny fil med namnet 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>

Denna Greeting.vue-komponent innehåller:

• <template>: Definierar HTML-strukturen för komponenten.
• <script>: Innehåller JavaScript-logiken för komponenten, såsom dataegenskaper och metoder.
• <style>: Innehåller CSS-stilarna som omfattas av denna komponent. Attributet scoped säkerställer att stilarna endast gäller för den här komponenten.

Använda din komponent

När du har skapat komponenten måste du använda den i din Vue-applikation. Öppna filen src/App.vue och ändra den så att den inkluderar komponenten Greeting:

<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 denna uppdaterade App.vue-fil:

• Importera komponenten: Använd importhälsning från './components/Greeting.vue'; för att importera Hälsnings-komponenten.
• Registrera komponenten: Lägg till Greeting till components-objektet i export default-blocket.
• Använd komponenten: Infoga '<Greeting />'-taggen i avsnittet '<template>' för att använda komponenten i din app.

Testa din komponent

Spara dina ändringar och se till att din utvecklingsserver körs. Öppna din webbläsare och navigera till http://localhost:8080. Du bör se innehållet i Hälsnings-komponenten renderat på sidan.

Slutsats

Du har framgångsrikt skapat och använt din första Vue.js-komponent. Komponenter är byggstenarna i Vue.js-applikationer, vilket gör att du kan kapsla in och hantera olika delar av ditt användargränssnitt. När du blir mer bekant med Vue.js kan du utforska avancerade funktioner som komponentrekvisita, evenemang och livscykelhakar för att bygga mer interaktiva och komplexa applikationer.

Fortsätt att experimentera med Vue.js-komponenter och utöka din kunskap för att skapa dynamiska och engagerande webbapplikationer.