백견불여일타 Vue.js 입문

이 책은 프론트엔드 자바스크립트 프레임워크 Vue.js를 빠르게 배우고 현업에 적용하고자 하는 개발자 혹은 프론트엔드 입문자를 위한 책이다. 80여 개의 예제와 각 장마다 실습문제를 제공하고 있으며 마지막 장에는 Json 기반 게시판 프로젝트를 진행해봄으로써 Vue.js로 웬만한 프론트엔드 프로그램을 디자인할 수 있는 역량을 가질 수 있을 것이다. [샘플원고] www.roadbook.co.kr/231 대상 독자 자바스크립트 프레임워크 Vue를 빠르게 배우고 실무에 적용하고자 하는 개발자 프론트엔드 자바스크립트 프레임워크를 배우고자 하는 프론트엔드 입문자

지은이의 글 편집자이자 베타테스터의 글 일러두기 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 찾아보기