VUE3 개발 입문 튜토리얼: Vue.js 플러그인을 사용하여 검색 상자 구성요소 캡슐화

Vue.js는 널리 사용되는 JavaScript 프레임워크이며 VUE3은 더 빠른 속도와 더 강력한 기능을 제공하는 최신 버전입니다. 이 기사에서는 VUE3 및 Vue.js 플러그인을 사용하여 간단한 검색 상자 구성 요소를 캡슐화하는 방법을 보여 드리겠습니다.

1. Vue 프로젝트 만들기

먼저 VUE3와 Vue-cli를 설치해야 합니다. Vue-cli를 설치한 후 다음 명령을 입력하여 새 vue 프로젝트를 생성할 수 있습니다:

vue create search-box

그런 다음 프롬프트에 따라 설치합니다.

2. 새 플러그인 만들기

프로젝트 폴더에서 새 플러그인을 만들어야 합니다. src 폴더에 search-box.js라는 파일을 만듭니다. 이 파일에서는 검색 상자 구성 요소와 플러그인을 정의합니다.

search-box.js에서 먼저 Vue를 가져와야 합니다.

import Vue from 'vue'

그런 다음 SearchBox라는 새 Vue 구성 요소를 정의할 수 있습니다.

const SearchBox = Vue.component('SearchBox', {
  template: `
    <div>
      <input type="text" v-model="searchTerm" ref="searchInput" @keyup.enter="performSearch" placeholder="Search...">
      <button @click="performSearch">Search</button>
    </div>
  `,
  data() {
    return {
      searchTerm: ''
    }
  },
  methods: {
    performSearch() {
      this.$emit('search', this.searchTerm)
      this.$refs.searchInput.focus()
      this.searchTerm = ''
    }
  }
})

위 코드에서는 간단한 검색 상자 구성 요소를 정의했습니다. 구성 요소에는 입력 상자, 버튼 및 검색을 처리할 수 있는 기능이 있습니다. 사용자가 검색 버튼을 클릭하거나 Enter 키를 누르면 searchTerm 값이 내보내기 이벤트를 통해 상위 구성 요소로 전송됩니다.

3. 플러그인 설치

search-box.js를 사용 가능한 Vue 플러그인으로 변환하려면 Vue 플러그인을 사용해야 합니다. search-box.js 파일 끝에 다음 코드를 추가하세요.

export default {
  install(Vue) {
    Vue.component('SearchBox', SearchBox)
  }
}

이런 식으로 작동하는 Vue.js 플러그인을 만들었습니다. Vue 프로젝트에서 이 플러그인을 사용할 수 있습니다.

4. 플러그인 사용

이제 Vue 프로젝트에서 검색 상자 플러그인을 사용해야 합니다. 이렇게 하려면 프로젝트의 main.js 파일에 search-box.js 플러그인을 가져오고 Vue.use 메소드를 사용하여 플러그인을 설치하십시오.

import Vue from 'vue'
import SearchBox from './search-box'

Vue.use(SearchBox)

이제 검색 상자 플러그인이 설치되었습니다. Vue 프로젝트에서 사용할 수 있습니다.

5. 컴포넌트에서 SearchBox 사용

Vue 프로젝트에서는 검색 상자 컴포넌트를 사용할 수 있습니다. 예를 들어 App.vue라는 구성 요소에 search라는 구성 요소를 추가할 수 있습니다.

<template>
  <div>
    <SearchBox @search="doSearch"></SearchBox>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    doSearch(searchTerm) {
      alert(searchTerm)
    }
  }
}
</script>

위 코드에서는 search라는 구성 요소를 추가하고 doSearch라는 구성 요소를 메서드에 추가했습니다. 사용자가 검색할 때 메소드가 호출되고 검색어가 포함된 경고 상자가 표시됩니다.

6. Vue 프로젝트 실행

마지막으로 Vue 프로젝트를 실행하면 됩니다. 명령줄 터미널에 다음 명령을 입력하세요:

npm run serve

그러면 Vue 프로젝트가 시작됩니다. 검색 상자 구성 요소를 보려면 브라우저에서 http://localhost:8080을 엽니다.

결론

이 튜토리얼에서는 Vue.js 플러그인을 사용하여 간단한 검색 상자 구성 요소를 캡슐화하는 방법을 배웠습니다. 우리는 VUE3 프로젝트에서 이 구성 요소를 사용하는 방법을 배웠으며 VUE3가 더 빠르고 강력하며 사용하기 쉽다는 것을 알았습니다. 이제 이 지식을 사용하여 자신만의 Vue.js 애플리케이션을 구축할 수 있습니다.

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