프로젝트 의 JavaScript 스킬 트리

Vue.js 로 검색 제안 기능 구현하기

초급

이 프로젝트에서는 Vue.js 2.x 를 사용하여 입력 검색 제안 기능을 구현하는 방법을 배우게 됩니다. 이 기능은 사용자가 검색 입력란에 입력할 때 일치하는 데이터 목록을 제공하기 위해 웹 애플리케이션에서 일반적으로 사용됩니다.

javascriptweb-development

💡 이 튜토리얼은 영어로 번역되었습니다. 원본을 보려면 영어로 전환

소개

이 프로젝트에서는 Vue.js 2.x 를 사용하여 입력 검색 제안 기능을 구현하는 방법을 배우게 됩니다. 이 기능은 사용자가 검색 입력란에 입력할 때 일치하는 데이터 목록을 제공하기 위해 웹 애플리케이션에서 일반적으로 사용됩니다.

👀 미리보기

Vue search suggestions demo

🎯 과제

이 프로젝트에서는 다음을 배우게 됩니다.

  • 데이터 테이블에서 테이블 헤더의 첫 글자를 대문자로 만드는 방법
  • 사용자의 입력을 기반으로 검색 제안 기능을 구현하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

  • v-forv-model과 같은 Vue.js 지시어를 사용하여 DOM 을 조작합니다.
  • 검색 결과를 필터링하고 표시하기 위해 Vue.js 에서 계산된 속성 (computed properties) 을 생성합니다.
  • 테이블 및 검색 입력에 기본적인 스타일을 적용합니다.

강사

labby
Labby
Labby is the LabEx teacher.