Vue 및 Vuetify를 사용하는 재사용 가능한 구성 요소.

안녕하세요, 오늘 우리는 재사용 가능한 입력 구성 요소를 만들 것입니다. vuetify 입력 구성 요소를 사용할 것이며 다른 UI 프레임 워크는 동일하거나 매우 유사하게 작동해야합니다. Vue 3의 안정적인 릴리스에서도 모든 UI Vue 프레임 워크가 여전히 Vue 3을 프레임 워크에 통합하는 과정에 있으므로 Vue에 vuetify를 추가 할 때 실패하는 이유 때문에 Vue 2를 사용할 것입니다.

Vue CLI가 설치되어 있는지 확인하십시오 . 그렇지 않은 경우 터미널에서 다음 명령을 실행하십시오.

npm install -g @vue/cli

vue create <app-name>

cd <app-name>

vue add vuetify

npm run serve

기본 Vue & Vuetify 앱.

이제 재사용 가능한 구성 요소를 만들 수 있도록 코드를 지울 차례입니다. 다음 단계를 수행하십시오.

  • HelloWorld 구성 요소를 삭제합니다.
  • HelloWorld 구성 요소를 제거하고 App.vue 파일에서 가져옵니다.
  • 구성 요소 폴더에 Header.vue (App-bar)라는 새 구성 요소를 만듭니다. 해당 구성 요소에 다음 코드를 추가합니다.
  • App.vue 내부에서 다음을 포함하도록 코드를 변경하십시오.
  • 구성 요소 폴더에 inputs라는 하위 폴더를 만듭니다. 여기서는 재사용 가능한 모든 구성 요소를 보관합니다.

이제 몇 가지 기본 입력 필드를 만들고 재사용 가능한 구성 요소로 만들어 보겠습니다.

입력 폴더에 다음 파일 을 만듭니다.

  • TextField.vue
  • SelectField.vue
  • RadioField.vue
  • TimeField.vue
  • DateField.vue
  • touch TextField.vue SelectField.vue RadioField.vue TimeField.vue DateField.vue
    

RadioField.vue 내부에는 다음이 포함됩니다.

TimeField.vue 내부

DateField.vue 내부에는 다음이 포함됩니다.

구성 요소를 통해 전달되는 모든 데이터는 물론 다를 수 있으므로 구성 요소를 재사용하는 것이 좋은 생각입니다. .NET을 통해 전송되는 데이터에 따라 다른 데이터를 출력하기 위해 템플릿으로 사용되는 하나의 핵심 구성 요소 입니다.

위의 모든 예제에서 우리는 props를 통해 데이터를 전달했음을 알 수 있습니다 (이름은 선호도에 따라 다를 수 있음).

데이터 이름 (이 경우 fields ) 에 대한 중복을 피하기 위해 Created () Vue 수명주기 후크를 사용하고 있습니다 . 브라우저 콘솔에서 경고 / 오류 메시지를 방지하기 위해 필드가 복제되고 필드 이름이 변경 됩니다.

아래의 App.vue 파일에 모든 변경 사항을 추가하십시오.

위의 App.vue 파일에서 ./components/inputs 디렉터리에서 5 개의 입력 구성 요소를 가져 왔습니다. 또한 전달하고자하는 데이터를 예로 추가했습니다. 이것의 크기 조정은 훨씬 더 깊어 질 수 있으며 확실히 놀면서 창의력을 발휘할 수 있습니다. 저는 데이터가 다음과 같이 전달되는 객체 배열과 같이 훨씬 복잡한 데이터를 전달 했으므로

survey[0].section[0]

최종 출력은 다음과 같습니다.

방문 페이지 (출력)

그것이 재사용 가능한 구성 요소를 만드는 방법입니다!, 모든 구성 요소가 비슷한 방식으로 다소간 작동한다는 것을 기억하십시오. 너무 많이 생각하지 마십시오. 문제가 있으면 자유롭게 질문하십시오.

여기에서 코드 저장소를 찾으 십시오 . 자유롭게 복제하고 테스트하십시오.

업데이트를 위해 Twitter @ cbazil3 에서 저를 따르십시오 .

이 수업이 도움이 되었기를 바랍니다. 더 많은 튜토리얼을 기대해주세요.

건배.

Suggested posts

다음 웹 프로젝트에서 사용할 자바 스크립트 프레임 워크 인 Vue.js를 만나보세요

다음 웹 프로젝트에서 사용할 자바 스크립트 프레임 워크 인 Vue.js를 만나보세요

작성자 : Jon Price | 원래 c2experience.com에 게시 됨 최근에는 The C2 Group이 Vue와 협력하고 있습니다.

Vue.js에서 부드러운 끝없는 스크롤을 만드는 방법

지 터링이나 외부 라이브러리없이

Vue.js에서 부드러운 끝없는 스크롤을 만드는 방법

이 기사에서는 부드러운 끝없는 스크롤로 Vue.js에서 페이지를 만드는 방법을 설명합니다.