Vue - 기본

Instance

• 뷰 개발 시 생성해야하는 필수 코드
• 인스턴스 생성시 Vue 개발자 도구에서 Root 컴포넌트로 인식
• el: app이라는 ID를 가진 태그를 찾아서 인스턴스를 붙여준다.
  • 태그에 인스턴스를 붙여주면 view의 기능과 속성을 조작 가능
• data: 뷰의 반응성(Reactivity)이 반영된 데이터 속성
• template : 화면에 표시할 요소 (HTML, CSS 등)
• methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
• created : 뷰의 라이프 사이클과 관련된 속성
• watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성

 

 

Components

• 코드 재사용
• 전역 컴포넌트, 지역 컴포넌트
• 하나의 인스턴스에 컴포넌트를 붙이는 방식으로 서비스 구현

통신

뷰 컴포넌트는 각각의 고유한 데이터 유효범위를 갖고 있음

• Props, Emit

 

 

Props

• 컴포넌트 간에 데이터를 전달
• 상위 컴포넌트에서 하위 컴포넌트로 데이터를 내려보냄

 

 

Enit

• 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 올림

 

 

Router

• 싱글페이지 애플리케이션을 구현할때 사용할 수 있는 라이브러리

Vue 3.x 버전

npm i vue-router@next or npm install vue-router@next

 

Vue 2.x 버전

npm i vue-router or npm install vue-router

 

참고

https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/

Vue Router: A Tutorial for Vue 3 | Vue Mastery

 

Axios

npm install axios

• 뷰에서 권고하는 HTTP 통신 라이브러리
• Promise 기반
• API 다양
• 문서화가 잘 되어있음

 

Template Syntax

화면을 조작 하는 방법

• 데이터 바인딩, 디렉티브

 

데이터 바인딩

• 인스턴스에서 정의한 속성들을 화면에 표시

 

디렉티브

• 화면의 요소를 더 쉽게 조작하기 위한 문법
• v-model, v-if, v-for, v-bind, v-on, 등

 

Computed

특정 데이터의 변경사항을 실시간으로 처리

• 캐싱을 이용하여 데이터의 변경이 없을 경우 캐싱된 데이터 반환함
• 주로 단순한 계산에 사용
• 텍스트, 연산, Valitaion 등

 

Watch

특정 데이터의 변화를 감지하고 특정 로직을 자동으로 수행

• 주로 무거운 로직에 사용
• 데이터 요청