[Vue 2 기초] 인스턴스

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

 

인스턴스는 기본적으로 new Vue() 로 생성한다.(Vue 2 기준)

 

<div id="app"></div>
 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',     // 인스턴스가 그려지는 화면의 시작점
        template: ,     // 화면에 표시할 요소 (HTML, CSS 등)
        data: ,         // 뷰의 반응성(Reactivity)이 반영된 데이터 속성
        methods: ,      // 화면의 동작과 이벤트 로직을 제어하는 메소드
        created: ,
        watch: ,
    });
</script>

 

vue에서 사용할 수 있는 속성과 API는 위와 같이 el, template, data, methods, created, watch 등이 있다.

 

*인스턴스 내 this

인스턴스 내에서 this는 인스턴스 객체 자체를 가르킨다.

var Vue = {
    el: '',
    data: {
        num: 10,
    },
    methods: {
        getNumber: function(){
            console.log(this.num);  // 10 출력
        }
    }
}

 

 

 

---

참고

인프런 'Vue.js 시작하기 - Age of Vue.js' 강좌