핵심 라이브러리는 view layer에만 초점을 맞춰 다른 라이브러리나 기존 프로젝트와의 통합이 쉬움
React와 많은 공통점이 있음
- 가상 DOM 활용
- 반응형, 조합 가능한 컴포넌트 제공
- 코어 라이브러리에만 집중하고, 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리가 있음
- vue: 코어 라이브러리
- vuex: Flux에서 영감을 받은 상태 관리
- vue-router: SPA를 위한 라우팅 시스템
MVVM 패턴 (Model - View - ViewModel 패턴)
1. view
view는 윈도우, 페이지, 유저 컨트롤, 데이터 템플릿과 같은 비주얼 엘리먼트입니다. view는 view에 포함된 컨트롤들을 정의하고, 그것들의 비주얼 레이아웃과 스타일링을 정의합니다.view는 DataContext property를 통해 view model을 참조합니다. view 내부의 컨트롤들은 그 property들에 바인딩된 데이터이며, view model에 의해 노출된 커맨드들입니다.view는 view와 view model 간의 데이터 바인딩 동작을 커스터마이징할 수 있습니다. 예를 들어, view는 value converter 를 사용해 데이터를 UI 에 출력할 형식으로 변환하거나, 유효화 규칙을 사용하여 사용자에게 입력 데이터에 대한 부가적인 유효성 검사를 제공할 수도 있습니다.view는 view model에서의 상태 변화나 UI 와 사용자의 인터랙션에 의해 발생된 애니메이션이나 트랜지션과 같은 UI 비주얼 behavior를 정의하고 다룹니다.뷰의 코드-비하인드는 XAML 에서 표현하기 어려운 비주얼 behavior를 구현하기 위해서 UI 로직을 정의하거나, view에서 정의된 특정 UI 컨트롤들에 대한 직접적인 참조를 요청할 수도 있습니다.2. view model
view model은 비가시적인 클래스이며, WPF 나 실버라이트 기저 클래스를 상속하지 않습니다. 그것은 유스케이스나 응용프로그램에서의 사용자 태스크를 지원하기 위해서 요구되는 프리젠테이션 로직을 캡슐화합니다. view model은 view와 model과는 별개로 테스트 가능합니다.view model은 일반적으로 view에 대한 직접적인 참조를 하지 않습니다. 그것은 view가 바인드할 수 잇는 property와 커맨드들을 제공합니다. INotifyPropertyChanged 와 INotifyCollectionChanged 인터페이스를 통한 변경 통지 이벤트를 통해 view에 어떠한 상태 변경들을 통지합니다.view model은 view와 model의 상호작용을 조직화합니다. 그것은 데이터를 변환하고 조작해, 데이터가 view에 의해 소비되기 쉬운 형태로 만들어질 수 있으며, model상에서 제출되지 않는 부가적인 property들을 구현할 수도 있습니다. 또한 IDataErrorInfo나 INotifyDataErrorInfo 인터페이스들을 통해 데이터 유효성을 구현할 수도 있습니다.view model은 view가 가시적으로 사용자에게 표현할 수 있는 논리적 상태를 정의할 수 있습니다.3. model
model 클래스들은 응용프로그램의 데이터 로직 및 비즈니스 로직을 캡슐화하는 비가시적 클래스들입니다. 그것들은 응용프로그램의 데이터들을 관리하고 요청된 비즈니스 룰과 데이터 유효성 로직을 캡슐화함으로써 그 데이터의 일관성과 유효성을 보장할 책임을 가집니다.model 클래스들은 view나 view model에 대한 직접적인 참조를 가지지 않습니다. 그리고 그것들이 구현되는 방식에 대한 종속성을 가지지 않습니다. model 클래스들은 일반적으로 property 변경 통지 이벤트 및 컬렉션 변경 통지 이벤트들을 제공하는데, 이는 INotifyPropertyChanged 인터페이스와 INotifyCollectionChanged인터페이스를 통해 지원됩니다. 이는 그것들이 view에 쉽게 데이터 바인딩되도록 해 줍니다. 오브젝트에 대한 컬렉션을 표현하는 model 클래스들은 ObservableCollection<T> 클래스를 상속합니다.model 클래스들은 일반적으로 IDataErrorInfo 나 INotifyDataErrorInfo 인터페이스를 통해 데이터 유효화나 에러 리포팅을 제공합니다.model 클래스들은 일반적으로 데이터 접근 및 캐싱을 캡슐화하는 서비스나 저장소와 함께 사용됩니다.
[참조]
https://kr.vuejs.org/v2/guide/
http://lifeisforu.tistory.com/289
가볍게 테스트 해 볼수 있는 웹 사이트
https://jsfiddle.net/chrisvfritz/50wL7mdz/