vuejs32 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장 01. 표시/비표시 때의 애니메이션 효과 : transition 보호되어 있는 글 입니다. 2023. 5. 16. 09장 03. 정리 Markdown으로 표시 1. marked.js 라이브러리를 CDN에서 설치 2. Markdown 기법의 문자열을 HTML로 변경하고 싶을 때는 marked(문자열);을 사용. 여기서는 문자열이 들어간 this.input을 넣는다. marked(this.input) Markdown 에디터 예제 new Vue({ el:'#app', data:{ input:'' }, computed:{ // input이 변하면 convertMarkdown 실행 convertMarkdown: function(){ return marked(this.input); } } }) 2023. 5. 16. 09장 02. Markdown 에디터 작성 Markdown 에디터 예제 : markdown.html 1. 준비 - Vue.js 라이브러리와 marked.js 라이브러리 연결 2. HTML 태그 준비 3. Vue 인스턴스의 작성 - data: 에 input 프로퍼티를 준비하고 값을 공백으로 초기화 - computed: 에 convertMarkdown 프로퍼티를 준비하고 function을 만들어 this.input의 값을 Markdown 형식으로 변환하도록 반환한다. new Vue({ el:'#app', data:{ input:'' }, computed:{ // input이 변하면 convertMarkdown 실행 convertMarkdown: function(){ return marked(this.input); } } }) 4. 연결법 결정 - t.. 2023. 5. 16. 이전 1 2 3 4 5 6 다음