Vue 인스턴스

Vue 인스턴스란 Vue로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본단위이며, SPW를 뒤에서 움직이게 하는 실체이다.
인스턴스를 생성하기 위해선 new Vue 라는 생성자를 호출해야 한다.

• Vue 인스턴스 작성
  new Vue({ Vue 인스턴스 내용 })
  또는
  var 변수명 = new Vue({ Vue 인스턴스 내용 })
  -> new Vue 생성자를 이용하여 Vue 인스턴스를 생성한 뒤, ({ })이 안에 Vue 인스턴스 내용을 입력한다.
  Vue 인스턴스 (내용)에는 먼저, "el 옵션" 과 "data 옵션"이 있다.
  

• el 옵션
  어떤 html 요소와 연결할지 지정한다. html중에 <태그명 id = "ID명"> 이라는 요소를 작성해 두고, el 옵션으로 el : "ID명" 으로 지정하는 것으로 그 요소와 연결시킨다.

• data 옵션
  어떤 데이터가 있는지 지정한다. data : {데이터 부분} 에서 데이터 부분 영역에 "<프로퍼티명> : <값>" 과 같은 형식으로 작성한다. 이렇게 작성하는 것 만으로 데이터가 만들어진다. 데이터가 복수인 경우 , 로 구분하여 나열한다.
  Vue.js 에서는 데이터를 '프로퍼티' 라고 한다.

💻 Vue 인스턴스 작성(el, data 옵션)

<div id = "ID 명"> // <태그명 id = "ID명"> 에서, 태그는 범위를 한정지을 수 있는 <div> 태그를 사용하는 것이 좋다. 
</div>

new Vue({
	el : "#ID 명",
	data : { 프로퍼티명 : 값, 프로퍼티명 : 값
	}
})

el, data 외에도 Vue 인스턴스에는 여러가지 종류가 있다.

new Vue ({
el : 어느 html 요소를 연결할 것인가
data : 어떤 데이터인가
methods : 어떤 처리를 하는가
computed : 어느 데이터를 사용하여 계산하는가
watch : 어느 데이터를 감시하는가
})