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 데이터 변화 감지 프로퍼티(watch 1) 1. watch란? 데이터의 수식이나 값이 변할 때 어떤 처리를 하고 싶을 때 사용합니다. 예제를 통해서 바로 알아보겠습니다. ◎ 입력문자를 감지하여 금지문자가 입력되면 alert를 띄우는 예제 입력문자를 감시하여 금지문자가 입력 되면 얼럿을 띄우는 예제 금지문자는、「{{ forbiddenText }}」 '안돼'라는 단어를 입력하면 경고창이 뜨는 예제입니다. 여기서 watch를 통해 입력된 글자가 변하는 것을 감지할 수 있고 substr(0, pos)를 사용해 inputText라는 변수에 금지 글자를 제외하고 남을 수 있도록 만듭니다. 여기서, substr의 특징은 str.substr(시작 인덱스, 추출 개수) : 시작 인덱스를 몇 개 추출할 것인지 입력을 받습니다. 유사한 것으로는 substring입니.. 더보기 [java script] Vue.js 조건(v-if)과 반복(v-for) 1 1.v-if : 조건에 따른 표시 이전에 if문을 java와 java script에서 많이 다뤄 보았었습니다. Vue.js에서는 어떻게 사용하는지 예제로 바로 알아보죠! ◎ 체크박스가 true 일때 결과를 출력하는 예제) true일때만 표시하는 예제 표시 체크박스가 ON script의 메서드에 if대신 body 내부에 변수를 넘겨주면서 체크박스가 on이 되면 v-if문 안의 글자가 출력됩니다. 조건이 true라면 표시 의 방법으로 사용하시면 됩니다. ◎ if문을 이용해 두 수를 비교하는 예제) if문을 이용해 두 수를 비교하는 예제 첫 번째 수는 : 두 번째 수는 : 큰 수 : {{ num1 }} 작은 수 : {{ num2 }} 작은 수 : {{ num1 }} 큰 수 : {{ num2 }} 두 수는 같습.. 더보기 [java script] Vue.js 유저 입력 연결(v-model) 1. v-model : 입력 폼을 데이터와 연결해줍니다. ◎ 예제 1) 입력한 문자열을 표시하는 예제 입력한 문자열을 표시하는 예제 나는 {{ myName }} 입니다. 문자열을 텍스트 박스 안에 입력하면 아래에 결과가 출력됩니다. ◎ 예제 2) 입력한 문장과 문자수를 표시하는 예제 입력한 문장과 문자수를 표시하는 예제 문장은, 「{{ myText }}」 문자수는 {{ myText.length }} 자입니다. 문장을 입력하면 enter키와 상관없이 문장을 계속해서 나열하고 문장과 문자수를 표시합니다. ◎ 예제 3) 체크박스의 ON/OFF를 확인하는 예제 체크박스의 ON/OFF를 확인하는 예제 체크박스의 상태는 {{ myCheck }} 체크를 하면 true, 체크를 해제하면 false가 출력됩니다. ◎ 예.. 더보기 이전 1 2 3 다음
