백견불여일타 Vue.js 입문

지은이의 글
편집자이자 베타테스터의 글
일러두기

1장 Vue.js란?
01 Vue.js란?
02 Vue.js는 "데이터와 뷰를 연결해 주는 역할"
03 설치해 봅시다
04 한번 실행해 봅시다
05 정리
정리해봅시다
실습해봅시다
컬럼_다른 작성법
컬럼_CSS 예제

[함께 해봐요] 클릭한 횟수를 표시하는 버튼 : countup.html

2장 데이터 표시
01 Vue 인스턴스 만들기 : new Vue
02 데이터를 그대로 표시 : {{데이터}}
03 사용할 수 있는 데이터의 종류
04 정리

정리해봅시다
실습해봅시다

컬럼_싱글 쿼테이션과 더블 쿼테이션

[함께 해봐요] 데이터를 있는 그대로 표시하는 예제 : hello1.html
[함께 해봐요] 데이터를 v-text로 표시하는 예제 : hello2.html
[함께 해봐요] 데이터로 HTML을 표시하는 예제 : hello3.html
[함께 해봐요] 여러 가지 데이터 형을 표시하는 예제 : datatext1.html
[함께 해봐요] JavasScript를 이용하여 표시하는 예제 : datatest2.html
[함께 해봐요] 배열값을 표시하는 예제 : datatest3.html
[함께 해봐요] 오프젝트 데이터를 표시하는 예제 : datatest4.html
[함께 해봐요] JavaScript로 만든 데이터를 표시하는 예제 : datatest5.html
[함께 해봐요] 오브젝트의 내용을 확인하는 예제 : datatest6.html

3장 속성을 지정할 때
01 요소의 속성을 데이터로 지정하는 : v-bind
02 정리

정리해봅시다
실습해봅시다

컬럼_v-bind의 생략
컬럼_케밥 표기법, 카멜 표기법, 파스칼 표기법

[함께 해봐요] 이미지를 지정하는 예제 : bindtext1.html
[함께 해봐요] 링크를 지정하는 예제 : bindtest2.html
[함께 해봐요] align 지정 : bindtest3.html
[함께 해봐요] 인라인 스타일 지정 : bindtest4.html
[함께 해봐요] 클래스 지정 : bindtest5.html


4장 유저 입력을 연결할 때
01 입력 폼을 데이터와 연결하기 : v-model
02 정리

정리해봅시다
실습해봅시다

[함께 해봐요] 입력한 문자열을 표시하는 예제 : modeltest1.html
[함께 해봐요] 입력한 문장과 문자수를 표시하는 예제 : modeltest2.html
[함께 해봐요] 체크박스의 ON/OFF를 확인하는 예제 : modeltest3.html
[함께 해봐요] 복수의 체크박스의 ON을 배열로 만드는 예제 : modeltest4.html
[함께 해봐요] 동의에 체크하면 송신 버튼이 활성화되는 예제 : modeltest5.html
[함께 해봐요] 선택한 라디오 버튼을 표시하는 예제 : modeltest6.html
[함께 해봐요] 이미지 출력을 라디오 버튼으로 변경하는 예제 : modeltest7.html
[함께 해봐요] 문자열이 선택한 색으로 변하는 예제 : modeltest8.html
[함께 해봐요] 복수의 선택을 배열로 처리 : modeltest9.html
[함께 해봐요] 다 쓰고 나서 입력하는 예제 : modeltest10.html
[함께 해봐요] 입력 후 자동으로 수식으로 변경되는 예제 : modeltest11.html
[함께 해봐요] 입력을 자동으로 수식으로 변경하지 않는 예제 : modeltest11b.html
[함께 해봐요] 앞뒤의 공백을 자동으로 제거하는 (트림) 예제 : modeltest12.html
[함께 해봐요] 앞뒤의 공백을 자동으로 제거(트림) 하지 않는 예제 : modeltest12b.html

5장 유저 조작과 연동
01 이벤트와 연결하기 : v-on
02 정리

정리해봅시다
실습해봅시다

[함께 해봐요] 클릭하면 1이 증가하는 예제 : ontest1.html
[함께 해봐요] 클릭하면 두번째는 누를 수 없게 되는 "좋아~" 버튼 예제 : ontest2.html
[함께 해봐요] 클릭하면 지정된 값만큼 증가시키는 예제 : ontest3.html
[함께 해봐요] [Enter] 키를 누르면 얼럿을 표시하는 예제 : ontest4.html
[함께 해봐요] [Shift] + [Enter] 키를 누르면 얼럿을 표시하는 예제 : ontest5.html

6장 조건과 반복의 사용
01 조건에 따른 표시 : v-if
02 반복 표시 : v-for
03 정리

정리해봅시다
실습해봅시다

컬럼_v-show

[함께 해봐요] true일 때만 표시하는 예제 : iftest1.html
[함께 해봐요] true와 false를 ON/OFF로 표시하는 예제 : iftest2.html
[함께 해봐요] 클릭하면 "좋아~" 버튼을 삭제하는 예제 : iftest3.html
[함께 해봐요] 배열 데이터를 리스트로 표시하는 예제 : foretest1.html
[함께 해봐요] 오브젝트 배열 데이터를 리스트로 표시하는 예제 : fortest2.html
[함께 해봐요] 1×5 ~ 10×5를 반복 표시하는 예제 : fortest3.html
[함께 해봐요] 배열 데이터를 번호가 붙어 있는 리스트로 표시하는 예제 : fortest4.html
[함께 해봐요] 배열 데이터를 테이블로 표시하는 예제 : tabletest0.html
[함께 해봐요] 배열 데이터를 테이블로 표시하는 예제 2 : tabletest.html
[함께 해봐요] 버튼으로 리스트에 추가/삭제 예제 : fortest5.html
[함께 해봐요] 버튼을 클릭하면 소트하는 예제 : fortest6.html
[함께 해봐요] 짝수만 표시하는 예제 : fortest7.html
[함께 해봐요] 버튼을 클릭하면 짝수만 표시하는 예제 : fortest8.html

7장 Google Charts와 연동 - 자바스크립트 라이브러리와 연동하는 방법
01 구글 차트란?
02 Google Charts와 연동하기
03 정리

정리해봅시다
실습해봅시다

[함께 해봐요] Google Charts에서 원 그래프를 표시하는 예제 : GoogleCharts.html
[함께 해봐요] Google Charts의 원 그래프에 버튼으로 투표할 수 있는 예제 : GoogleChartsVue.html

8장 데이터의 변화 감지
01 데이터를 사용한 별도 계산 : 산출 프로퍼티
02 데이터의 변화를 감지 : 감지 프로퍼티
03 정리

정리해봅시다
실습해봅시다

[함께 해봐요] 금액을 입력하면 소비세가 포함된 금액을 계산하는 예제 : computedtest1.html
[함께 해봐요] 단가와 개수를 입력하면 세금포함 금액을 계산하는 예제 : computedtest2.html
[함께 해봐요] 문장을 입력하면 남은 글자수를 표시하는 예제 : computedtest3.html
[함께 해봐요] 문자를 입력하면 그 문자를 표함한 항목만 표시하는 예제 : computedtest4.html
[함께 해봐요] 적색, 녹색, 청색의 슬라이더를 움직이면 완성된 색을 표시하는 예제 : computedtest5.html
[함께 해봐요] 입력문자를 감지하여 금지문자가 입력되면 얼럿을 띄우는 예제 : watchtest1.html
[함께 해봐요] 남은 시간이 0초가 되면 얼럿을 띄우는 예제 : timerTest.html
[함께 해봐요] 남은 시간(초)을 감시하여 표시하고 0초가 되면 얼럿을 띄우는 예제 : watchTest2.html
[함께 해봐요] TweenMax 테스트 : tweenMaxTest.html
[함께 해봐요] 숫자가 빠르게 올라가는 애니메이션을 보여주며 값이 증가하는 input 태그 예제 : watchtest3.html

9장 Markdown 에디터 만들기
01 Markdown 에디터란?
02 Markdown 에디터 작성
03 정리

[함께 해봐요] Markdown 에디터 예제 : markdown.html

10장 애니메이션
01 표시/비표시 때의 애니메이션 효과 : transition
02 리스트의 트랜지션 : transition-group
03 리스트가 정렬되며 이동하는 트랜지션
04 정리

정리해봅시다
실습해봅시다
[함께 해봐요] 체크박스로 표시/비표시에 애니메이션 효과를 주는 예제 : transtest1.html
[함께 해봐요] 버튼을 누르면 리스트가 증감할 때 애니메이션 효과를 주는 예제 : transtest2.html
[함께 해봐요] 클릭하면 셔플하는 예제 : shuffleTest.html
[함께 해봐요] 리스트의 순서가 이동하면서 변하는 애니메이션 예제 : transtest3.html

11장 ToDo 리스트 만들기
01 ToDo 리스트란?
02 임시 데이터로 ToDo 리스트 표시하기
03 개선 : 추가 & 삭제 기능
04 정리

실습해봅시다

[함께 해봐요] 임시 데이터로 표시하는 ToDo 리스트 : todolist1.html
[함께 해봐요] ToDo 항목의 추가&삭제 기능을 추가한 ToDo 리스트 : todolist2.html

12장 컴포넌트로 정리하기
01 부품으로 정리한다 : 컴포넌트
02 컴포넌트의 data를 function으로 만들기
03 값 전달 : props
04 정리

정리해봅시다
실습해봅시다

컬럼_Vue.js의 라이프 사이클

[함께 해봐요] 컴포넌트를 만들어 표시하는 예제 : comptest1.html
[함께 해봐요] 각각 다른 카운팅을 하는 컴포넌트 예제 : comptest2.html
[함께 해봐요] 컴포넌트에 값을 전달하는 예제 : comptest3.html
[함께 해봐요] 배열에서 컴포넌트를 만들어 표시하는 예제 : comptest4.html

13장 json 데이터 다루기
01 JSON 파일을 읽어들이는 방법
02 JSON 데이터를 읽어들여 컴포넌트로 나열
03 개선 : 트랜지션 붙이기
04 정리

정리해봅시다
실습해봅시다

[함께 해봐요] JSON을 읽어 들이는 예제(JavaScript) : jsonLoad.html
[함께 해봐요] JSON을 읽어들이는 예제(Vue.js) : jsonLoadVue.html
[함께 해봐요] 배열 데이터를 컴포넌트로 나열하는 예제 : jsontest1.html
[함께 해봐요] JSON 데이터를 읽어들여 트랜지션 효과를 주는 예제 : jsontest2.html

14장 간단한 게시판 만들어보기
01 게시판 만들기
02 정리

[함께 해봐요] MyBoardList 컴포넌트 작성
[함께 해봐요] MyBoardRead와 MyBoardWrite 컴포넌트 작성
[함께 해봐요] 컴포넌트 관련 HTML 태그 작성
[함께 해봐요] Vue 인스턴스 작성: data 속성 선언과 컴포넌트 메소드 정의
[함께 해봐요] loadData 메소드 작성
[함께 해봐요] Json 파일 만들기
[함께 해봐요] lodaData 이벤트가 일어나면 호출되도록 HTML 태그 작성하기
[함께 해봐요] boardList와 boardWrite 메소드 작성
[함께 해봐요] boardRead 메소드 작성
[함께 해봐요] boardSave 메소드 작성
[함께 해봐요] boardDelete 메소드 작성
[함께 해봐요] saveBoardList 메소드 작성
[함께 해봐요] 전체 소스 practice.html

찾아보기