Tutoriel de base VUE3 : Utiliser le plug-in Vue.js pour encapsuler le composant sélecteur d'étiquette

À mesure que le langage JavaScript devient de plus en plus populaire, le développement Web devient également de plus en plus populaire. Au cours des dernières années, les frameworks et bibliothèques JS sont devenus de plus en plus populaires, et l'un des frameworks les plus populaires est Vue.js. Ce framework simple à utiliser mais puissant a attiré de plus en plus de développeurs, rendant le développement Web plus rapide et plus efficace.

Dans Vue.js, les composants jouent un rôle important dans le développement d'applications. Vue.js vous permet d'écrire du code de manière composée de composants, en divisant une application complexe en plusieurs petits composants, chacun avec ses propres fonctions et propriétés spécifiques. Cela rend le code plus facile à maintenir et à étendre, tout en améliorant les performances et la réutilisabilité des applications.

Dans cet article, nous présenterons un autre concept central de Vue.js : les plugins. Nous apprendrons comment utiliser le plugin Vue.js pour envelopper un composant sélecteur de balises. Nous allons explorer comment écrire ce composant, le conditionner sous forme de plugin et l'utiliser dans une application Vue.js.

Commencez à écrire des composants

Tout d’abord, écrivons nos composants. Ici, nous allons créer un simple composant de sélection de balises que l'utilisateur peut utiliser pour sélectionner un ensemble de balises. Nous utiliserons certains concepts liés à Vue.js, tels que les composants, les accessoires, les méthodes, etc. Si vous n'êtes pas familier avec ces concepts, il est recommandé d'apprendre d'abord les bases de Vue.js.

Nous utiliserons Vue CLI pour créer notre application Vue.js. Depuis la ligne de commande, exécutez la commande suivante pour créer une nouvelle application :

vue create tag-selector

Ensuite, nous créerons un composant appelé TagSelector, qui contient une zone de saisie et une liste d'options. L'utilisateur peut saisir le nom de la balise via la zone de saisie, puis sélectionner la balise dans la liste des options.

<template>
  <div class="tag-selector">
    <input type="text" v-model="inputValue" v-on:keydown.enter="addTag()" />
    <div class="tags">
      <span class="tag" v-for="(tag, index) in tags" :key="index">
        {{ tag }}
        <button v-on:click="removeTag(index)">x</button>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "TagSelector",
  data() {
    return {
      tags: [],
      inputValue: ""
    };
  },
  methods: {
    addTag() {
      if (this.inputValue && !this.tags.includes(this.inputValue)) {
        this.tags.push(this.inputValue);
        this.inputValue = "";
      }
    },
    removeTag(index) {
      this.tags.splice(index, 1);
    }
  }
};
</script>

<style>
.tag-selector {
  display: flex;
  flex-direction: column;
  width: 300px;
}

input[type="text"] {
  padding: 5px;
  border: none;
  border-bottom: 1px solid grey;
}

.tags {
  margin-top: 10px;
}

.tag {
  display: inline-block;
  padding: 5px;
  border: 1px solid grey;
  border-radius: 5px;
  margin-right: 5px;
}
</style>

Ce composant possède un tableau nommé tags, qui est utilisé pour stocker les balises sélectionnées par l'utilisateur. Il possède également une variable appelée inputValue qui est utilisée pour obtenir les entrées de l'utilisateur. Les méthodes addTag et removeTag sont utilisées respectivement pour ajouter et supprimer des balises.

Ensuite, nous devons encapsuler ce composant sous forme de plug-in.

Emballage de composants sous forme de plugins

Pour encapsuler nos composants, nous devons y écrire un plugin. Un plugin Vue.js doit être un objet JavaScript contenant au moins une méthode d'installation. Cette méthode est appelée lors de l'installation de Vue.js et reçoit une instance de Vue.js comme premier argument. Dans ce cas, nous devons enregistrer notre composant (TagSelector) dans la méthode d'installation.

Nous devons également utiliser la fonction de vérification de version intégrée de Vue.js pour nous assurer que le plugin est compatible avec la version de Vue.js. Enfin, nous devons regrouper le plug-in terminé dans un fichier JavaScript distinct à utiliser dans notre application Vue.js.

Voici notre code de plug-in :

import TagSelector from "./TagSelector.vue";

const install = function(Vue) {
  Vue.component("tag-selector", TagSelector);
};

export default { install };

// version check
const version = Number(Vue.version.split(".")[0]);

if (version >= 2) {
  // Vue.js v2.x.x
  Vue.use(install);
} else {
  console.error("This plugin only works with Vue.js version 2 or above!");
}

Nous avons importé le composant que nous avons écrit auparavant (./TagSelector.vue) et créé une méthode d'installation pour l'enregistrer. Nous avons également effectué une vérification de version pour nous assurer que le plugin fonctionne avec les applications compatibles avec Vue.js v2.0 et supérieur. Enfin, nous exportons l’intégralité de l’objet plugin afin qu’il puisse être regroupé dans un fichier séparé.

Utilisation des plugins

Nous avons maintenant écrit notre plugin et l'avons emballé dans un fichier séparé. Nous pouvons l'ajouter à notre application Vue.js et l'utiliser pour sélectionner des balises.

Tout d'abord, nous devons importer ce plugin dans notre application Vue.js. Nous pouvons obtenir ce fichier à partir d'un référentiel comme npm ou cdn et l'ajouter à notre application.

import TagSelectorPlugin from "tag-selector-plugin";
import Vue from "vue";

Vue.use(TagSelectorPlugin);

Maintenant, nous avons importé le plugin dans l'application. Pour utiliser le plugin, nous ajoutons simplement le code suivant à notre modèle :

<tag-selector></tag-selector>

Cela créera un élément personnalisé appelé tag-selector dans notre application et l'affichera en tant que composant tag-selector. Nous pouvons interagir entre cet élément personnalisé et toutes les propriétés et méthodes définies dans notre plugin.

Conclusion

Dans cet article, nous avons présenté comment utiliser le plugin Vue.js pour encapsuler un simple composant de sélection de balises et comment utiliser le plugin dans une application Vue.js. Apprendre à écrire des plugins est une partie très importante du développement de Vue.js car il permet aux développeurs d'encapsuler facilement des fonctions et des composants et de les utiliser dans plusieurs applications. J'espère que cet article pourra vous aider à mieux utiliser Vue.js !

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!