VUE3 개발 시작하기: Vue.js를 사용하여 데이터 목록을 동적으로 필터링

Vue.js는 현대 웹 개발의 중심이 되었습니다. 이는 데이터 바인딩 및 구성 요소화 기능을 제공하는 경량 JavaScript 프레임워크로, 개발자가 대화형 애플리케이션을 보다 쉽게 ​​구축할 수 있도록 해줍니다. 그리고 이제 Vue.js의 새 버전인 VUE3도 출시되었습니다. 이 기사에서는 VUE3를 사용하여 Vue.js에서 데이터 목록의 동적 필터링을 구현하는 방법을 예제를 통해 소개합니다.

1. 준비

이 튜토리얼을 시작하기 전에 Node.js 및 Vue용 CLI 도구를 설치해야 합니다. 다음 명령을 통해 버전을 확인할 수 있습니다.

 node -v
 npm -v

현재 낮은 버전의 Node.js를 사용하고 있다면 Node.js 공식 홈페이지에서 최신 버전을 다운로드할 수 있습니다. 설치가 완료되면 명령줄에서 다음 명령을 사용하여 Vue CLI를 설치할 수 있습니다:

npm install -g @vue/cli

2 Vue.js 프로젝트 만들기

명령줄에서 만들려는 프로젝트가 있는 디렉터리를 입력하세요.

vue create vue-demo
cd vue-demo

위 명령을 실행하면 대화형 명령줄 인터페이스가 나타나 프로젝트 구성을 사용자 정의할 수 있습니다. 수동으로 구성하거나 기본 구성을 사용하도록 선택할 수 있습니다. 자신의 필요에 따라 선택하십시오.

3. 데이터 목록 구성 요소 구축

기본적으로 Vue CLI는 Hello World 애플리케이션을 생성합니다. 데이터 목록을 표시하려면 새 구성요소를 빌드해야 합니다. src/comComponents 디렉터리에 새 컴포넌트 파일 List.vue를 생성한 후 컴포넌트에 다음 코드를 추가합니다.

<template>
  <div>
    <input type="text" v-model="search">
    <ul>
      <li v-for="item in filteredList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["apple", "banana", "orange", "grape"],
      search: ""
    };
  },

  computed: {
    filteredList() {
      return this.list.filter(item => {
        return item.toLowerCase().includes(this.search.toLowerCase());
      });
    }
  }
};
</script>

위 코드에서는 표시할 데이터를 저장하기 위해 컴포넌트에 배열 목록을 정의합니다. 이를 자신의 데이터 소스로 바꿀 수 있습니다. 그런 다음 v-model을 사용하여 입력 상자의 데이터를 구성 요소의 검색 속성에 바인딩합니다. 계산된 속성에서 검색 속성을 기반으로 목록 배열의 데이터를 필터링하는 계산된 속성filteredList를 정의합니다.

4. 컴포넌트 사용

App.vue 파일에서 컴포넌트 List를 가져오고 템플릿에 다음 HTML을 추가합니다.

<template>
  <div id="app">
    <List />
  </div>
</template>

<script>
import List from "./components/List.vue";

export default {
  components: {
    List
  }
};
</script>

위 코드에서는 먼저 List 컴포넌트를 가져온 다음 구성품 옵션. 템플릿에서는 목록 구성 요소를 페이지에 추가했습니다. 예상한 대로 이제 브라우저에서 애플리케이션과 실시간으로 데이터 목록 필터링에 응답하는 입력 상자를 볼 수 있습니다.

요약

이 기사에서는 Vue.js 및 VUE3를 사용하여 동적 데이터 목록을 작성하는 방법을 튜토리얼합니다. 이 예제를 통해 Vue의 양방향 데이터 바인딩 기능과 계산된 속성을 사용하여 데이터를 필터링하는 방법을 배웠습니다. 이 예제는 비교적 간단하지만 Vue.js를 마스터하기 위한 좋은 시작점이 됩니다. 다음 프로젝트에서는 이 템플릿을 활용하여 더 복잡한 애플리케이션을 구축할 수 있습니다.

위 내용은 VUE3 개발 시작하기: Vue.js를 사용하여 데이터 목록을 동적으로 필터링의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!