[Vue.js] 데이터 바인딩

● 데이터바인딩 : DOM 변경을 자동화

    -> 템플릿에서 사용하는 모든 데이터를 리액티브 데이터로 정의해야됨

 

● 리액티브 데이터 : Vue.js 에서 get, set, hook 처리가 등록되어 반응하는 데이터

   (Vue.js 코드를 보면 메서드를 호출하지 않아도 무언가 처리되고 있음)

 

● 리액티브 데이터 정의하기

 - 컴포넌트의 data 옵션에 문자열 또는 객체 등의 데이터를 정의하면, 인스턴스 생성 때 모두 리액티브 데이터로 변환됨

 

var app = new Vue({ 
    el: '#app', 
    data: {
       message: 'Vue.js' //이렇게 정의한 message 는 변화를 감지할 수 있게 됨
    }
})

 

 - 옵션 외부에서 데이터를 정의하더라도, Vue.js 데이터로 등록하면 모두 리액티브 데이터로 변환됨

var state = {count: 0}
var app = new Vue({ 
    el: '#app', 
    data: {
       state: state
    }
})

state.count++ //state.count 는 리액티브 데이터

 

 

- data 옵션 바로 아래 속성은 따로 추가할 수 없으므로, 값이 결정되지 않더라도 초깃값(빈 데이터) 으로 정의해줘야함

   * 이후에 넣을 값과 같은 자료형으로 정의해야함

 

초기데이터의 예 ▼

var app = new Vue({ 
    el: '#app', 
    data: {
       newTodoText: '',
       visitCount: 0,
       hideCompletedTodos: false,
       todos: [],
       error: null
    }
})