[Vue.js] 인스턴스(instance)

인스턴스 생성

new Vue();

 

인스턴스는 위와 같이 생성한다.

인스턴스 안에는 미리 만들어져 있는 메소드(API)와 정의된 속성이 있다. 미리 정의된 것들을 사용해 빠르게 개발을 할 수 있다. 인스턴스에서는 간단한 템플릿 렌더링부터 데이터 바인딩, 컴포넌트 등 많은 동작이 수행 된다.

 

인스턴스의 속성과 API

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

el : element. 화면의 시작점. 특정 HTML태그. Vue가 실행될 HTML의 DOM요소를 지정한다.

 

template : 화면에 표시할 요소. HTML, CSS등

 

data : 뷰의 반응성이 반영된 데이터 속성. 

 

method : 화면의 동작과 이벤트 로직을 제어하는 메소드. data객체 등을 사용해서 계산된 값을 리턴한다. 캐싱이 되지 않고 호출될 때 마다 계속 함수를 실행한다.

 

created : 뷰의 라이프사이클과 관련된 속성

 

watch:data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성. 지정된 변수의 값이 변경되었을 때 정의된 함수를 실행시킨다..

 

 

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

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //객체를 따로 변수에 담는 것 보다는 객체 자체를 통채로 넣어주는 것을 선호한다. 리터럴. 
        //생성자 안에는 객체가 들어가며, 객체 표기법으로는 객체 자체를 넣는 것을 사용한다. 
        let vm = new Vue({
            el:'#app',
            data: {
                message:'hi'
            }
            //body에서 app이라는 id를 가진 태그를 찾아서 인스턴스를 붙이겠다는 의미
            //인스턴스를 붙여두면 해당 태그 내에서 vue의 요소를 사용할 수 있게 된다. 
        });

    </script>