Vue 인스턴스 - #6 속성과 메소드

뷰 인스턴스 옵션 속성

뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미합니다.

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

위 예제에서는 data라는 미리 정의되어 있는 속성을 사용했습니다. 그리고 그 안에 message라는 새로운 속성을 추가하고 Hello Vue.js!라는 값을 주었습니다. el 속성 역시 미리 정의되어 있으며 뷰로 만든 화면이 그려지는 시작점을 의미합니다. 뷰 인스턴스 화면을 렌더링할 때 화면이 그려질 위치의 DOM 요소를 지정해 주어야 합니다. 여기서 #app 값은 화면의 DOM 요소 중 app이라는 id를 가진 요소를 의미합니다. 여기서 사용한 # 선택자는 CSS 선택자 규칙과 같습니다.

CSS 선택자 중 # 선택자는 해당 id를 가진 DOM 요소를 검색할 때 사용합니다. 그리고 . 선택자는 해당 클래스를 가진 DOM 요소를 검색할 때 사용합니다.

이 외에도 template, methods, created 등 미리 정의되어 있는 속성을 사용할 수 있습니다.

속성	설명
template	화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성, 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있습니다.
methods	화면 로직 제어와 관계된 메서드를 정의한느 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있습니다.
created	뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성.

 

각 Vue 인스턴스는 data 객체에 있는 모든 속성을 프록시 처리 합니다.

// 데이터 객체
var data = { a: 1 }

// Vue인스턴스에 데이터 객체를 추가합니다.
var vm = new Vue({
  data: data
})

// 같은 객체를 참조합니다!
vm.a === data.a // => true

// 속성 설정은 원본 데이터에도 영향을 미칩니다.
vm.a = 2
data.a // => 2

// ... 당연하게도
data.a = 3
vm.a // => 3

데이터가 변경되면 화면은 다시 렌더링됩니다. 유념할 점은, data에 있는 속성들은 인스턴스가 생성될 때 존재한 것들만 반응형이라는 것입니다. 즉, 다음과 같이 새 속성을 추가하면

 

vm.b = 'hi'

b가 변경되어도 화면이 갱신되지 않습니다. 어떤 속성이 나중에 필요하다는 것을 알고 있으며, 빈 값이거나 존재하지 않은 상태로 시작한다면 아래와 같이 초기값을 지정할 필요가 있습니다.

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

여기에서 유일한 예외는 Object.freeze ()를 사용하는 경우입니다. 이는 기존 속성이 변경되는 것을 막아 반응성 시스템이 추적할 수 없다는 것을 의미합니다.

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

<div id="app">
  <p>{{ foo }}</p>
  <!-- obj.foo는 더이상 변하지 않습니다! -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

Vue 인스턴스는 데이터 속성 이외에도 유용한 인스턴스 속성 및 메소드를 제공합니다. 다른 사용자 정의 속성과 구분하기 위해 $ 접두어를 붙였습니다.

 

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 는 인스턴스 메소드 입니다.
vm.$watch('a', function (newVal, oldVal) {
  // `vm.a`가 변경되면 호출 됩니다.
})