Recommended
More Related Content
What's hot
What's hot (20)
Similar to Vue guide예제(vue todo-list)-v0.1
Similar to Vue guide예제(vue todo-list)-v0.1 (20)
More from DataUs
More from DataUs (17)
Vue guide예제(vue todo-list)-v0.1
- 2. 목차 1. VUE-TODO-LIST 구성도 2. VUE 프로젝트 생성 & Bootstrap 적용 3. Head.vue 구현 4. Todo-list item 추가하기 구현 5. Todo-list item 보여주기 구현 6. Todo-list item 삭제 구현 7. Footer.vue 구현
- 3. 1. VUE-TODO-LIST 구성도 날짜 및 오늘 요일 표시 Todo item 내용 입력하는 곳 완료여부 체크 Item 추가버튼 삭제버튼 Todo-item 내용 완료 상태 표시하는 곳
- 4. 1. VUE-TODO-LIST 구성도 • App.vue에 해당하는 영역이다. • 가장 상위 컴포넌트이며 todoItems 배열을 관리한다. • todoItems는 id, checked, text를 키로 가지는 객체의 배열이다. • Id는 객체의 고유한 id를 의미하고, checked는 이 객체의 완료여부를 나타내는 boolean값이 며, text는 객체의 내용을 담고 있는 string이다({id: 1, checked: false, text: 운동하기}). • Head.vue에 해당하는 영역이다. • 오늘 날짜를 나타낸다. • AddItem.vue에 해당하는 영역이다. • text data를 input 엘리먼트에 양방향 바인딩한다. • Enter를 입력하거나 + 버튼을 누르면 text data가 상위 컴포넌트(App.vue)로 전달된다.
- 5. 1. VUE-TODO-LIST 구성도 • ItemBoard.vue에 해당하는 영역이다. • 상위 컴포넌트(App.vue)로 부터 todoItems 배열을 items props에 전달받는다. • items props를 v-for로 돌며 Item 컴포넌트를 생성한다. 이 때 items배열의 각 값을 Item 컴 포넌트에 전달한다. • 하위 컴포넌트(Item.vue)로 부터 delete이벤트와 item.id를 전달 받는다. item.id를 deleteItem이벤트로 상위 컴포넌트(App.vue)에 전달한다. • Item.vue에 해당하는 영역이다. • 상위 컴포넌트(ItemBoard.vue)로 부터 Todo item을 item props에 전달 받는다. • X icon을 클릭하면 delete 이벤트가 item.id와 함께 상위 컴포넌트(ItemBoard.vue) 로 전달된 다. • Foot.vue에 해당하는 영역이다. • 상위 컴포넌트(App.vue)로 부터 total, completed props를 전달 받는다.
- 6. 1. VUE-TODO-LIST 구성도 App.vue Item.vue ItemBoard.vue Head.vue AddItem.vue Foot.vue addItem EVENT total, completed props items props item props deleteItem EVENT delete EVENT
- 7. 2. VUE 프로젝트 생성 & Bootstrap 적용 0. node.js LST 버전과 @vue/cli 패키지가 전역적으로 설치돼 있어야 한다. 1. cue create todo-list를 통해 프로젝트를 생성한다. 2. Default([Vue 2] babel, eslint) 옵션을 선택한다. 3. todo-list라는 VUE 프로젝트가 생성된다. 4. Terminal에서 npm run serve 명령어를 통해 프로젝트를 실행할 수 있다.
- 8. 2. VUE 프로젝트 생성 & Bootstrap 적용 • todo-list 디렉토리 구조를 사진과 똑같이 만들어 두자. • public, src > assets 폴더 아래에 있던 이미지는 삭제했 다. • src > components 폴더 아래 있던 기본 .vue 파일을 삭 제하고 AddItem.vue, Foot.vue, Head.vue, Item.vue, ItemBoard.vue 파일을 만든다.
- 9. 2. VUE 프로젝트 생성 & Bootstrap 적용 1. npm install bootstrap-vue bootstrap 명령어를 실행한다. 2. main.js bootstrap-vue 관련 코드를 추가한다.
- 10. 3. Head.vue 구현 Head.vue App.vue 1. Head.vue 파일을 App.vue 에서 import 하여 <Head></Head>형식으로 사용하였다. 2. Head.vue는 bootstrapVue의 b-card tag를 사용하였다. Title과 sub-title에 각각 getTitle, getSubTitle computed 속성을 바인딩 해주었다.
- 11. 4. Todo-list item 추가하기 구현 – App.vue App.vue 1. AddItem.vue 파일을 App.vue에서 import 한 후 template에서 사용한다. 2. Todo-list의 item들을 관리하기 위한 todoItems 배열 data를 정의한다. 이 todoItems data는 여러 컴포넌트들에서 사 용될 예정이다. 이 컴포넌트들의 최상위 컴포 넌트가 App.vue 이므로 App.vue 정의하는게 관리하기 편한다. 3. AddItem component로 부터 addItem이라는 이벤트가 발생하면 addTodoItem 메서드를 실행한다. 4. addTodoItem 메서드는 todoItems data에 새 로운 item을 추가하는 역할을 한다.
- 12. 4. Todo-list item 추가하기 구현 – AddItem.vue AddItem.vue 1. text data를 정의한다. 2. text data를 b-form-input 태그에 v-model 디렉 티브를 사용하여 양방향 바인딩을 해준다. 3. input 태그에서 enter key가 눌리거나 b-button 이 눌리면 addItem 메서드를 실행한다. 4. addItem 메서드는 현재 text data가 비어있지 않 으면 상위컴포넌트(App.vue)로 text data를 addItem이라는 이벤트와 함께 보낸다. 그리고 text data를 빈 문자열로 초기화 한다.
- 13. 5. Todo-list item 보여주기 구현 – App.vue, ItemBoard.vue 1. App.vue 파일에서 ItemBoard.vue를 import 하여 template 에서 사용한다. 2. ItemBoard 컴포넌트에 todoItems data를 넘겨준다. 이 때 ItemBoard 컴포넌트는 todoItems data를 items라 는 props로 받는다. 3. ItemBoard.vue 파일에서 Item.vue를 import 하여 template 에서 사용한다. 4. Props로 전달받은 items 배열을 v-for 디렉티브로 돌며 Item 컴포넌트의 리스트를 만든다. 이 때 items 배열 의 각 요소를 item 컴포넌트의 item props로 전달한다. App.vue ItemBoard.vue
- 14. 5. Todo-list item 보여주기 구현 – Item.vue 1. 상위컴포넌트(ItemBoard.vue)로 부터 item props 를 전달 받는다. 2. v-show 디렉티브를 사용하여 item props의 checked 속성이 true이면 item의 text 속성을 보 여주고 false이면 s 태그로 감싸진 text 속성을 보 여준다. 3. b-icon-check-circle 태그를 클릭하면 clickToggle 메서드가 실행된다. clickToggle 메서드는 item의 checked 속성을 toggle 한다. Item.vue
- 15. 6. Todo-list item 삭제 구현 – Item.vue Item.vue 1. Item.vue template 영역에 b-icon-x-circle-fill tag를 추가한다. 이 태그를 클릭하면 deleteItem 메서드가 실행된다. 2. deleteItem 메서드는 상위컴포넌트 (ItemBoard.vue)로 delete 이벤트를 발생시킨 다. 이 때 props로 받은 item의 id도 함께 전달 한다.
- 16. 6. Todo-list item 삭제 구현 – ItemBoard.vue ItemBoard.vue 1. Item 컴포넌트로부터 delete 이벤트가 발생 하면 deleteItem 메서드를 실행한다. Item 컴포넌트의 delete 이벤트는 item.id를 함께 전달해준다. 2. deleteItem메서드는 id를 인자로 받는다. 이 id는 todo-list item의 id를 의미한다. 전달받 은 id와 함께 deleteItem 이벤트를 발생시킨 다. 이 이벤트의 상위컴포넌트(App.vue)에서 받아 처리한다.
- 17. 6. Todo-list item 삭제 구현 – App.vue App.vue 1. ItemBoard 컴포넌트로부터 deleteItem 이 벤트가 발생하면 handleDeleteItem 메서드 를 실행한다. ItemBoard의 deleteItem이벤 트는 item의 id를 함께 전달해 준다. 2. handleDeleteItem 메서드는 id를 인자로 받 는다. 그리고 해당 id를 갖는 객체를 todoItems 배열에서 삭제한다.
- 18. 7. Footer.vue 구현 – App.vue App.vue 1. Foot.vue 파일을 App.vue에서 import 한 후 template에서 사용한다. 2. computed 속성을 추가해주었다. computed 속성에는 totalItems, completedItems 메서 드가 정의되어 있다. totalItems는 todoItems의 길이를 return하고, completedItems는 todoItems의 요소 중 checked 된 것의 개수를 return한다. 3. Foot component의 total, completed props 에 totalItems, completedItems 를 넘겨준다.
- 19. 7. Footer.vue 구현 – Foot.vue Foot.vue 1. App.vue로부터 전달받을 값들을 props로 정의 한다. 2. total, completed props를 template 영역에서 사 용한다.
- 20. Challenge 1. Checked가 true인 todo item들을(완료된 todo item들) 한번에 삭제하는 기능 만들기. 2. todo item 수정 기능 넣기 3. todo item에 마감 기한 입력 기능 넣기 / 남은 마감 기한 표시하기 – bootstrap 이용 예제GITHUB : https://github.com/iks15174/VUE-TODO-LIST 기본기능 : master branch Challenge : challenge branch