Vue의 가장 두드러지는 특징 중 하나는 눈에 띄지 않는 반응형 시스템입니다. 모델은 단순한 JavaScript 객체입니다. 모델이 수정되면 화면이 갱신됩니다. 이번 포스트에서 이러한 반응형 시스템을 좀 더 자세히 알아보려고 합니다. 1. MVVM 패턴 Vue는 MVVM 패턴에 영감을 받은 프레임워크입니다. 위의 그림은 MVVM 패턴을 나타내는 그림입니다. 더 자세한 설명은 [디자인패턴] MVC, MVP, MVVM 비교를 참고 바랍니다. View는 DOM, View Model은 Vue, Model은 단순한 JavaScript 객체 입니다. View Model은 View와 데이터 바인딩되어 View Model이 변경 되 었을 때 View가 업데이트 됩니다. 2. 변경 내용을 추적하는 방법 Vue 인스턴스에..
이번 포스트에서는 v-for을 사용하여 리스트 렌더링 하는 방법에 대해 이야기 할 것입니다. 1. v-for와 배열 v-for 디렉티브를 사용하여 배열을 리스트 렌더링 할 수 있습니다. v-for 디렉티브에 item in items 형태의 문법을 넘겨줘야 합니다. items는 원본 데이터 배열이고 item은 반복되는 배열의 요소입니다. 기본 사용방법 {{ item.message }} new Vue({ el: '#app', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } });위의 예제는 배열을 사용한 기본적인 리스트 렌더링 예제입니다. 또한 배열의 몇번째 인덱스인지 알 수 있는 인덱스 정보도 제공합니다...