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 속성으로 지정한 선택자내에서만 접근이 가능합니다.