[Vue.js] #2 인스턴스

in Vue.js on Web, Vue.js
[Vue.js] #2 인스턴스

Vue.js 시작하기 - Age of Vue.js 강의 섹션 2. 인스턴스

인스턴스란

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

new Vue(); // 생성
var vm = new Vue(); // 할당(vm은 viewModel의 약자)
console.log(vm); // 인스턴스 속성 및 API 확인

인스턴스와 생성자 함수

아래 예제 코드를 통해 Vue 의 기능을 체감해보자.

<!-- /playground/instance.html -->
<body>
    <div id="app"></div>

    <!-- Vue cdn -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var vm = new Vue({
            // id가 app인 태그를 찾아서 인스턴스를 붙입니다.
            el: '#app', // el은 element의 약자입니다.
            data: { 
                message: 'hi'
            }
        });
    </script>

</body>

Live Server 에서 실행하고, 아래 코드를 콘솔 창에 입력해보자.
참고로, 함수 명을 대문자로 적으면 이는 곧 생성자임을 나타낸다.

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

var vm = new Vue();
vm.logText();

1

Vue 생성자에서 logText() 라는 함수를 정의하였다.
이제 Vue 생성자를 통해서 생성되는 객체는 모두 logText() 함수를 재사용할 수 있다.

인스턴스 옵션 속성

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

  // 등등...
})

인스턴스 옵션의 속성은 키:값 형태로 이루어져있다.

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

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        
        var options = {
          el: '#app',
          data: {
            message: 'hi'
          }
        }

        var vm = new Vue(options);
    </script>

</body>

위 코드에서는 options 라는 객체를 정의하고 이를 Vue 인스턴스 안에 담았다.
하지만 강의에서는 이렇게 말고, 아래와 같은 방법을 추천하였다.

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

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        var vm = new Vue({
          el: '#app',
          data: {
            message: 'hi'
          }
        });

    </script>

</body>

위와 같이 가독성을 위하여 객체 리터럴로 선언하여 사용하기를 추천하였다.

#2 인스턴스는 여기까지다. 다음 강의에서는 컴포넌트에 대해서 공부해보자.

© 2022. All rights reserved.