Vue 컴포넌트 실습: 검색창 컴포넌트 개발

Vue 컴포넌트 실습: 검색창 컴포넌트 개발

인터넷의 발달과 함께 다양한 애플리케이션에서 검색 기능이 점점 보편화되고 있습니다. 사용자가 신속하게 정보를 검색할 수 있도록 검색창은 모든 웹사이트의 표준 기능이 되었습니다. 이 글에서는 Vue.js를 통해 검색창 컴포넌트를 개발하겠습니다.

검색 상자 구성 요소에는 다음 기능이 있어야 합니다.

1. 입력 상자는 사용자 입력에 실시간으로 반응하고 사용자가 입력할 때 검색할 수 있습니다.
2. 사용자는 입력 상자 오른쪽에 있는 검색 버튼을 클릭할 수 있습니다.
3. 사용자는 검색창 아래에서 검색 결과를 볼 수 있습니다.

이 구성 요소를 구현하려면 다음 단계를 수행해야 합니다.

1. Vue.js 및 axios 라이브러리 설치

구성 요소 작성을 시작하기 전에 먼저 Vue.js 및 axios 라이브러리를 설치해야 합니다. Vue.js는 사용자 인터페이스 구축을 위한 진보적인 프레임워크이고, axios는 HTTP 요청 전송을 위한 라이브러리입니다. 둘 다 npm을 통해 설치해야 합니다. 설치하려면 터미널에 다음 명령을 입력하세요.

npm install vue axios --save

2. 컴포넌트 만들기

Vue CLI를 통해 Vue 프로젝트를 빠르게 빌드하고 검색 상자 구성 요소인 src/comComponents 디렉터리에 SearchBox.vue 파일을 만듭니다.

3. SearchBox.vue 컴포넌트 작성

SearchBox.vue 파일에서 컴포넌트를 선언하고 컴포넌트에 템플릿, 데이터, 메소드 등을 정의해야 합니다. 다음은 간단한 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>

위 코드에서는 먼저 템플릿에 검색 상자 div를 만들고 그 안에 입력 상자와 검색 버튼을 배치합니다. v-model을 통해 입력 상자의 값을 searchText 속성에 바인딩합니다. 입력 상자의 값이 변경되면 searchText의 값도 그에 따라 변경됩니다.

사용자가 콘텐츠를 입력하고 검색 버튼을 클릭할 때 모두 검색 메서드를 호출합니다. 검색 방법에서는 axios 라이브러리를 사용하여 HTTP 요청을 보내고 백엔드 인터페이스에 요청하여 데이터를 얻습니다. 이 예에서는 JSONPlaceholder에서 제공하는 가상 API를 사용합니다. 사용자가 입력한 내용은 쿼리 매개변수로 인터페이스에 전달되고, 쿼리에서 반환된 결과는 아래 ul에 표시됩니다.

마지막으로, 스타일이 다른 구성 요소에 영향을 미치지 않도록 범위 속성을 사용하여 SearchBox 구성 요소의 스타일 범위를 정의했습니다.

4. 상위 구성 요소에서 SearchBox 구성 요소 사용

이제 SearchBox 구성 요소 작성이 완료되었으므로 상위 구성 요소에서 이를 사용하는 방법을 살펴보겠습니다. 상위 구성 요소에서는 구성 요소를 참조하고 필수 속성을 전달하기만 하면 됩니다. 예:

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

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

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

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

위 코드에서는 SearchBox 구성 요소를 도입하고 상위 구성 요소에 구성 요소로 등록했습니다. 스타일은

을 통해 설정할 수 있습니다.

이 시점에서 우리는 간단한 검색 상자 구성 요소를 성공적으로 구현했습니다. 사용자가 검색 키워드를 입력하면 백엔드 인터페이스에서 해당 데이터를 쿼리하고 쿼리 결과를 사용자에게 실시간으로 표시합니다.

결론

Vue.js는 현재 가장 인기 있는 프런트 엔드 프레임워크 중 하나이며, 구성 요소 기반 프로그래밍 기능을 통해 다양하고 복잡한 애플리케이션을 보다 효율적이고 편리하게 개발할 수 있습니다. 이 기사에서는 Vue.js를 통해 검색 상자 구성 요소를 구현하고 구성 요소를 인스턴스화하고 부모-자식 구성 요소와 통신하여 양방향 데이터 바인딩, 메서드 호출 및 이벤트 트리거를 구현했습니다. 이러한 기본 Vue.js 지식을 습득하면 간단한 Vue 구성 요소를 개발하는 방법을 기본적으로 마스터했다고 믿습니다.

위 내용은 Vue 컴포넌트 실습: 검색창 컴포넌트 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!