뷰 인스턴스

<인스턴스>

뷰를 개발할 때 필수로 생성해야 하는 코드

 

<생성>

new Vue();

 

var vm = new Vue();

conlole.log(vm);

 

반드시 vue 인스턴스를 엘레먼트에 붙혀서 사용해야 내용이 유효함

 

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({

    el: '#app',
    data:{
        message:'hhh'
    }

    });

 

<생성자함수>

new Vue() 를 사용하는 이유 : api와 속성들을 정의해두고 가져다 쓰거나 재사용할 수 있다. 

 

ex1 ) Vue라는 생성자 함수를 만들었을 때

function Vue(){
	this.logText = function(){
    	console.log('hell');
       }
     }

vm을 new Vue를 생성할 때마다 미리 정의한 logText가 들어있다. 

즉 미리 정의해둔 함수를 사용 할 수 있다. 

var vm = new Vue();

-> vm.logText(); 

결과 : hell

 

ex2 )

function Person(name, job){  //함수 앞 함수 이름이 대문자인경우 생성자 함수임을 뜻한다.

this.name = name;

this.job = job;

}

 

생성자 내부에 객체 자체를 넣는다. 

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor

Function - JavaScript | MDN

 

<인스턴스 옵션>

• el: element,
• template:
• data:
• method:
• created:
• watch: