[Vue.js] 2.Vue.js 인스턴스

 

■인스턴스

 1. 뷰 인스턴스 소개

뷰 인스턴스 : 인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드입니다. 

 

º 인스턴스 생성

인스턴스 생성

인스턴스를 생성하고 나면 아래와 같이 변수안에 인스턴스를 담을 수 있다.

변수에 인스턴스 할당

그렇다면 해당 인스턴스를 어떻게 사용할 것인가?

1) 인스턴스를 생성해주고

2) 인스턴스 - 태그를 id값으로 연결해준다음에 속성값을 할당해주면 해당 태그는 인스턴스에서 사용가능.

뷰 인스턴스 - 태그 연결

 2. 인스턴스 옵션 속성

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

Vue인스턴스 옵션

⊙ el : 인스턴스가 그려지는 화면의 시작점(특정 HTML 태그)

⊙ template: 화면에 표시할 요소(HTML, CSS 등)

⊙ data: 뷰의 반응성(Reactivity)가 반영된 데이터 속성

⊙ methods: 화면의 동작과 이벤트 로직을 제어하는 메서드

⊙ created: 뷰의 라이프 사이클과 관련된 속성

⊙ watch: data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성 

 

등등

 

 

<참고>

1. https://kr.vuejs.org/v2/guide/instance.html

Vue 인스턴스 — Vue.js

 

2. https://www.inflearn.com/course/Age-of-Vuejs

불러오는 중입니다...

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

Object.prototype.constructor