[Vue.js] Vue 인스턴스

모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작!

var test = new Vue({
            // 옵션
        })

Vue 인스턴스를 생성할 때는 options객체를 전달해야 한다.

Vue 앱은 new Vue를 통해 만들어진 루트 Vue 인스턴스로 구성되며, 선택적으로 중첩이 가능하고 재사용 가능한 컴포넌트 트리로 구성된다.

데이터와 메소드

Vue 인스턴스가 생성될 때 data 객체에 있는 모든 속성이 Vue의 반응형 시스템에 추가된다.

각 속성 값이 변경될 때마다 Vue는 반응하여 새로운 값으로 업데이트된다.

var test = new Vue({
	data: data,

	// 인스턴스 생성시 존재한 것들만 반응형
	// 나중에 필요할 것임을 알고 있으며,
	//빈값이나 존재하지 않는 상태로 시작하는 속성은 다음과 같이 초기값을 지정해줘야함

	newStr: '',
	newCnt: 0,
	newArr: [],
	newBoolean: false,
});

// 인스턴스에 있는 속성은 원본 데이터 값을 반환 => TRUE
test.a === data.a;

// 인스턴스에 있는 속성값 변경시 원본 데이터에도 영향을 미친다
test.a == 2;
data.a; // => 2

 

 

 

https://kr.vuejs.org/v2/guide/instance.html

Vue 인스턴스 — Vue.js