Pratique des composants Vue : développement de composants de champ de recherche

Pratique des composants Vue : développement de composants de champ de recherche

Avec le développement d'Internet, les fonctions de recherche deviennent de plus en plus courantes dans diverses applications. Afin de permettre aux utilisateurs de rechercher rapidement des informations, le champ de recherche est devenu une fonctionnalité standard de chaque site Web. Dans cet article, nous développerons un composant de champ de recherche via Vue.js.

Notre composant de champ de recherche doit avoir les fonctions suivantes :

1. La zone de saisie peut répondre aux saisies de l'utilisateur en temps réel et rechercher lorsque l'utilisateur saisit ;
2. Les utilisateurs peuvent cliquer sur le bouton de recherche situé à droite de la zone de saisie ; pour rechercher ;
3. Les utilisateurs peuvent voir les résultats de la recherche sous le champ de recherche.

Afin d'implémenter ce composant, nous devons effectuer les étapes suivantes :

1. Installer les bibliothèques Vue.js et axios

Avant de commencer à écrire des composants, nous devons installer les bibliothèques Vue.js et axios. Vue.js est un framework progressif pour créer des interfaces utilisateur et axios est une bibliothèque pour envoyer des requêtes HTTP. Les deux doivent être installés via npm. Entrez la commande suivante dans le terminal pour installer :

npm install vue axios --save

2. Créer un composant

Nous construisons rapidement un projet Vue via Vue CLI et créons un fichier SearchBox.vue dans le répertoire src/components, qui est notre composant de champ de recherche.

3. Écriture du composant SearchBox.vue

Dans le fichier SearchBox.vue, nous devons déclarer le composant et définir le modèle, les données, les méthodes, etc. dans le composant. Voici un exemple simple de code SearchBox.vue :

<template>
  <div class="search-box">
    <input type="text" v-model="searchText" @input="search" />
    <button @click="search">搜索</button>
    <ul>
      <li v-for="result in searchResults" :key="result.id">{{ result.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'SearchBox',
  data() {
    return {
      searchText: '',
      searchResults: [],
    };
  },
  methods: {
    search() {
      axios
        .get('https://jsonplaceholder.typicode.com/posts', {
          params: { title: this.searchText },
        })
        .then((response) => {
          this.searchResults = response.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

<style scoped>
.search-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eaeaea;
  padding: 10px;
  border-radius: 5px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  padding: 5px;
}
</style>

Dans le code ci-dessus, nous créons d'abord un div de zone de recherche dans le modèle et y plaçons une zone de saisie et un bouton de recherche. Nous lions la valeur de la zone de saisie à l'attribut searchText via v-model. Lorsque la valeur de la zone de saisie change, la valeur de searchText changera également en conséquence.

Nous appellerons la méthode de recherche à la fois lorsque l'utilisateur saisit du contenu et clique sur le bouton de recherche. Dans la méthode de recherche, nous utilisons la bibliothèque axios pour envoyer une requête HTTP et demander à l'interface backend d'obtenir des données. Dans cet exemple, nous utilisons l'API virtuelle fournie par JSONPlaceholder. Le contenu saisi par l'utilisateur sera transmis à l'interface en tant que paramètres de requête et les résultats renvoyés par la requête seront affichés dans l'ul ci-dessous.

Enfin, nous avons également utilisé l'attribut scoped pour définir la portée du style du composant SearchBox afin d'éviter que le style n'affecte d'autres composants.

4. Utilisation du composant SearchBox dans le composant parent

Maintenant que nous avons terminé l'écriture du composant SearchBox, voyons comment l'utiliser dans le composant parent. Dans le composant parent, nous référençons simplement le composant et transmettons les propriétés requises. Par exemple :

<template>
  <div class="app">
    <SearchBox />
  </div>
</template>

<script>
import SearchBox from '@/components/SearchBox.vue';

export default {
  components: {
    SearchBox,
  },
};
</script>

<style>
.app {
  margin: 20px;
}
</style>

Dans le code ci-dessus, nous avons introduit le composant SearchBox et l'avons enregistré en tant que composant dans le composant parent. Les styles peuvent être définis via

.

À ce stade, nous avons implémenté avec succès un simple composant de champ de recherche. Lorsque l'utilisateur saisit un mot-clé de recherche, nous interrogerons les données correspondantes à partir de l'interface back-end et afficherons les résultats de la requête à l'utilisateur en temps réel.

Conclusion

Vue.js est l'un des frameworks front-end les plus populaires à l'heure actuelle. Ses fonctionnalités de programmation basées sur des composants nous permettent de développer diverses applications complexes plus efficacement et plus facilement. Dans cet article, nous avons implémenté un composant de zone de recherche via Vue.js. En instanciant le composant et en communiquant avec le composant parent-enfant, nous avons implémenté la liaison bidirectionnelle des données, l'invocation de méthodes et le déclenchement d'événements. Maîtrisez ces connaissances de base de Vue.js, et je pense que vous maîtrisez essentiellement comment développer un composant Vue simple.

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!