event 3

Vue.js 시작하기 11. 싱글컴포넌트 사용하여 개발 시작하기

App.vue 파일을 활용해서 한번 화면에 데이터를 뿌려보도록 하자. 기존에 html 소스 안에서 뷰 인스턴스를 생성했던 방법과는 아주 조금 다르다. 코드를 통해 알아보자 {{str}} #1. 싱글 파일 컴포넌트에서 html 을 선언할 때는, 가장 상위에 div 태그를 하나 선언하고 , 그 안에 header던, body던 생성을 해줘야 한다. #2. 기존에 html 파일에서 뷰 인스턴스 객체를 선언하고 주입해주었던 방식 #3. 싱글파일 컴포넌트에서는 이런식으로 변수를 선언해주면 안되고 #4. 방식으로 선언을 해주어야 한다. 그 이유는, 여러 객체들의 재사용성을 높이기 위함으로 변수를 함수형으로 선언하고 , 해당 값을 리턴해주는 형태로 사용한다. #싱글파일 컴포넌트 체계에서 컴포넌트 등록하기 컴포넌트를 등..

Study/Vue 2022.01.22

Vue.js 시작하기 05. 컴포넌트 레벨 간의 통신 방법

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

Study/Vue 2022.01.19

Vue.js 시작하기 04. 컴포넌트 통신방식

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

Study/Vue 2022.01.19