FrontEnd/java script 썸네일형 리스트형 [java script] Vue.js ToDo List 만들기 1. ToDo List란? ▷ 할 일을 리스트한 어플리케이션입니다. ◎ 세부 기능 ▷ "체크박스 + 할일"을 나열하여 표시하는 기능 ▷ 체크하면 취소선을 긋는 기능 ▷ "할일"을 추가하는 기능 ▷ 취소선이 그어진 항목을 삭제하는 기능 ▷ ToDo의 총 건수나 처리완료 건수를 표시하는 기능 ToDo리스트 {{todo.text}} 처리완료삭제 {{ remaining }} / {{ todos.length }}건 처리 아래와 같이 값을 넣고 엔터키를 누르면 값이 추가되고 체크한 것은 버튼을 누르면 삭제됩니다. ◎ 추가 세부기능 ▷ 완료일도 같이 입력하여 화면에 나타날 수 있도록 만듭니다. ▷ 완료일 연장을 누르면 기존 입력한 완료일에서 1씩 증가되도록 합니다. ▷ sort를 이용해 할일 또는 완료일 기준으로 오.. 더보기 [java script] Vue.js JSON 데이터 다루기 1. JSON : JavaScript Object Notation ▷ 외부의 데이터를 읽어서 표시하는 방식입니다. ◎ JSON을 읽어 들이는 예제(Vue 사용 x) JSON을 읽어 들이는 예제（JavaScript）- console 출력 if문 안에 있는 내용을 보면 1. 파일을 읽어들이면 FileReader 오브젝트를 만들어서 파일을 처리 2. onload 이벤트로 읽어 들인 후 처리 3. e.target.result에 읽어 들인 데이터가 있는지 전체 데이터 출력 4. JSON.parse 메서드로 JSON 데이터로 변경 5. json 데이터 [0]에 있는 title 출력 6. json 데이터 [0]에 있는 body 출력 ◎ JSON을 읽어 들이는 예제(Vue 사용) JSON을 읽어들이는 예제（Vue.js.. 더보기 [java script] Vue.js 컴포넌트 1. 컴포넌트란? ▷ 부품으로 정리할 때 component를 사용합니다. ◎ 컴포넌트를 만들어 표시하는 예제 컴포넌트를 만들어서 표시하는 예제 (1) HTML부 → 준비된 컴포넌트가 표시됩니다. (2) script부 위와 같은 방법으로 사용하면 됩니다. 결과는 아래와 같은 방법으로 출력됩니다. ◎ 컴포넌트의 data를 function으로 만들기(각각 다른 카운팅 하는 컴포넌트) 예제 각각 다른 카운팅을 하는 컴포넌트 예제 2. props 옵션 : HTML의 태그에서 값을 받아 전달하는 것입니다. // script 부분 : 카멜 케이스 props: { myName: String } // HTML 부분 : 케밥 케이스 위의 형식과 같은 방식으로 연결을 해줘야 컴포넌트가 실행됩니다. my-name과 같은 형식.. 더보기 [java script] Vue.js 애니메이션 효과 적용(transition) 1. transition : 표시/비표시 애니메이션 효과를 나타냅니다. ▷ 나타날(혹은 사라질) HTML 태그를 transition 태그로 감쌉니다. ▷ 어떻게 변화할지를 CSS로 준비합니다. 바로 예제로 알아보도록 하습니다!! ◎ 체크박스를 누르면 애니메이션 효과가 나타나는 예제 체크박스로 표시/비표시 애니메이션 효과를 주는 예제 변경 표시/비표시의 애니메이션~ 애니메이션 효과를 사용할 때 효과를 주고싶은 문구에 으로 감쌉니다. 그리고 어떻게 변화할지 CSS로 준비합니다. 적용 가능한 CSS 스타일 (1) 태그가 나타날 때 ▷ .v-enter : 나타나기 전의 상태 ▷ .v-enter-active : 나타나고 있는 상태 ▷ .v-enter-to : 나타난 상태 (2) 태그가 사라질 때 ▷ .v-leav.. 더보기 [java script] Vue.js markdown 에디터 만들기 1. Markdown 에디터란? ▷ 문장/문서를 가볍게 작성할 수있는 '문장 작성법' 중 하나입니다. ▷ 간단한 기호를 사용해서 표제나 강조 등을 표시하고 이를 HTML로 변경하는 것도 가능합니다. Markdown을 사용할 때, 아래의 코드를 하나 추가해야 합니다. Markdown은 표준이 없다는 단점이 있고 모든 HTML을 대신하지 못합니다. NO 항목 Markdown HTML 1 표제1 # text text 2 표제2 ## text text 3 표제3 ### text text 4 표제4 #### text text 5 표제5 ##### text text 6 번호 없는 리스트 - text text 7 번호 없는 리스트 * text text 8 강조(기울임) *text* text 9 강한 강조(진하게) *.. 더보기 [java script] Vue.js 데이터 변화(computed, watch)를 이용한 마무리 예 ◎ 이번에 배운 computed, watch를 이용한 예제 조건) ▷ 입력 금지 문자열을 ,(콤마) 기준으로 입력할 수 있다. ▷ 제한 시간을 넣고 시작 버튼을 누르면 텍스트를 넣을 수 있다. ▷ 제한 시간이 실시간으로 표시된다. ▷ 입력 중 금지 문자열이 나올 경우 경고를 띄우고 확인 버튼을 누르면 해당 문자열은 삭제되며 시간이 +10초 추가된다. ▷ 제한 시간이 완료되면 텍스트 입력창은 비활성화되고 입력 창 아래 입력한 문자의 개수가 표시되며 금지어를 사용한 횟수 * 12 한 벌점을 출력한다. 결과 화면) 제한 시간내에 문자 입력하기 금지문자 (,로 나누어 복수입력가능) 제한시간을 입력하세요 (초) 시작 남은 시간 {{ restTime }}초 {{ inputText.length }} 개의 문자를 입력.. 더보기 [java script] Vue.js 데이터 변화 감지 프로퍼티(watch 2) ◎ 애니매이션 효과 적용 예제 TweenMax 테스트 이동 위와 같은 코드를 사용하면 애니매이션을 적용할 수 있습니다. 여기서는 따로 Vue를 사용하지 않고 그냥 method로만 결과를 출력했습니다. TweenMax.to( ' id명 ', 이동시간, { 이동축 : "이동 값"}) 과 같은 방법으로 사용하면 애니매이션 효과가 나타납니다. ◎ watch를 이용한 애니매이션 추가 예제 숫자가 빠르게 올라가는 애니메이션을 보여주며 값이 증가하는 input태그 예제 값은 {{ animeNumber }}입니다. 숫자를 입력하면 해당 값만큼 애니메이션 효과를 이용해 값을 증가시킵니다. this.$data는 data에 있는 모든 데이터 값을 다 가져오는 것입니다. 애니메이션 효과는 tweenedNumber를 myNum.. 더보기 [java script] Vue.js 데이터 변화 감지 프로퍼티(watch 1) 1. watch란? 데이터의 수식이나 값이 변할 때 어떤 처리를 하고 싶을 때 사용합니다. 예제를 통해서 바로 알아보겠습니다. ◎ 입력문자를 감지하여 금지문자가 입력되면 alert를 띄우는 예제 입력문자를 감시하여 금지문자가 입력 되면 얼럿을 띄우는 예제 금지문자는、「{{ forbiddenText }}」 '안돼'라는 단어를 입력하면 경고창이 뜨는 예제입니다. 여기서 watch를 통해 입력된 글자가 변하는 것을 감지할 수 있고 substr(0, pos)를 사용해 inputText라는 변수에 금지 글자를 제외하고 남을 수 있도록 만듭니다. 여기서, substr의 특징은 str.substr(시작 인덱스, 추출 개수) : 시작 인덱스를 몇 개 추출할 것인지 입력을 받습니다. 유사한 것으로는 substring입니.. 더보기 이전 1 2 3 4 5 다음
