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 옵션)

  <h1>배열로 값을 표시하는 예제</h1>
  <div id="app"> <!-- Model과 View를 연결-->
    <p>{{ myArr }}</p> <!-- html로 표시되는 요소 [view]-->
    <p>{{ myArr[4] }}</p> <!-- html로 표시되는 요소 [view]-->
  </div>
  <script>
    new Vue({
      el : '#app' , // 어느 Html요소(View)를 연결할 것인가? 
      data : { // Vue 안에 준비된 데이터 모델 [Model]
        myArr : ['태국', '프랑스', '스페인', '로마', '이탈리아','일본', '중국','몽골']
      }
    })
  </script>

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

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