El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Els components són una de les característiques més potents i fonamentals de Vue.js. Permeten dividir la interfície d'usuari en peces reutilitzables i independents, facilitant la gestió i el manteniment del codi. En aquesta secció, aprendrem què són els components, com crear-los i com utilitzar-los en les nostres aplicacions Vue.js.

Què és un component?

Un component en Vue.js és essencialment una instància de Vue amb opcions predefinides. Cada component té el seu propi cicle de vida, estat i mètodes, i pot ser reutilitzat en diferents parts de l'aplicació.

Beneficis dels components:

Reutilització: Els components poden ser utilitzats en múltiples llocs de l'aplicació.
Mantenibilitat: Dividir l'aplicació en components més petits fa que el codi sigui més fàcil de mantenir.
Organització: Facilita l'organització del codi en mòduls lògics.

Creant un component bàsic

Exemple de component

A continuació, crearem un component bàsic anomenat HelloWorld que mostrarà un missatge de benvinguda.

Definició del component:

// HelloWorld.vue
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hola, benvingut a Vue.js!'
    };
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

Utilització del component:

Per utilitzar el component HelloWorld en una altra part de l'aplicació, primer hem d'importar-lo i després registrar-lo en la instància de Vue o en un altre component.

// App.vue
<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

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

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

Explicació del codi

Template: Defineix l'estructura HTML del component.
Script: Conté la lògica del component, incloent-hi el nom, les dades i els mètodes.
Style: Defineix els estils específics del component. L'atribut scoped assegura que els estils només s'apliquin a aquest component.

Exercici pràctic

Objectiu

Crear un component anomenat UserCard que mostri informació d'un usuari, com ara el nom i l'edat.

Passos

Definir el component UserCard:

// UserCard.vue
<template>
  <div class="user-card">
    <h2>{{ name }}</h2>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserCard',
  data() {
    return {
      name: 'John Doe',
      age: 30
    };
  }
};
</script>

<style scoped>
.user-card {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
</style>

Utilitzar el component UserCard en App.vue:

// App.vue
<template>
  <div id="app">
    <UserCard />
  </div>
</template>

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

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

Solució

El codi anterior defineix un component UserCard que mostra el nom i l'edat d'un usuari. Aquest component es pot reutilitzar en qualsevol part de l'aplicació.

Resum

En aquesta secció, hem après què són els components en Vue.js, com crear-los i com utilitzar-los en les nostres aplicacions. Els components ens permeten dividir la nostra aplicació en parts més petites i manejables, facilitant la reutilització i el manteniment del codi. En les properes seccions, explorarem conceptes més avançats relacionats amb els components, com ara les props, els esdeveniments personalitzats i els slots.

Introducció als components

Què és un component?

Beneficis dels components:

Creant un component bàsic

Exemple de component

Explicació del codi

Exercici pràctic

Objectiu

Passos

Solució

Resum

Curs de Vue.js

Mòdul 1: Introducció a Vue.js

Mòdul 2: Conceptes bàsics de Vue.js

Mòdul 3: Components de Vue.js

Mòdul 4: Vue Router

Mòdul 5: Gestió d'estat amb Vuex

Mòdul 6: Directives de Vue.js

Mòdul 7: Plugins de Vue.js

Mòdul 8: Proves en Vue.js

Mòdul 9: Conceptes avançats de Vue.js

Mòdul 10: Construcció i desplegament d'aplicacions Vue.js

Mòdul 11: Projectes de Vue.js del món real