Vue instance

vue instance 란
인스턴스는 Vue.js로 화면을 개발하기 위해 꼭 생성해야 하는 필수 단위이다.

vue instance 생성자
Vue 생성자 함수를 이용하여 인스턴스를 생성하는 방법은 아래와 같다.

new Vue({
  // instance option properties
});

Vue 객체를 생성할 때 아래와 같이 data, template, el, methods, life cycle hook 등의 인스턴스 옵션 속성을 포함할 수 있다.

new Vue({
  // instance option properties
  template: "",
  el: "",
  methods: {}
  // ...
});

https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/

왜 vue를 생성자함수 형태로 만들어내는가?

function Vue() {
	this.logText = function() {
    	console.log('hello');
    }
}

Vue라는 생성자 함수를 이용해서 사람들이 기능과 속성들을 편하게 쓰고 하고 싶다.
vm으로 객체를 찍어낼 때마다 미리 정의한 logText 호출 가능.
미리 정의된 함수를 매번 사용가능하다.
생성자 함수로 vue에서 api와 속성들을 정의해놓고 재사용하게 되는 패턴 -> new Vue를 사용하는 이유

기본적으로 인스턴스에서 사용할 수 있는 속성과 api는 다음과 같다.

new Vue({
	el: ,
  	template: ,
  	data: ,
  	methods: ,
  	created: ,
	watch: ,
})

• el: 인스턴스가 그려지는 화면의 시작점(특정 html 태그)
• template: 화면에 표시할 요소 (html, css 등)
• data: 뷰의 반응성(reactivity)가 반영된 데이터 속성
• methods: 화면의 동작과 이벤트 로직을 제어하는 메서드
• created: 뷰의 라이프 사이클과 관련된 속성
• watch: data에서 정의한 속성이 변화헀을 때 추가 동작을 수행할 수 있게 정의하는 속성