Uw eerste Vue.js-component bouwen

Vue.js is een component-based framework, wat betekent dat applicaties worden gebouwd met behulp van herbruikbare componenten. Elk component encapsuleert zijn eigen HTML, CSS en JavaScript. Dit artikel begeleidt u door het proces van het bouwen van uw eerste Vue.js component vanaf nul.

Een nieuw Vue-component maken

Vue.js-componenten worden doorgaans opgeslagen in .vue-bestanden. Elk componentbestand bestaat uit drie hoofdsecties: '<template>', '<script>' en '<style>'. Laten we een eenvoudig component maken met de naam Greeting.vue.

1. Navigeer naar uw projectmap: Gebruik de terminal om naar uw Vue-projectmap te gaan:

cd my-vue-project

2. Maak een nieuw componentbestand: Maak in de map src/components een nieuw bestand met de naam 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>

Dit Greeting.vue-component bevat:

• <template>: Definieert de HTML-structuur van het onderdeel.
• <script>: Bevat de JavaScript-logica voor het onderdeel, zoals gegevenseigenschappen en methoden.
• <style>: Bevat de CSS-stijlen die zijn afgestemd op dit component. Het kenmerk scoped zorgt ervoor dat de stijlen alleen van toepassing zijn op dit component.

Uw component gebruiken

Nadat u het component hebt gemaakt, moet u het gebruiken in uw Vue-applicatie. Open het bestand src/App.vue en wijzig het om het component Greeting op te nemen:

<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>

In dit bijgewerkte App.vue-bestand:

• Importeer het component: Gebruik import Greeting from './components/Greeting.vue'; om het component Greeting te importeren.
• Registreer het component: Voeg Greeting toe aan het components-object in het export default-blok.
• Gebruik het component: Voeg de tag '<Greeting />' in de sectie '<template>' in om het component in uw app te gebruiken.

Uw component testen

Sla uw wijzigingen op en zorg ervoor dat uw ontwikkelserver draait. Open uw browser en ga naar http://localhost:8080. U zou de inhoud van het Greeting-component op de pagina moeten zien.

Conclusie

U hebt met succes uw eerste Vue.js-component gemaakt en gebruikt. Componenten zijn de bouwstenen van Vue.js-applicaties, waarmee u verschillende onderdelen van uw gebruikersinterface kunt inkapselen en beheren. Naarmate u meer vertrouwd raakt met Vue.js, kunt u geavanceerde functies verkennen, zoals componentprops, events en lifecycle hooks, om interactievere en complexere applicaties te bouwen.

Blijf experimenteren met Vue.js-componenten en breid uw kennis uit om dynamische en aantrekkelijke webapplicaties te creëren.