뷰로 개발할 때 필수로 생성해야 하는 코드이자 단위! 뷰를 공부할 때 제일 처음 배워야한다.

인스턴스 생성

인스턴스 생성 방법은 기본적으로 아래와 같다. 인스턴스를 생성하면 개발자 도구에서 Root 컴포넌트로 인식한다.

new Vue();

인스턴스를 생성한 후 콘솔에 아래와 같이 입력하면 인스턴스 안에 어떤 속성과 API가 있는지 확인할 수 있다.

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

제공해주는 기능과 속성이라고 이해하면 된다.

인스턴스와 생성자 함수

인스턴스 생성자 함수를 이용하는 방법

함수 이름이 대문자로 시작하는 경우, 암묵적으로 생성자 함수를 의미한다. Person이라는 생성자 함수에 이름과 직업을 인자로 받도록 선언한다.

function Person(name, job) {
    this.name = name;
    this.job = job;
}

함수를 이용해 p 라는 객체에 새로운 정보를 담는다.

var p = new Person('josh', 'developer');

뷰를 생성자 함수를 만들어 사람들이 편하게 쓰도록 만든다. 생성자 함수로 API, 속성을 정의해두고 불러다 쓰거나 재사용하는 패턴으로 작업을 하게 된다.

📖 참고 자료

• MDN 생성자 함수 설명 문서
• MDN Prototype 설명 문서

인스턴스 옵션 속성

생성자 함수로 생성, 재사용할 수 있는 옵션과 속성에 대해 학습한다.

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