코드공부방

Vue.js To Do List 만들기 #3 컴포넌트 구현(2) 컴포넌트 생성 및 등록(2) 컴포넌트 구현 > TodoList TodoList컴포넌트는 localStorage에 저장되어있는 item 목록을 화면에 보여주는 역할을 한다. 순서가 없는 목록은 ul, li 요소를 사용한다. 먼저 localStorage에 저장되어있는 목록을 vue 데이터 todoItems에 저장한다. /* /src/components/TodoList.vue > */ export default { data(){ return { todoItems: [] } }, created(){ if(localStorage.length > 0){ for(var i = 0; i < localStorage.length; i++){ this.todo..

Vue.js To Do List 만들기 #2 컴포넌트 구현(1) 컴포넌트 생성 및 등록(1) 프로젝트 초기 구성을 완료하였으니 애플리케이션에 필요한 컴포넌트들을 생성하고 등록한다. To Do List에 필요한 컴포넌트는 TodoHeader, TodoInput, TodoList, TodoFooter 4개이다. /src/경로 아래에 components 폴더를 생성 후 TodoHeader.vue, TodoInput.vue, TodoList.vue, TodoFooter.vue 파일을 생성한다. 각각의 파일을 열어 아래와 같이 컴포넌트의 기본 구조를 잡는다. 각 컴포넌트 명 생성한 컴포넌트를 등록하여 화면에 나타내기 위하여 최상위 컴포넌트인 App.vue에 등록한다. /src/App.vue에 기본적으로 들어있는 ..