02. 인스턴스

뷰 인스턴스

인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드

인스턴스 생성

new Vue();

인스턴스를 생성하고 나면 아래와 같이 인스턴스 안에 어떤 속성과 API가 있는지 콘솔창에서 확인 할 수 있음

var vm = new Vue();
console.log(vm);

인스턴스에서 사용할 수 있는 속성 API

new Vue({
    el: ,
    data: ,
    template: ,
    methods: ,
    created: ,
    watch: 
    });

el: 인스턴스가 그려지는 화면의 시작점 (특정HTML태그),
data: 뷰의 반응성(Reactivity)가 반영된 데이터 속성,
template: 화면에 표시할 요소 (HTML, CSS등),
methods: 화면의 동작과 이벤트 로직을 제어하는 메서드,
created: 뷰의 라이프 사이클과 관련된 속성,
watch: data에서 정의한 속싱이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성

<div id="app">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hi'
        }
    });
</script>