Tutoriel de démarrage de VUE3 : Utilisation du plug-in Vue.js pour encapsuler le composant de chronologie

Vue.js est un framework JavaScript très populaire et largement utilisé dans le développement front-end. Avec le développement continu de Vue.js, de nouvelles versions de VUE3 ont également été lancées les unes après les autres. Cet article présentera un didacticiel d'introduction sur la façon d'utiliser le plug-in Vue.js pour encapsuler le composant de chronologie.

Tout d’abord, nous devons comprendre la structure de base du composant chronologique. Le composant chronologie peut être utilisé pour afficher des événements sur une période donnée, y compris l'heure et le contenu de l'événement. Généralement, la chronologie est organisée dans l'ordre dans lequel les événements se sont produits, permettant aux utilisateurs de comprendre de manière plus intuitive la relation entre les événements sur la chronologie. Ici, nous utiliserons Vue.js pour implémenter cette fonction.

Ensuite, nous devons installer Vue.js. Vous pouvez terminer l'installation en ligne de commande avec la commande suivante :

npm install vue

Une fois l'installation terminée, nous pouvons commencer à créer le composant timeline. Tout d’abord, nous devons créer un composant Vue.js. Dans ce composant, nous devons définir des données et des méthodes.

Dans le composant, nous devons définir un objet de données pour stocker les données du composant. Cet objet de données peut inclure de nombreux attributs, tels que l'heure, la description de l'événement, etc. Ici, nous définissons seulement cinq propriétés :

data() {
  return {
    events: [
      { time: "2022-01-01", event: "New Year's Day" },
      { time: "2022-02-12", event: "Chinese New Year" },
      { time: "2022-04-15", event: "Tax Day" },
      { time: "2022-05-09", event: "Mother's Day" },
      { time: "2022-06-20", event: "Father's Day" }
    ]
  }
}

Dans cet objet de données, nous utilisons un tableau d'événements pour stocker les événements. Chaque élément du tableau comprend deux attributs : l'heure et l'événement. L'attribut time indique l'heure à laquelle l'événement s'est produit et l'attribut event indique le contenu spécifique de l'événement.

Ensuite, nous devons définir une méthode pour restituer la structure HTML de la timeline dans le composant Vue.js. Dans cette méthode, nous parcourons le tableau d'événements et générons un élément HTML pour chaque événement. Ici, nous utilisons la syntaxe du modèle de Vue.js pour créer et mettre à jour les éléments DOM.

methods: {
  renderTimeline() {
    return this.events.map(event => {
      return `<div>
                <div class="time">${event.time}</div>
                <div class="event">${event.event}</div>
              </div>`
    }).join('')
  }
}

Dans cette méthode, nous utilisons la méthode map pour parcourir le tableau d'événements. Pour chaque élément du tableau, nous créons un élément div contenant l'heure et l'événement et les concaténons en une chaîne. Enfin, nous utilisons la méthode join pour concaténer toutes les chaînes en une chaîne HTML et la renvoyer.

Nous avons maintenant terminé la majeure partie de la construction du composant chronologie. Afin d'utiliser ce composant plus facilement, nous devons utiliser le plug-in Vue.js pour l'encapsuler. Voici la structure d'un plugin de timeline de base :

const TimelinePlugin = {
  install(Vue) {
    Vue.component('timeline', {
      data() {},
      methods: {},
      template: `<div class="timeline-container">{{renderTimeline()}}</div>`
    })
  }
}

Dans ce plugin, nous utilisons deux parties principales : les plugins et les composants. Un plug-in est un module fonctionnel qui peut être enregistré et installé dans une instance Vue.js. Ici, nous utilisons la méthode d'installation de Vue.js pour installer ce plug-in. Cette méthode doit recevoir Vue.js en paramètre et enregistrer notre composant en tant que composant global. Le composant

est le composant chronologique que nous avons défini. Ici, nous écrivons les données, les méthodes et le modèle que nous avons définis précédemment dans Vue.component et les enregistrons en tant que composant de chronologie. Enfin, nous l'intégrons dans un conteneur div avec la classe timeline-container.

Ensuite, nous devons importer ce plugin dans notre application Vue.js. Vous pouvez le faire comme ceci dans main.js :

import Vue from 'vue'
import TimelinePlugin from './timeline-plugin.js'

Vue.use(TimelinePlugin)

new Vue({ 
  el: '#app'
})

Dans main.js, nous utilisons l'instruction import pour importer le plugin TimelinePlugin dans notre application. Ensuite, nous utilisons la méthode use de Vue.js pour installer le plugin. Enfin, nous créons une instance Vue.js et la lions à un élément DOM avec l'identifiant #app.

Enfin, nous devons créer un élément DOM dans le fichier html pour restituer le composant timeline. Vous pouvez faire ceci :

<html>
  ...
  <body>
    <div id="app">
      <timeline></timeline>
    </div>
    <script src="js/main.js"></script>
  </body>
</html>

Dans cet exemple HTML, nous avons créé un conteneur div avec l'identifiant #app et y avons inséré le composant timeline. Enfin, nous définissons le fichier main.js comme fichier de script de la page et l'importons dans le code HTML.

Maintenant, nous avons terminé un composant de chronologie de base et l'avons empaqueté sous forme de plugin Vue.js. Vous pouvez l'utiliser facilement dans les applications Vue.js. Si vous souhaitez en savoir plus sur le fonctionnement de Vue.js et VUE3, consultez la documentation associée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!