Vue.js 시작하기 - 배운내용 정리

안녕하세요.

 

https://www.inflearn.com/course/Age-of-Vuejs/dashboard

Vue.js 시작하기 - Age of Vue.js - 인프런

인프런에 올라와있는 캡틴판교님의 Vue.js 시작하기를 마무리하면서 마지막 내용정리를 하겠습니다.

강좌를 들으면서 노트한 내용들은 깃헙에 올려두었습니다.

 

Vue.js, React.js 왜 기존의 javascript 를 놔두고 이것을 사용할까 라는 생각이 들었습니다.

가장 큰 이유는 Reactivity 라고 이 강좌에서는 알려주고 있습니다. 

 

Reactivity

설명

- 핵심 기능 데이터에 대한 변화를 Vue.js 에서 감지해서 화면에 반영

- 화면 조작에 대한 API, 속성들을 Vue.js 에서 제공

- 제공되는 여러 라이브러리들을 활용하여 생산성을 높일 수 있음

 

Instance

- Vue.js 로 개발할 때 필수로 생성해야 되는 단위 입니다.

- 인스턴스 안에 내용들을 추가함으로써 화면들을 구성해나갈 수 있습니다. ex) data: , methods: , computed . . .

 

Component

지역,전역컴포넌트

싱글파일컴포넌트

- 화면의 영역을 구분해서 개발하는 방식입니다.

- 컴포넌트 개발이 현재 웹 프레임워크의 가장 중요한 개념입니다.

- 대부분의 UI 가 컴포넌트 기반으로 개발되어있습니다.

- 컴포넌트로 개발 시 재사용성이 높아진다.

 

Component 통신

- 컴포넌트로 개발했을 때 데이터의 흐름제어 및 규칙제한

- props 상위 컴포넌트 -> 하위 컴포넌트

- event emit 하위 컴포넌트 -> 상위 컴포넌트

 

HTTP 통신 라이브러리

- axios

 

템플릿 문법

- 데이터 바인딩(Reactivity 와 비슷한 개념) ex) v-bind:

    데이터가 변경되면 그것을 화면에 바인딩 해주는 역할

- 뷰 디렉티브(화면을 제어할 수 있는) ex) v-if, v-for, v- . . .