vue component 예제

React 또는 Angular2에 익숙한 경우 구성 요소 및 전달 상태에 대한 아이디어가 새로운 것은 아닙니다. 그렇지 않은 경우 몇 가지 주요 개념을 살펴보겠습니다. 코드를 찾는 동안이 섹션에서 my-button 구성 요소를 사용하는 목적은 바인딩 된 날짜를 표시하는 것입니다 (:click-function =”showDate”). 이 함수는 NewsHolder 구성 요소 Vue의 슬롯의 메서드 속성에 추가되어 코드에 콘텐츠가 구성 요소에 있을 위치를 알려줍니다. 이것은 지금 혼란 스러울 수 있습니다, 그래서 슬롯이 실제로 몇 가지 코딩으로 우리를 위해 무엇을 하는지 보자. Src /구성 요소 폴더 내에서 Header.vue라는 새 파일을 만들어 이 코드를 작성합니다. 또한 새로 만든 비활성화 능력은 조건이 true 동안 두 번째 마이 버튼 구성 요소를 사용하지 않도록 설정하여 사용됩니다. 조건은 isTourEnded라는 변수로 정의되며 기본값은 false입니다. 이 기사에서는 구성 요소를 사용하고 코드를 여러 논리 부분으로 나누는 것이 얼마나 효과적인지 보여 주어 있습니다. 그러나 Vue의 힘은 이것들의 전부가 아닙니다. 단일 페이지 응용 프로그램 (SPA)를 만들 려는 경우 개발 프로세스 동안 Vue 라우터를 사용 합니다. 그런 다음 이벤트를 방출하고 깊은 구성 요소를 통해 소품을 전달하면 화가 나서 보다 구조화 된 데이터 조직을 수행 할 수있는 방법을 모색 할 것입니다.

여기에 Vuex는 Vue js에 대한 상태 관리 라이브러리입니다 당신을 돕기 위해 올 것이다. 나중에 프런트 엔드 섹션에서 양식 유효성 검사를 수행해야 합니다. 또한 날짜 선택과 같은 복잡한 작업을 수행해야하는 경우 사이트에서 이미 만든 vue2-datepicker 구성 요소를 사용합니다. 마지막으로 사이트의 주요 부분을 반복할 논리를 만들려면 이 목적을 위해 재사용 가능한 구성 요소를 만듭니다. 결과적으로, 당신은 각 조각의 보다 직관적이고 진화하고 독립적 인 형태로 개발 프로세스를 달성 할 수있을 것입니다. 그래서 Vue 프레임 워크, 다른 제품을 배우고, 빠르고 효율적인 개발 프로세스를 수행하기 위해 우수한 기능을 사용하는 것이 좋습니다. 위에서 언급했듯이 이제 재사용 가능한 구성 요소를 만들고 나중에 우리의 요구에 맞게 업그레이드하는 것이 얼마나 효과적인지 알 수 있습니다.