vue.js 컴포넌트 예제

.html 파일에서 ID component_test 및 component_test1을 가진 두 개의 div를 만들었습니다. 위에 표시된 .js 파일에서 div ids로 두 개의 Vue 인스턴스가 만들어집니다. 뷰 인스턴스 와 함께 사용할 공통 구성 요소를 만들었습니다. 지금까지 기본 옵션을 통해 기본 구성 요소를 보았습니다. 이제 데이터 및 메서드와 같은 몇 가지 옵션을 추가해 보겠습니다. Vue 인스턴스에 데이터와 메서드가 있는 것처럼 구성 요소도 동일하게 공유합니다. 따라서 이미 데이터와 메서드로 본 코드를 확장합니다. 마우스 오버에서 첫 번째 구성 요소의 이름이 Ben으로 변경되었지만 두 번째 구성 요소는 그대로 유지됩니다. 이는 데이터 구성 요소가 함수이며 개체를 반환하기 때문입니다.

따라서 한 곳에서 변경될 때 다른 경우에는 동일한 것이 덮어쓰지 않습니다. 슬롯이라는 이름을 지정할 수도 있습니다. 구성 요소에 두 개의 슬롯이 있는 경우 이름 속성 추가하여 구분할 수 있으며

를 작성하여 해당 특정 슬롯에 액세스할 수 있습니다.

이것은 매우 유용합니다. 이름이 지정된 슬롯이 여러 개 있고 그렇지 않은 슬롯이 있는 경우 Vue는 명명된 콘텐츠를 명명된 슬롯에 넣고 남은 슬롯을 채우는 데 사용됩니다. 구성 요소를 슬롯과 결합하면 슬롯 범위를 사용하여 구성 요소의 데이터를 슬롯에 전달할 수 있습니다. 소품을 함께 결합하지 않고 부모 구성요소에서 자식 구성요소로 전달할 수 있습니다. 지금까지 는 문자열로 자식 구성 요소에 콘텐츠를 만들었으며 모든 브라우저에서 ES6을 처리 할 수 있도록 babel을 사용하는 경우 (내가 매우 제안하는) 템플릿 리터럴을 사용하여 잠재적으로 읽기 어려운 문자열을 피할 수 있습니다. 연결: 헤더 구성 요소가 화면에 렌더링되는 것을 보셨습니까? 기능 템플릿을 사용하면 템플릿 태그만 있고 소품을 템플릿에 노출시키는 구성 요소를 만들 수 있습니다. Awes.io 위한 기본 테마: 빠른 시작을 위한 블레이드 구성 요소가 있는 UI 인터페이스.

아래 예제에서는 개발 모드에서 Vue를 로드하고 의도적으로 잘못된 형식을 prop 유효성 검사에 전달합니다. 콘솔에서 오류를 볼 수 있습니다. (또한 Vue의 개발 도구를 사용할 수 있으며 어디에서 찾을 수 있는지 알 수 있습니다.) src/components 폴더 내에서 Header.vue라는 새 파일을 만들어 이 코드를 작성합니다. 슬롯을 사용하여 앱 또는 구성 요소의 각 부분을 배치할 위치를 지정하는 데 사용할 수 있는 사용자 지정 레이아웃을 만들 수도 있습니다. Vue.component()를 사용하여 만든 모든 구성 요소는 전역적으로 등록됩니다. 변수에 할당하거나 템플릿에서 다시 사용하기 위해 변수를 전달할 필요가 없습니다. 이제 App.vue 파일 내에서 이 앱 구성 요소를 만들어야 합니다. App.vue 파일을 열고 기본 코드를 이것으로 바꿉니다: App.vue 파일 내에서 카운터 구성 요소를 다시 사용해 보겠습니다. React 또는 Angular2에 익숙한 경우 구성 요소 및 전달 상태에 대한 아이디어가 새로운 것은 아닙니다.

그렇지 않은 경우 몇 가지 주요 개념을 살펴보겠습니다. 구성 요소 폴더에 헤더라는 새 구성 요소를 만들어 보겠습니다. Vue를 사용하면 몇 가지 다른 방법으로 구성 요소를 만들 수 있습니다. 복잡한 예제가 평균 Vue 응용 프로그램이 어떻게 생겼는지에 대해 형성하는 것이 가장 중요하다는 것을 염두에 두고 단순에서 복잡한 것까지 작업해 보겠습니다. 구성 요소 개체를 변수에 정의하는 개체를 할당하여 구성 요소를 로컬로 캡슐화할 수 있습니다. 뭔가의 모양을 변경. 아래 와인 라벨 메이커에서, 버튼 중 하나는 사용자가 선택한 것에 따라 구성 요소와 색상을 전환합니다, 병과 라벨 및 텍스트의 배경은 모두 전환됩니다, 안정 내에서 콘텐츠를 유지하면서.