CHAPTER 01 시작하기 1.1 Vue.js란? 1.2 개발 환경 설정 1.2.1 Node.js 설치 1.2.2 Visual Studio Code 설치 1.2.3 크롬 브라우저 및 Vue.js devtools 설치 1.2.4 Vue-CLI 설치 1.3 첫 번째 Vue.js 애플리케이션 CHAPTER 02 Vue.js 기초 2.1 hellovuejs 예제 분석 2.2 기본 디렉티브 2.2.1 v-text, v-html 디렉티브 2.2.2 v-bind 디렉티브 2.2.3 v-model 디렉티브 2.2.4 v-show, v-if, v-else, v-else-if 디렉티브 2.3 반복 렌더링 디렉티브 2.4 기타 디렉티브 2.5 계산형 속성 CHAPTER 03 Vue 인스턴스 3.1 el, data, computed 옵션 3.2 메서드 3.3 관찰 속성 3.4 v-cloak 디렉티브 3.5 Vue 인스턴스 라이프 사이클 CHAPTER 04 이벤트 처리 4.1 인라인 이벤트 처리 4.2 이벤트 핸들러 메서 4.3 이벤트 객체 4.4 기본 이벤트 4.5 이벤트 전파와 버블링 4.6 이벤트 수식어 4.6.1 once 수식어 4.6.2 키코드 수식어 4.6.3 마우스 버튼 수식어 CHAPTER 05 스타일 5.1 스타일 적용 5.2 인라인 스타일 5.3 CSS 클래스 바인딩 5.4 계산형 속성, 메서드를 이용한 스타일 적용 5.5 컴포넌트에서의 스타일 적용 5.6 스타일 예제 CHAPTER 06 컴포넌트 기초 6.1 컴포넌트 조합 6.2 컴포넌트의 작성 6.3 DOM 템플릿 구문 작성 시 주의 사항 6.4 컴포넌트에서의 data 옵션 6.5 props와 event 6.5.1 props를 이용한 정보 전달 6.5.2 event를 이용한 정보 전달 6.5.3 props와 event 예제 6.6 이벤트 버스 객체를 이용한 통신 CHAPTER 07 ECMAScript 2015 7.1 ES2015를 사용하기 위한 프로젝트 설정 7.2 let과 const 7.3 기본 파라미터와 가변 파라미터 7.4 구조분해 할당(destructuring assignment) 7.5 화살표 함수(Arrow function) 7.6 새로운 객체 리터럴 7.7 템플릿 리터럴 7.8 컬렉션 7.9 클래스 7.10 모듈 7.11 Promise CHAPTER 08 Webpack 8.1 Webpack 구성 8.2 간단한 Webpack 구성 예제 8.3 Webpack 개발 서버 설정 8.4 Vue-CLI 보일러플레이트 CHAPTER 09 컴포넌트 심화 9.1 단일 파일 컴포넌트 9.2 컴포넌트에서의 스타일 9.2.1 범위 CSS(Scoped CSS) 9.2.2 CSS 모듈(CSS Module) 9.3 슬롯 9.3.1 슬롯의 기본 사용법 9.3.2 명명된 슬롯 9.3.3 범위 슬롯 9.4 동적 컴포넌트 9.5 재귀 컴포넌트 CHAPTER 10 axios를 이용한 서버통신 10.1 서비스 API 소개 10.2 axios 기능 테스트 10.2.1 http 프록시 설정 10.2.2 axios 사용 10.2.3 axios 요청 방법 10.2.4 axios 응답 형식 10.2.5 기타 메서드 10.2.6 파일 업로드 처리 10.2.7. axios 요청과 config 옵션 10.2.8 Vue 인스턴스에서 axios 이용하기 10.2.9 axios 사용 시 주의 사항 10.3. 연락처 애플리케이션 예제 10.3.1 기초 작업 10.3.2 App.vue 작성 10.3.3 ContactList.vue 작성 10.3.4 입력폼, 수정폼 작성 10.3.5 사진 변경폼 작성 10.4 정리 CHAPTER 11 Vuex를 이용한 상태 관리 11.1 Vuex란? 11.2 상태와 변이 11.3 게터 11.4 액션 11.5 대규모 애플리케이션의 저장소 파일 11.5.1 역할별 분리 11.5.2 모듈 이용하기 11.6 Vuex를 이용하도록 연락처 애플리케이션 작성 CHAPTER 12 vue-router를 이용한 라우팅 12.1 vue-router란? 12.2 vue-router 기초 12.3 동적 라우트 12.4 중첩 라우트 12.5 명명된 라우트 12.6 프로그래밍 방식의 라우팅 제어 12.6.1 라우터 객체의 push 메서드 12.6.2 내비게이션 보호 12.7 라우팅 모드 12.8 라우트 정보를 속성으로 연결하기 12.9 연락처 애플리케이션에 라우팅 기능 적용 12.9.1 초기 설정 작업 12.9.2 vuex 상태 관리 기능 변경 12.9.3 main.js에 라우팅 기능 추가 12.9.4 App.vue 파일 변경 12.9.5 ContactList.vue 컴포넌트 변경 12.9.6 ContactForm.vue, UpdatePhoto.vue 컴포넌트 수정 12.10 지연 시간에 대한 처리 12.10.1 API 호출 지연 시간 발생 12.10.2 스피너 컴포넌트 작성 12.10.3 상태와 변이, 액션 변경 CHAPTER 13 트랜지션 효과 13.1 CSS 트랜지션 기초 13.2 트랜지션 컴포넌트 기초 13.3 CSS 애니메이션 처리 13.4 트랜지션 이벤트 훅 13.5 리스트에 대한 트랜지션 13.6 연락처 애플리케이션에 트랜지션 적용하기 부록 A 단위 테스트 A.1 webpack 템플릿을 이용한 테스트 A.1.1 기본 기능 테스트 A.1.2 Vue 컴포넌트 테스트 A.1.3 이벤트 시뮬레이션 A.2 Jest를 이용한 테스트 A.2.1 Jest 설정 A.2.2 간단한 테스트 코드 작성 A.2.3 Vue 컴포넌트에 대한 테스트 부록 B 서버 사이드 렌더링 B.1 프로젝트 생성과 초기화 B.2 디렉터리 구조 B.3 저장소 기능 작성 B.4 nuxt.config.js 파일 작성 B.5 레이아웃 작성 B.6 페이지 작성 B.7 중첩 라우트 적용 B.8 트랜지션 효과 적용