[Vue.js] 뷰 인스턴스 (Vue Instence)

뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다.

 

new Vue({
  //뷰 속성
  });

위의 코드가 뷰 인스턴스를 생성하는 기본적인 형식이다.

이때 주의해야 할 점은 Vue에서 V가 대문자라는 점이다.

중괄호 안에는 뷰 인스턴스 옵션 속성(el, data, components, lifecyclehook 등)을 추가할 수 있다.

---

뷰 인스턴스 옵션 속성

• el : 뷰 인스턴스가 적용될 DOM의 범위이다. 적용할 DOM의 아이디나 클래스 값을 기술한다. 기술 방식은 css나 Jquery의 선택자 방식과 동일하다.

el: '#app'  //id값이 app인 DOM을 뷰의 적용범위로 한다.

el: '.app' //class값이 app인 DOM을 뷰의 적용범위로 한다.

 

• data : data속성은 반드시 함수여야 하며 el 속성이 지정한 유효 범위에서 데이터를 전달하는 역할을 한다.

{{ message }}	//el이 지정한 유효범위 내에 {{ }}에 data 속성에 있는 이름을 바인딩하여 사용할 수 있다.

data : (
  message : 'Hello Vue'
 )

 

• template: 화면에 표시할 HTML, CSS,등의 마크업 요소를 정의하는 속성이다. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.
• methos : 화면 로직 제어와 관련된 메서드를 정의하는 속성
• life cycle : 뷰의 생명주기에 따라 총 8개의 속성이 각 각 실행되며 각 단계에 적절한 로직을 추가하여 사용할 수 있다. 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅이라고 한다.

 

---

뷰 인스턴스의 유효 범위

뷰 인스턴스의 유효범위는 el속성과 밀접한 관계가 있으며 HTML의 특정 범위 안에서만 뷰가 적용되는 것을 뜻한다.

<div id = "app">
    {{ message }}
</div>

위와 같은 HTML 코드에서 뷰 인스턴스를 생성하고 유효 범위를 적용하면 아래의 코드가 된다.

new Vue({
  el: '#app',
  data: (
    message : 'Hello Vue.js!'
  )
 });

el 속성에서 지정한 값에 따라 html 코드에서 뷰가 부착될 위치가 달라진다. 

위 코드에서 el은 #app이기 때문에 div id = "app"가 유효 범위가 된다.

또한 div 태그 내에 {{ message }} 속성은 뷰 인스턴스에 data 속성에 바인딩되어 브라우저에서 실행하면 

Hello Vue.js! 가 출력 된다.

 

 

 

 

본 포스팅은 필자가 공부한 것을 정리해놓은 것으로 오류가 존재할 수 있습니다.

참고: Do it! Vue.js 입문 , 뷰 레퍼런스 https://kr.vuejs.org/