vue.js38 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. 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. 09장 01. Markdown 에디터란? - Markdown 기법 : 문장/문서를 가볍게 작성할 수 있는 "문장 작성법" 중 하나 항목 Markdown HTML 표제1 # text text 표제2 ## text text 표제3 ### text text 표제4 #### text text 표제5 ##### text text 번호 없는 리스트 - text text 번호 있는 리스트 * text text 강조 *text* text 강한 강조 **text** text 취소선 ~~aa~~ text 수평선 ---- 링크 [text](url) text Markdown 에디터의 설계 1. 준비 - Vue 라이브러리와 Markdown 라이브러리를 설치 markded.js 라이브러리의 CDN 지정 방법 2. HTML 태그 준비 - textarea 태그(입력용)과 .. 2023. 5. 16. 이전 1 2 3 4 5 6 7 다음