[Vue] Vue 기초 개념

SPA(Single Page Application)

- 최초로 웹사이트에 접속할 때 모든 페이지에 필요한 자원(javascript, css, img..)등을 로딩함

- 페이지 이동 시 변경이 필요한 부분만 렌더링됨

 

Vue의 핵심 기능

1. 선언적 렌더링

표쥰 HTML을 템플릿 문법을 확장하여 JavaScript 상태를 기반으로 화면에 출력될 HTML을 선언적으로 작성할 수 있음

2. 반응성

JavaScript 상태 변경을 추적하고 변경이 발생하면 DOM을 효율적으로 자동으로 변경해줌

 

Vue의 특징

1. 접근성 : 직관적

2. 유연성 : Component로 재사용성 높임

3. 고성능 : Angular와 React의 장점인 데이터 바인딩, Virtual Dom을 모두 수용

 

MVVM Pattern

MVVM 패턴

Model : 순수 자바스크립트 객체(도메인 데이터)

View : 웹페이지 DOM(유저 인터페이스)

ViewModel : DOM의 변화를 감지하고 데이터를 바인딩해줌(상태와 연산)

 

Component

재사용할 수 있는 구조로 개발하여 import하여 사용

 

Data binding

양방향 데이터 바인딩을 지원함

모델에서 데이터를 정의한 후 View에 연결하면 모델, 뷰 중 한쪽의 데이터가 변경되면 다른 쪽도 자동으로 변경된 내용이 반영됨