Vue.js 초급 공부 Part I - Plugin install & Component

https://github.com/joshua1988/learn-vue-js

강의 코드 깃허브 

GitHub - joshua1988/learn-vue-js: 인프런 Vue.js 시작하기 강의 리포지토리

 

VsCode Plugin install list

- Vetur

- Night Owl => 설정 색 테마 변경

- Material Icon Theme => 설정 아이콘 테마 변경 

- Live Server

- ESLint

- Prettier

- Auto Close Tag

- Atom Keymap

 

Vue ? MVVM 패턴의 뷰 모델(ViewModel) 레이어에 해당하는 화면단 라이브러리

 

Object.defineProperty( 대상 객체, 객체의 속성, {

정의할 내용

});

 

- 객체에 동작을 재정의하는 API 

 

Vue Component ?

- 컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능

- 재사용성이 올라가고 빠르게 화면을 제작할 수 있다

- 인스턴스를 생성하면 개발자 도구에서 Root 컴포넌트로 인식한다

- Vue.component('컴포넌트 이름', 컴포넌트 내용):

전역 컴포넌트 사용방법

지역 컴포넌트 사용방법

 

컴포넌트 통신 방식 ?

- 뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖는다 

- 상위에서 하위로는 데이터를 내려줌 : 프롭스 속성

- 하위에서 상위로는 이벤트를 올려줌 : 이벤트 발생 

 

props 속성

Props 속성의 특징 

- 위에 데이터를 바꾸면 하위에서도 데이터가 바뀐다

 

Event emit

Event emit Console test