GO CAN DO IT

#뷰 라우터 인스턴스 생성 및 뷰 인스턴스에 연결 아래와 같이 vue 인스턴스에 $route 변수가 주입된 걸 확인할 수 있다. #라우터가 표시되는 영역 라우터 인스턴스에 /login 과 /main url 및 url에 대응하는 컴포넌트 명을 선언해주었다. 만약 해당 url 이 호출 될 경우, 태그 영역에 해당 컴포넌트들이 주입이 될 것이다. 해당 소스 실행 결과는 다음과 같다. 1). http://127.0.0.1:5500/playground/router.html#/login url을 호출 한 경우 2). http://127.0.0.1:5500/playground/router.html#/main url을 호출 한 경우 #라우터 링크 아래와 같이 라우터 링크를 추가해주면 이런식으로 이동 링크를 제공해준다...

위에서 아래로는 프롭스, 아래서 위로는 이벤트를 발생시켜 컴포넌트간에 통신을 했다. 그러면 같은 레벨의 컴포넌트 사이에 통신은 어떤식으로 이루어질까? - Root - AppHeader - AppContent 이런식의 레벨 구조를 가진 컴포넌트일 때, AppHeader 컴포넌트와, AppContent간의 통신을 구현해보자 데이터 통신의 방식은 다음과 같다. 1. AppContent에서 Root로 event로 데이터 전달 2. Root에서 AppHeader로 데이터 전달 결과물은 다음과 같다. 1. AppHeader의 propsData에 값이 잘 들어감 2. Root의 데이터에도 값이 잘 들어감 해당 포스팅은 인프런의 Vue.js 시작하기 - Age of Vue.js 학습 후 정리한 내용임을 알려드립니다.

뷰에서 컴포넌트 통신은 아래와 같은 구조를 가진다. 상위에서 하위로는 데이터를 내려주는 프롭스 속성, 하위에서 상위로는 이벤트를 올려주는 이벤트 발생 이러한 통신 규칙이 필요한 이유는, 기존의 MVC 패턴에서처럼 데이터가 N방향 통신을 하는 경우, 데이터의 영향이 컴포넌트 간에 복잡하게 영향을 미치기 때문에 데이터의 흐름을 추적하기 어렵기 때문이다. 뷰의 컴포넌트 통신규칙을 지킨다면 데이터의 흐름을 추적하기 쉽다!! #Props(상위에서 하위컴포넌트로 전달되는 데이터) 아래의 예시를 통해서 컴포넌트간의 통신(상위 to 하위)가 어떻게 이루어지는지 보자. 첫번째로 Vue 인스턴스 생성 시 data 속성값을 설정해준다. new Vue({ el : '#app', components : { 'app-header..

뷰 컴포넌트란, 화면에서 영역을 구분하여 개발할 수 있는 뷰의 기능이다. 각각 구분된 구분을 컴포넌트라고 부른다. 컴포넌트는 오른쪽 그림처럼, 컴포넌트들이 생성되면 컴포넌트'간'의 관계가 생긴다. #전역 컴포넌트 1. 뷰 인스턴스를 생성하면 가장 먼저 Root 컴포넌트가 생긴다. 2. 아래와 같이 헤더, 컨텐츠 컴포넌트를 생성해준다. 3. 결과물 위와 같이 AppHeader 컴포넌트와 AppContent 컴포넌트라는 전역 컴포넌트가 생긴 것을 확인할 수 있다. #지역 컴포넌트 뷰 인스턴스 생성 후 Vue.component('컴포넌트명', 컴포넌트 내용)으로 속성을 추가해주는 것이 아니라, 인스턴스 생성 시점에 컴포넌트 속성을 정의해 줄 수 있는 방법도 있다. 지역 컴포넌트 footer가 생성된 것을 확인..