백견불여일타 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
[함께 해봐요] 버