Tutoriel d'introduction au développement VUE3 : Utilisation des composants Vue.js pour encapsuler des filtres de données

Vue.js est un framework JavaScript populaire et Vue 3 est sa dernière version. Cet article expliquera comment utiliser les composants Vue.js pour encapsuler des filtres de données afin d'aider les débutants à mieux comprendre le processus de développement de Vue 3.

Étape 1 : Installer Vue.js
Pour développer des applications à l'aide de Vue.js, nous devons d'abord installer Vue.js. Vous pouvez utiliser npm ou Yarn pour installer Vue.js. Entrez la commande suivante dans le terminal pour installer.

npm install vue

ou

yarn add vue

Étape 2 : Créer une application Vue.js
Après avoir installé Vue.js, vous devez créer une nouvelle application. Les applications peuvent être créées à l'aide de l'outil Vue CLI. Entrez la commande suivante dans le terminal.

vue create my-app

Cela créera une nouvelle application appelée my-app. Lors de la création d'une application, nous pouvons également choisir d'utiliser des paramètres de configuration spécifiques. Une fois le projet créé, utilisez la commande cd pour accéder au projet.

cd my-app

Nous pouvons maintenant démarrer le projet en utilisant la commande suivante.

npm run serve

ou

yarn serve

Maintenant, l'application a été démarrée avec succès. Ouvrez le navigateur et saisissez http://localhost:8080 dans la barre d'adresse pour y accéder.

Étape 3 : Créer le composant de filtre de données
Une fois que nous avons une application Vue.js, nous pouvons commencer à créer le composant de filtre de données. Un filtre de données recevra des données et les filtrera en fonction des conditions. Nous utiliserons l'exemple de code suivant pour créer un composant de filtre de données.

<template>
  <div>
    <div>
      <label>Filter:</label>
      <input type="text" v-model="filterText" />
    </div>
    <ul>
      <li v-for="item in filteredData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      filterText: '',
    };
  },
  computed: {
    filteredData() {
      const filterText = this.filterText.toLowerCase();
      return this.data.filter(item => {
        return item.name.toLowerCase().includes(filterText);
      });
    },
  },
};
</script>

Dans cet exemple de code, nous définissons d'abord un modèle qui contient un champ de saisie et une liste. Nous définissons également un attribut de données appelé filterText, qui stocke les critères de filtre saisis par l'utilisateur.

Ensuite, nous définissons une propriété calculée appelée filteredData, qui filtre les données en fonction des conditions de filtrage. Cette propriété calculée accepte la propriété data (définie dans l'objet props) comme entrée et la transmet à la fonction de filtre. Dans cette propriété calculée, nous utilisons la méthode filter() pour filtrer les données et les faire correspondre en fonction du champ de nom.

Enfin, nous définissons le composant comme exportation par défaut et l'utilisons dans le composant parent.

Étape 4 : Introduire le composant de filtre de données
Nous avons maintenant créé un composant de filtre de données que nous pouvons introduire dans notre composant parent. Nous montrons comment utiliser le composant de filtre de données dans l'exemple de code ci-dessous.

<template>
  <div>
    <filterable-list :data="items" />
  </div>
</template>

<script>
import FilterableList from './FilterableList.vue';

export default {
  components: {
    FilterableList,
  },
  data() {
    return {
      items: [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'pear' },
      ],
    };
  },
};
</script>

Dans cet exemple, nous créons un tableau de données appelé items et le transmettons à la propriété data du composant FilterableList. Ensuite, nous importons le composant FilterableList dans le composant parent et le définissons comme propriété de l'objet composant. Enfin, nous utilisons le composant FilterableList dans le modèle.

Cinquième étape : Exécuter l'application
Maintenant que nous avons terminé un composant de base de filtre de données Vue.js, nous pouvons maintenant redémarrer l'application pour voir comment elle fonctionne. Tapez la commande suivante dans le terminal :

npm run serve

ou

yarn serve

Ensuite, ouvrez http://localhost:8080 dans le navigateur, vous devriez voir un ensemble de projets et une zone de saisie de filtre. Entrez n'importe quoi et la liste sera filtrée en fonction de la valeur que vous entrez.

Conclusion
Dans cet article, nous avons appris à créer des filtres de données à l'aide de Vue.js et de composants. Nous avons utilisé l'architecture composée de composants et les propriétés calculées de Vue.js pour implémenter la fonction de filtrage. Il s'agit d'un composant Vue.js très basique que vous pouvez améliorer et étendre en fonction de vos besoins. Si vous êtes un débutant avec Vue.js, c'est un excellent point de départ pour vous aider à mieux comprendre le processus de développement de 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!