티스토리 뷰

Vue

Vue - Instance

김관장 2022. 5. 30. 18:05

1. Vue - Instance ?

  • 인스턴스는 뷰를 개발할 때 필수로 생성해야 하는 코드입니다.
  • 인스턴스에는 사용할 수 있는 여러가지 속성과 API가 있습니다.
  • 인스턴스는 아래와 같이 생성할 수 있습니다.
let vm = new Vue();

개발자 도구에서 확인해본 Vue 인스턴스

 

2. Vue - Instance 속성, API들

new Vue({
  el: ,
  template: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});
  • el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 테그)
  • template : 화면에 표시할 요소 (HTML, CSS .. )
  • data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성
  • methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
  • created : 뷰의 라이프 사이클과 관련된 속성
  • watch: data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성

 

* Reactivity (Reactivity 관련 내용은 공부해서 따로 글을 작성해보겠습니다!)

  • Reactivity란 한글로 나타내면 '반응성'이라는 뜻입니다.
  • 뷰가 데이터 변화를 감지하고 자동으로 화면을 갱신하는 특성을 말합니다. 

 

3. Instance 실전 예제!

<body>
	<!-- vue를 쓰기위한 라이브러리 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    

    <div id="app"></div>

    <script>
    
        let vm = new Vue({
            el: '#app', //id가 app인 부분을 찾아 해당 부분에 그려짐. 
            template: `<div>Vue instance !! {{message}}</div>`, //그려질 html, data의 message가 나타나도록 해봤다!
            data: {
                message: 'hello ~ ' //데이터!
            }
        });
        
    </script>

</body>
  • id가 app인 div 하나를 정의합니다.
  • script 테그를 열고 Vue 인스턴스를 정의합니다.

template 속성의 요소가 그려진 것이 확인 가능!

 

 

뷰에서 가장 기초적인 인스턴스를 만드는 방법이다! 정독하자!!

 

 

🔗 참고한 글

 

Cracking Vue.js

 

joshua1988.github.io

저작자표시

'Vue' 카테고리의 다른 글

Vue - router  (0) 2022.06.10
Vue - method  (0) 2022.06.10
Vue - props / event emit  (0) 2022.06.08
Vue - Component  (0) 2022.06.03
Vue - Vue 란?  (0) 2022.05.26
댓글