vue.js48 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. 10장 02. 리스트의 트랜지션 : transition-group 보호되어 있는 글 입니다. 2023. 5. 16. 10장 01. 표시/비표시 때의 애니메이션 효과 : transition 보호되어 있는 글 입니다. 2023. 5. 16. 이전 1 2 3 4 5 6 7 8 다음