[Vue.Js] 3. Vue.Js에서의 인스턴스를 알아 보자!

Vue에서 인스턴스란  Vue 생성자를 사용하여 생성된 개체를 의미합니다.

그러면 생성된 인스턴스는 고유한 데이터, 메서드 및 옵션을 가질 수 있고 이를 통해 화면에 원하는 것을 보여줄 수 있게 됩니다.

 

Vue가 가지는 여러 속성이 있는데 속성에 관해서는 사용할 때 설명드리겠습니다.

 

일단 이전 예제에서 new Vue({~})를 통해 Vue 인스턴스를 만들어 사용했습니.

이전에 만든 index.html을 열고 F12를 눌러 개발자 도구를 통해 html코드를 확인해 볼 경우

{{ message }}로 입력했던 부분이 아래의 new Vue 안의 message뒤에 있는 ‘Hello Vue!’가 되어있는 것을 확인하실 수 있습니다.

또한 확장 프로그램인 Vue 아이콘이 활성화 됨을 확인할 수 있으며

F12를 통해 개발자 도구로 가면 Vue탭이 생성되어 있습니다.

거기서 아래의 이미지와 같이 <Root>를 클릭하시면 우측에 message: “Hello Vue!”가 출력 됨을 알 수 있습니다.

이제 Vue인스턴스의 구조를 알아보겠습니다.

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

Vue안에 있는 el 속성은 html 요소(element)에 Vue 인스턴스를 부착할 때 사용되며 여기선 css-selector를 통해 선택 할 수 있습니다.

#은 html에서 아이디 값을 지정할 때 사용되는 문자입니다.

고로 ‘#app’은 Vue코드 위에 있는 "<div id=”app”>"을 가르키는 것을 알 수 있습니다.

아래의 그림과 같이 el 속성을 통해 app이라는 div에 Vue 인스턴스가 부착되고 Vue 인스턴스의 data(Hello Vue!)속성이 app의 message를 대체하는 것입니다.

여기서 Vue 인스턴스의 범위는 app(div) 영역 내부만 입니다.

 

Vue에서 el속성으로 app에 접근하고 {{message}}를 data속성의 message의 값으로 변경했습니다.

 

이렇게 Vue 인스턴스를 활용하여 화면에 보여지는 요소로 사용되어 여러 속성을 활용하여 변경하고 이벤트를 줄 수 있습니다.

 

다음에는 Vue 인스턴스의 life cycle을 알아보고 해당 사이클에 어떠한 이벤트가 발생되야 좋은지 알아보겠습니다.