Instance (인스턴스)

Vue의 Instance(인스턴스)는 화면을 개발하기 위해 필수적으로 생성해야 하는 기본단위입니다.
Vue의 Instance는 아래와 같은 형식을 가집니다.

<div id="app">
    {{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.min.js"></script>
<script>
    new Vue({
        el : '#app', 
        data : {
            message : 'Hello Vue.js!' 
        },
        methods : {},
        template :{}
    });
</script>

  • el 속성 – 화면이 그려지는 시작점
  • data 속성 – 인스턴스에서 사용하는 데이터
  • methods 속성 – 로직 제어와 같은 함수를 정의하는 속성. 이벤트 처리, 화면동작 등
  • template 속성 – 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 표시 가능

위 소스에서 new Vue로 시작하는 형식이 뷰의 Instance 형식입니다.
화면이 그려질 요소는 #app 선택자를 사용했고, 뿌려지는 data는 message를 지정해 주었습니다.
methods와 template 속성을 정의하지 않았지만 추후에 사용하게 됩니다.
Instance의 유효범위는 el 속성으로 지정한 선택자내에서만 접근이 가능합니다.