Créer votre premier composant Vue.js

Vue.js est un framework basé sur des composants, ce qui signifie que les applications sont créées à l'aide de composants réutilisables. Chaque composant encapsule son propre HTML, CSS et JavaScript. Cet article vous guidera tout au long du processus de création de votre premier composant Vue.js à partir de zéro.

Créer un nouveau composant Vue

Les composants Vue.js sont généralement stockés dans des fichiers .vue. Chaque fichier de composant se compose de trois sections principales: '<template>', '<script>' et '<style>'. Créons un composant simple appelé Greeting.vue.

1. Accédez à votre dossier de projet: Utilisez le terminal pour accéder au répertoire de votre projet Vue:

cd my-vue-project

2. Créer un nouveau fichier de composant: Dans le répertoire src/components, créez un nouveau fichier nommé 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>

Ce composant Greeting.vue contient:

• <template>: Définit la structure HTML du composant.
• <script>: Contient la logique JavaScript du composant, comme les propriétés de données et les méthodes.
• <style>: Contient les styles CSS limités à ce composant. L'attribut scoped garantit que les styles s'appliquent uniquement à ce composant.

Utilisation de votre composant

Après avoir créé le composant, vous devez l'utiliser dans votre application Vue. Ouvrez le fichier src/App.vue et modifiez-le pour inclure le composant 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>

Dans ce fichier App.vue mis à jour:

• Importez le composant: Utilisez import Greeting from './components/Greeting.vue'; pour importer le composant Greeting.
• Enregistrez le composant: Ajoutez Greeting à l'objet components dans le bloc export default.
• Utilisez le composant: Insérez la balise '<Greeting />' dans la section '<template>' pour utiliser le composant dans votre application.

Tester votre composant

Enregistrez vos modifications et assurez-vous que votre serveur de développement est en cours d'exécution. Ouvrez votre navigateur et accédez à http://localhost:8080. Vous devriez voir le contenu du composant Greeting affiché sur la page.

Conclusion

Vous avez créé et utilisé avec succès votre premier composant Vue.js. Les composants sont les éléments de base des applications Vue.js, vous permettant d'encapsuler et de gérer différentes parties de votre interface utilisateur. À mesure que vous vous familiariserez avec Vue.js, vous pourrez explorer des fonctionnalités avancées telles que les accessoires de composants, les événements et les hooks de cycle de vie pour créer des applications plus interactives et plus complexes.

Continuez à expérimenter avec les composants Vue.js et développez vos connaissances pour créer des applications Web dynamiques et attrayantes.