Vue component practice: search box component development

Vue component practice: search box component development

With the development of the Internet, search functions are becoming more and more common in various applications. In order to facilitate users to quickly query information, the search box has become a standard feature of every website. In this article, we will develop a search box component through Vue.js.

Our search box component needs to have the following functions:

1. The input box can respond to user input in real time and search when the user inputs;
2. Users can click to enter Use the search button on the right side of the box to search;
3. Users can see the search results below the search box.

In order to implement this component, we need to perform the following steps:

1. Install Vue.js and axios library

Before starting to write the component , we need to install Vue.js and axios libraries first. Vue.js is a progressive framework for building user interfaces, and axios is a library for sending HTTP requests. Both need to be installed through npm. Enter the following command in the terminal to install:

npm install vue axios --save

2. Create components

We quickly build a Vue project through Vue CLI and create a SearchBox in the src/components directory .vue file, which is our search box component.

3. Writing the SearchBox.vue component

In the SearchBox.vue file, we need to declare the component and define the template, data, methods, etc. in the component. The following is a simple SearchBox.vue code example:

<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>

In the above code, we first create a search-box div in the template and place an input box and a search button in it. We bind the value of the input box to the searchText attribute through v-model. When the value of the input box changes, the value of searchText will also change accordingly.

We will call the search method when the user enters content and clicks the search button. In the search method, we use the axios library to send an HTTP request and request the backend interface to obtain data. In this example, we use the virtual API provided by JSONPlaceholder. The content entered by the user will be passed to the interface as query parameters, and the results returned by the query will be displayed in the ul below.

Finally, we also use the scoped attribute to define the scope for the style of the SearchBox component to prevent the style from affecting other components.

4. Using the SearchBox component in the parent component

Now that we have completed writing the SearchBox component, let’s see how to use it in the parent component. In the parent component, we simply reference the component and pass in the required properties. For example:

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

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

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

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

In the above code, we introduced the SearchBox component and registered it as a component in the parent component. Styles can be set via

.

So far, we have successfully implemented a simple search box component. When the user enters a search keyword, we will query the corresponding data from the back-end interface and display the query results to the user in real time.

Conclusion

Vue.js is one of the most popular front-end frameworks at the moment. Its component-based programming features allow us to develop various complex applications more efficiently and conveniently. In this article, we implemented a search box component through Vue.js. By instantiating the component and communicating with the parent-child component, we implemented two-way binding of data, invocation of methods, and triggering of events. Master these basic Vue.js knowledge, and I believe you have basically mastered how to develop a simple Vue component.

The above is the detailed content of Vue component practice: search box component development. For more information, please follow other related articles on the PHP Chinese website!