vue43 11장 04. 정리 ToDo 리스트의 각 행의 데이터는 "완료되었는지(done)"와 "할일 문자열(text)"로 구성된 오브젝트 데이터로 만든다. 이런 복수의 데이터를 배열로 만들어 준비하고, 배열 데이터의 각 행을 v-for로 반복 표시 구현한다. 각 행의 맨앞에 done와 결합한 체크박스를 붙이고 그 뒤에 text를 표시한다. 취소선을 표시하는 스타일을 붙이고 done이 true일 때만(체크된 경우) 스타일 유효하도록 한다. 실습해봅시다. 좀더 좋아진 ToDo리스트 ToDo List를 좀더 확장해 봅시다. 리스트에 완료기한을 입력할 수 있게 추가, 완료기한 미입력시 기본 현재 날짜 + 1일로 자동 입력 현재일 기준에서 완료기한을 지난 할 일은 1일 단위로 연장 기능 추가 할일/완료기한으로 정렬 기능 추가 Todo의 총건.. 2023. 5. 22. 11장 03. 개선 : 추가 & 삭제 보호되어 있는 글 입니다. 2023. 5. 22. 11장 02. 임시 데이터로 ToDo 리스트 표시하기 보호되어 있는 글 입니다. 2023. 5. 20. 11장 01. ToDo 리스트란? ToDo 리스트 샘플 - ToDo 리스트 기능 "체크박스 + 할일"을 나열하여 표시하는 기능 체크하면 취소선을 긋는 기능 "할일"을 추가하는 기능 취소선이 그어진 항목을 삭제하는 기능 ToDo의 총 건수나 처리완료 건수를 표시하는 기능 더보기 Vue.js의 ToDo 리스트 (TodoMVC) 샘플 https://v2.ko.vuejs.org/v2/examples/todomvc.html TodoMVC — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 v2.ko.vuejs.org ToDo 리스트의 작성 순서 - 위의 나열한 기능 중 추가, 삭제 기능을 제외하고 1번, 2번, 5번 기능이 들어간 "인시 데이터를 표시하는 ToDo 리스트"를 먼저 만든다. ToDo 리스트의 설계 1. 준비 Vue... 2023. 5. 20. 10장 04. 정리 1초 페이드인으로 문자를 표시할 때 1. HTML의 v-if로 표시/비표시를 변경하는 div 태그를 transition 태그로 감쌈 표시/비표시 2. 1초 페이드인을 CSS로 지정 .v-enter { opacity: 0; } .v-enter-active { transition: 1s; } 3. v-if로 표시/비표시를 변경하는 처리를 작성 0.5초 페이드인으로 리스트의 항목을 증감시킬 때 1. HTML에서 증감하는 li 태그를 transition-group 태그로 감쌈 {{ item }} 2. 0.5초 페이드인을 CSS로 지정 .v-enter, .v-leave { opacity: 0; } .v-enter-active, .v-leave-active { transition: .5s; } 3. 리스트의 항목을.. 2023. 5. 20. 10장 03. 리스트가 정렬되며 이동하는 트랜지션 보호되어 있는 글 입니다. 2023. 5. 20. 이전 1 2 3 4 5 6 ··· 8 다음