프로젝트/ToDoList(3)
-
[Vue.js] todoList 만들기1_3. 컴포넌트 나누기_작성중
현재까지 구현기능 - 할 일 입력시 리스트에 추가 - 리스트에서 우측 'x'버튼 클릭시 삭제 - 리스트 하단 총 개수 표시 - 리스트 하단 '전체,해야할일,완료할일' 버튼 클릭시 각 상태별 리스트 표시 - localStorage와 값을 연동하여, 새로고침시에도 값이 유지되어 표현됨 * 위 내용들은 현재 블로그에 작성 못함.. 추가로 구현해야할 기능 - TodoList.vue에 한번에 작성된 상태 컴포넌트별로 나눠서 구현 필요 -> 나눠서 구현 이후 Vuex적용 해보기 - 개발자도구에서 localStorage값을 전체 삭제시 Vue에서 인지 못함(새로고침시에만 적용됨) 기존 프로젝트는 TodoList.vue에 한번에 작성 -> 변경 프로젝트는 TodoInput.vue, TodoList.vue, TodoSt..
2021.07.04 -
[Vue.js] todoList 만들기1_2. 할일목록구현
[ 할 일 목록 저장 ] 할 일을 입력하면 v-model에 정의된 'todoInput'으로 값이 매핑되어 저장됨 엔터키를 입력하여 할일이 리스트에 저장되는데 엔터키 입력시 @keyup.enter로 'enterKeyFunction'이 호출됨. enterKeyFunction() data(){ return { todoInput :'', dynamicLists:[], completedChecked:[], isShowTodoList:false, isCompleted:false, isCompletedArr:{}, isHidden:{}, isSelected:[true], totalCount:0, } }, methods:{ enterKeyFunction(){ this.dynamicLists.push(this.todoI..
2021.06.13 -
[Vue.js] todoList 만들기1_1. 프로젝트개요
프로젝트 구현 기능 * css는 기존 블랙커피스터디9기를 참여하면서 긁어온 UI입니다. - 할일 입력시 리스트 추가됨 - 리스트에 추가 된 할 일을 체크시 할일 완료기능 구현 - 리스트에 추가 된 할 일 삭제 기능 - 리스트 추가된 항 목 '전체할일' , '해야할일', '완료한 할일' 필터기능 - 현재 노출된 리스트 개수 확인을 위한 카운팅 하여 노출 TODOS {{list}} 총 {{totalCount}} 개 전체보기 해야할 일 완료한 일 * 전체적인 프로젝트 진행방향은 블랙커피스터디9기를 참여하여 미션내용과 동일하게 진행하되 Vue.js로 구현하였습니다. NEXTSTEP edu.nextstep.camp
2021.06.13