VUE3 개발 입문 튜토리얼: Vue.js 구성요소를 사용하여 데이터 필터 캡슐화

Vue.js는 널리 사용되는 JavaScript 프레임워크이며 Vue 3은 최신 버전입니다. 이 기사에서는 초보자가 Vue 3의 개발 프로세스를 더 잘 이해할 수 있도록 Vue.js 구성 요소를 사용하여 데이터 필터를 캡슐화하는 방법을 소개합니다.

1단계: Vue.js 설치
Vue.js를 사용하여 애플리케이션을 개발하려면 먼저 Vue.js를 설치해야 합니다. npm 또는 Yarn을 사용하여 Vue.js를 설치할 수 있습니다. 설치할 터미널에 다음 명령어를 입력하세요.

npm install vue

또는

yarn add vue

2단계: Vue.js 애플리케이션 만들기
Vue.js를 설치한 후 새 애플리케이션을 만들어야 합니다. Vue CLI 도구를 사용하여 애플리케이션을 생성할 수 있습니다. 터미널에 다음 명령을 입력합니다.

vue create my-app

이렇게 하면 my-app이라는 새 애플리케이션이 생성됩니다. 애플리케이션을 생성할 때 특정 구성 설정을 사용하도록 선택할 수도 있습니다. 프로젝트가 생성되면 cd 명령을 사용하여 프로젝트에 들어갑니다.

cd my-app

이제 다음 명령을 사용하여 프로젝트를 시작할 수 있습니다.

npm run Serve

또는

yarn Serve

이제 애플리케이션이 성공적으로 시작되었습니다. 브라우저를 열고 주소 표시줄에 http://localhost:8080을 입력하여 접속하세요.

3단계: 데이터 필터 구성 요소 만들기
Vue.js 애플리케이션이 있으면 데이터 필터 구성 요소 만들기를 시작할 수 있습니다. 데이터 필터는 데이터를 수신하고 조건에 따라 필터링합니다. 다음 코드 예제를 사용하여 데이터 필터 구성 요소를 만듭니다.

<template>
  <div>
    <div>
      <label>Filter:</label>
      <input type="text" v-model="filterText" />
    </div>
    <ul>
      <li v-for="item in filteredData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      filterText: '',
    };
  },
  computed: {
    filteredData() {
      const filterText = this.filterText.toLowerCase();
      return this.data.filter(item => {
        return item.name.toLowerCase().includes(filterText);
      });
    },
  },
};
</script>

이 코드 예제에서는 먼저 입력 필드와 목록이 포함된 템플릿을 정의합니다. 또한 사용자가 입력한 필터 기준을 저장하는 filterText라는 데이터 속성을 정의합니다.

다음으로 필터 조건에 따라 데이터를 필터링하는filteredData라는 계산된 속성을 정의합니다. 이 계산된 속성은 data 속성(props 객체에 정의됨)을 입력으로 받아들이고 이를 필터 함수에 전달합니다. 이 계산된 속성에서는 filter() 메서드를 사용하여 데이터를 필터링하고 이름 필드를 기반으로 일치시킵니다.

마지막으로 구성 요소를 기본 내보내기로 설정하고 상위 구성 요소에서 사용합니다.

4단계: 데이터 필터 구성 요소 소개
이제 상위 구성 요소에 도입할 수 있는 데이터 필터 구성 요소를 만들었습니다. 아래 샘플 코드에서는 데이터 필터 구성 요소를 사용하는 방법을 보여줍니다.

<template>
  <div>
    <filterable-list :data="items" />
  </div>
</template>

<script>
import FilterableList from './FilterableList.vue';

export default {
  components: {
    FilterableList,
  },
  data() {
    return {
      items: [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'pear' },
      ],
    };
  },
};
</script>

이 예에서는 items라는 데이터 배열을 생성하고 이를 FilterableList 구성 요소의 data 속성에 전달합니다. 다음으로 FilterableList 구성 요소를 상위 구성 요소로 가져와 구성 요소 개체의 속성으로 설정합니다. 마지막으로 템플릿에서 FilterableList 구성 요소를 사용합니다.

5단계: 앱 실행
이제 기본 Vue.js 데이터 필터 구성 요소를 완료했으므로 앱을 다시 시작하여 작동 방식을 확인할 수 있습니다. 터미널에 다음 명령을 입력하세요.

npm run Serve

또는

yarn Serve

그런 다음 브라우저에서 http://localhost:8080을 열면 일련의 프로젝트와 필터 입력 상자가 표시됩니다. 무엇이든 입력하면 입력한 값에 따라 목록이 필터링됩니다.

결론
이번 포스팅에서는 Vue.js와 컴포넌트를 사용하여 데이터 필터를 만드는 방법을 배웠습니다. 우리는 Vue.js의 컴포넌트화된 아키텍처와 계산된 속성을 사용하여 필터링 기능을 구현했습니다. 이는 필요에 따라 개선하고 확장할 수 있는 매우 기본적인 Vue.js 구성 요소입니다. Vue.js 초보자라면 Vue.js 개발 프로세스를 더 잘 이해하는 데 도움이 되는 훌륭한 출발점이 됩니다.

위 내용은 VUE3 개발 입문 튜토리얼: Vue.js 구성요소를 사용하여 데이터 필터 캡슐화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!