Vue.js

MVVM 패턴

Model - View - ViewModel의 패턴

Vue 인스턴스

• Vue 생성자로 만든 객체

var app = new Vue({ ... })

옵션 객체

• Vue 인스턴스를 생성할 때 전달하는 속성들을 담은 객체

el, data, computed 옵션

data 옵션

• data 옵션에 주어진 모든 속성 : Vue 인스턴스 내부에서 직접 이용되지 않고, Vue 인스턴스와 Data 옵션에 주어진 객체 사이에 프록시를 두어 처리

• Vue 인스턴스가 관찰하는 데이터 객체를 의미, 변경 사항은 즉시 감지됨

el 옵션

• Vue 인스턴스에 연결할 HTML DOM 요소를 지정

• 여러개의 요소에 지정할 수 없음

el : '#simple'

• 실행 도중 동적으로 Vue 인스턴스와 HTML 요소를 연결할 수 있지만, 가능하다면 el 옵션은 Vue 인스턴스를 생성할 때 미리 지정할 것을 권장
• Vue 인스턴스가 HTML 요소와 연결되면, 도중에 연결된 요소를 변경할 수 없기 때문

computed 옵션

• computed 옵션에 지정한 값이 함수였어도, Vue 인스턴스는 프록시 처리하여 마시 속성처럼 취급
• 종속된 값에 의해 결과값이 캐싱됨

메서드

• Vue 인스턴스에서 사용할 메서드를 등록하는 옵션

• 등록된 메서드는 Vue 인스턴스를 이용해 직접 호출할 수도 있고, 디렉티브 표현식, Mustache 표현식에서도 사용할 수 있음

• 결과값이 캐싱되지 않음

관찰 속성

• 긴 처리 시간이 필요한 비동기 처리에 적합

  • 외부 서버와의 통신 기능

• watch 옵션을 이용해 관찰 속성을 등록

[출처] Quickstart Vue.js