[Vue.js] Vue 인스턴스와 생성자 함수

Vue 인스턴스와 생성자 함수

 

Vue 인스턴스는 아래코드처럼 변수에 담을 수 있습니다.

      var vm = new Vue({
        el: '.app',
        data: {
          message: 'nah nevermind'
        }
      });

el은 element의 약자로 Vue로 DOM(Document Object Model)을 사용하기 위해 반드시 설정이 필요합니다.

Java 객체 생성자와 동일한 생성자 함수가 있습니다

    function Person(name, job) {
        this.name = name;
        this.job = job;
    }
    var p = new Person('baekho', 'backend-engineer');

    console.log(p);

생성자 함수를 사용하는 이유는 함수 재사용을 하기 위해서 입니다. 제가 Vue 라는 객체를 생성해 내부에 메서드를 넣어두면
생성자를 호출해 팀원들이 편리하게 메서드를 사용하게 할 수 있습니다.

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

---

참고자료:

• 인프런 - 캡틴판교 Vue.js 시작하기
• MDN Prototype 설명 문서