티스토리 뷰

ICT Eng/Vue.js

[Vue.js] 03. Vue Instance

nroo 2018. 9. 1. 02:01

Vue Instance

누구나 다루기 쉬운 Vue.js 프론트 개발(인프런) - Captain Pangyo 링크

인스턴스 소개

Vue.js를 이용하여 UI 화면을 개발하기 위해서는 아래 절차를 따른다.

  • Vue.js 라이브러리를 로딩했을 때 존재하는 Vue 생성자로 인스턴스를 생성해야 한다.

1
2
3
var vm = new Vue({
    //...
})
cs

  • 풀어서 얘기하면 Vue 라이브러리 로딩 후 접근 가능한 Vue라는 기존 객체에 화면에서 사용할 옵션(데이터, 속성, 메서드 등)을 포함하여 화면의 단위를 생성한다라고 보면 된다.

  • 결론적으로 인스턴스는 뷰를 이용해서 개발하는데 가장 중요한 요소이며, 후반부에서 배우게 될 컴포넌트와도 밀접히 연관이 있는 기반 개념이다.

인스턴스 생성

  • Vue Instance 생성자

    • Vue 생성자로 인스턴스를 만드는 방법은 아래와 같다.

1
2
3
4
// vm은 ViewModel을 뜻한다.(관행적인 코딩 컨벤션)
var vm = new Vue({
  // options
})
cs

  • Vue 객체를 생성할 때 아래와 같이 data, template, el, methods, life cycle callback 등의 options를 포함할 수 있다.

    • template : 화면에 나타나는 요소들(div, p, 버튼 등)과 추가적으로 데이터 바인딩에 관한 요소들이 들어간다.

    • el : 화면이 그려지는 시작점이다. element의 약자. el에 지정한 특정 태그 부터 화면이 그려진다고 보면 된다.

    • methods : 클릭하거나, http 요청 등에 대한 구현 메소드 등을 안에 선언할 수 있다.

    • created : 라이프사이클과 관련된 옵션으로 뒤에서 추가로 설명

1
2
3
4
5
6
7
8
9
10
11
var vm = new Vue({
  template: ...,
  el: ...,
  methods: {
  
    },
  created: {
 
  }
  // ...
})
cs

  • 각 options 로 미리 정의한 vue 객체를 확장하여 재사용이 가능하다. 하지만 아래 방법 보다는 template에서 custom element로 작성하는 것이 더 좋다.

    • 뒤에서 컴포넌트 학습하면서 이것에 대해 배운다.

1
2
3
4
5
6
7
8
9
10
11
var MyComponent = Vue.extend({
  // template, el, method와 같은 options 정의
  template: `<p>Hello {{ message }}</p>`,
  data: {
    message: 'Vue.js !'
  }
  // ...
})
 
// 위에서 정의한 내용 (template, data, ...)을 기본으로 하는 컴포넌트 생성
var myComponentInstance = new MyComponent()
cs

Vue Instance Lifecycle

  • Instance Lifecycle 초기화

  • 뷰 객체가 생성될 때 아래의 초기화 작업을 수행한다.

    • 데이터 관찰

    • 템플릿 컴파일

    • DOM에 객체 연결

    • 데이터 변경시 DOM 업데이트

  • 위의 초기화 작업 외에도 개발자가 의도하는 커스텀 로직을 아래와 같이 추가할 수 있다.

    • created라는 옵션은 뷰 인스턴스가 생성됐을 때, 원하는 로직을 추가해서 구현할 수 있는 부분이다.

1
2
3
4
5
6
7
8
var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    console.log('a is: ' + this.a)
  }
})
cs

  • 이 외에도 Lifecycle 단계에 따라 아래 메서드를 사용할 수 있다.

    • mounted

    • updated

    • destroyed

  • 위와 같이 초기화 메서드로 커스텀 로직을 수행하기 때문에 Vue에서는 따로 Controller를 갖고 있지 않다.

  • Vue.js 공식 홈페이지의 Lifecycle Diagram - 링크

Vue instance lifecycle hook custom logic

실습

  • 주의할 점은 updated 속성은 mounted 단계에서 데이터가 변경 되어야만 동작한다는 것이다. created 단계에서 데이터가 변경되면 updated는 동작하지 않게 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
  <title>Vue Sample</title>
</head>
 
<body>
  <div id="app">
    {{ message }}
  </div>
 
  <script src="https://unpkg.com/vue@2.3.3"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!!'
      },
      beforeCreate: function() {
        console.log("beforeCreate");
      },
      created: function() {
        console.log("created");
      },
      mounted: function() {
        console.log("mounted");
        this.message = '123';
      },
      updated: function() {
        console.log("updated");
      }
    })
  </script>
</body>
</html>
cs







저작자표시 비영리

'ICT Eng > Vue.js' 카테고리의 다른 글

[Vue.js] 06. Vue Router(뷰 라우터)  (0) 2018.09.28
[Vue.js] 05. Vue 컴포넌트간 통신  (2) 2018.09.27
[Vue.js] 04. Vue Component  (0) 2018.09.01
[Vue.js] 02. Vue.js 시작하기(MVVM 패턴)  (0) 2018.09.01
[Vue.js] 01. Vue를 위한 개발환경 설정  (0) 2018.09.01
댓글