데이터 바인딩
-
Vue 데이터 바인딩 실습 - TODO 앱 구현하기개발/Front-end 2021. 9. 15. 22:28
이번 시간에는 이를 이용할 TODO 앱을 만들어보겠습니다. 0. 프로젝트 소개 및 컴포넌트 설계 0-1. 프로젝트 소개 이번에 실습할 프로젝트는 아래와 같습니다. (gif라서 약간 이미지가 깨집니다...) 0-2. 컴포넌트 구성 컴포넌트를 작게하는 경우 재사용성이 높아집니다. 따라서 아래와 같은 컴포넌트로 구성하겠습니다. TodoHeader: 제목 TodoInput: 할일 목록 추가 할일 목록 타이핑하여 + 버튼 클릭 시, localStorage에 추가(할 일 목록에 추가) 할 일 목록 입력 후 엔터 클릭 시 할 일 목록에 추가 TodoList: 할일 리스트 localStorage에서 할 일 목록 데이터를 가져와서 보여주기 완료 유무 체크, 리스트 삭제 TodoFooter: 모든 리스트를 없애는 버튼 0..
-
Vue 데이터 바인딩개발/Front-end 2021. 8. 25. 15:32
이번 시간에는 HTML 입력 폼 객체에 따른 데이터 바인딩 방법을 알아보겠습니다. 1. 데이터 바인딩이란? Vue는 Angular와 마찬가지로 양방향 데이터 바인딩을 지원합니다. 아래 MVVM 패턴 그림을 봅니다. 뷰 모델에 있는 데이터 바인딩은 양방향 데이터 바인딩이 이뤄집니다. 모델과 뷰 중 어느 한쪽에 변경이 일어나면 다른 한쪽에 반영됩니다. MVVM 패턴: Model-View-ViewModel 약자로 프로그래밍 로직과 화면에 해당하는 View를 분리해서 개발하기 위해 설계된 패턴입니다. 모델: 데이터를 담은 용기. 서버에서 가져온 데이터를 js 객체로 저장 뷰: 사용자 화면 뷰 모델(Vue): 뷰와 모델의 중간 영역으로 돔 리스너와 데이터 바인딩을 제공 돔 리스너: 돔의 변경 내용을 즉각적으로 반..