Vue.js - 인스턴스

인스턴스
뷰로 개발할 때 필수로 생성해야 하는 코드
new Vue(); 와 같이 작성한다.
변수 안에 인스턴스를 담을 수 있다.

// veiw model의 약자 vm
// vm에 인스턴스를 담는다.
var vm = new Vue({
      el: '#app',
      // element의 약자
      // elemnet로 요소를 지정해 주어야 인스턴스를 사용할 수 있다. 필수!
      data: {
        message: 'hi'
      }
    });
    

일반적으로 JavaScript에서 인스턴스를 만드는 방법은 객체생성자를 이용하는 것이다.

function Person(name, job) {
    this.name = name;
    this.job = job;
}
var p = new Person('josh', 'developer');
console.log(p);
// Person {name: "josh", job: "developer"}

function Vue() {
    this.logText = function() {
        console.log('hello');
    }
}
var vm = new Vue();
vm.logText(); // hello 출력

매번 함수를 정의하는 것이 아니라 미리 정의된 함수를 가져다 쓸 수 있다.
따라서 재사용이 가능해진다.

인스턴스에서 사용할 수 있는 속성과 API는 다음과 같다.

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