Vue.js 시작하기 - 인스턴스

뷰 인스턴스

뷰 인스턴스는 뷰를 사용하려면 꼭 필요한 코드이다.
주로 변수를 선언해서 변수에 담아 사용한다.
뷰 인스턴스 생성 후에 콘솔 로그를 사용하면 인스턴스 안에 어떤 속성과 api(기능)를 가지고 있는지 확인할 수 있다.

뷰 인스턴스 생성

변수를 선언하고 Vue 객체를 생성해 변수에 인스턴스를 담는다.
el은 타겟 element를 의미하며, 인스턴스를 생성하고 el에 타겟 element를 지정해주지 않으면 인스턴스에 추가한 속성이나 기능을 사용할 수 없다.

//vm 변수에 Vue 객체 생성
var vm = new Vue({
  el : '#app',
  data: {
    message : 'hi'
  }
});

자바스크립트 생성자 함수로 보는 뷰 인스턴스 생성 이유

생성자 함수를 통하면 함수를 이용해서 어떤 정보를 담은 객체를 생성할 수 있다.

//생성자 함수의 객체 생성 패턴
//함수 명 첫번째 대문자 -> 암묵적으로 생성자 함수임을 의미한다.
function Person (name, job){
  this.name = name;
  this.job = job;
}

변수에 생성자를 담아 객체를 생성할 수 있다.

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

p를 콘솔에 찍었을 때

new Vue()를 사용하는 이유
생성자 함수에 미리 함수를 정의해두면 함수의 내용을 매번 만들 필요가 없고,
생성자 함수를 호출하면서 생성자 함수 안의 미리 정의된 함수를 가져다 사용할 수 있다.

new Vue()를 콘솔에 찍었을 때
Vue 함수 안에 미리 정의된 속성과 api(기능)을 확인할 수 있다.

뷰 인스턴스 옵션 속성

뷰 인스턴스에는 여러가지 옵션(속성)이 있다.
Vue()안에 객체리터럴의 형태로 속성을 추가하여 사용한다.
따로 객체리터럴을 담은 변수를 선언하여 Vue 안에 넣어 사용해도 된다.

//var options = {}

//Vue()안에 객체리터럴의 형태로 속성을 추가한다.
var vm = new Vue({
  el : '#app',
  data: {
    message : 'hi'
  },
  methods : {

  }
});