인스턴스 소개
ES6를 기점으로 이전에는 생성자 함수를 이후에는 클래스 생성자로 틀을 만들고, 하나의 틀로 여러 개의 객체를 생성하는데, 이 각각의 것이 인스턴스이다.
인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({ //new 연산자로 뷰 인스턴스 생성
el: "#app",
data: {
message: "hi",
},
});
</script>
</body>
인스턴스 안에는 Vue팀에서 미리 정의한 속성과 메서드(내장 API)가 있기 때문에 화면을 빠르게 개발할 수 있다.
인스턴스 옵션 속성
new Vue({
el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그),
template : 화면에 표시할 요소 (HTML, CSS 등),
data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성,
methods : 화면의 동작과 이벤트 로직을 제어하는 메서드,
created : 뷰의 라이프 사이클과 관련된 속성,
watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성
});
Front-End Developer