Do it! Vue.js 입문
저자 git.io : https://joshua1988.github.io/web-development/vuejs/doit-vuejs-book/
1주차(2018.06.04)
01 Vue.js 소개
01-1 Vue.js란 무엇인가?
- Vue.js란?
- 프레임워크 시장 속에서 뷰의 위치와 성장성
- 뷰의장점
01-2 Vue.js의 특징
- UI 화면단 라이브러리
- 컴포넌트 기반 프레임워크
- 리액트와 앵귤러의 장점을 가진 프레임워크
02 개발 환경 설정 및 첫 번째 프로젝트
02-1 뷰 학습을 위한 개발 환경 설정하기
- 크롬 브라우저 설치하기
- 아톰 에디터 설치하기
- 아톰 테마
- 아톰 패키지
- 노드제이에스 설치하기
- 뷰 개발자 도구 설치하기
02-2 Hello Vue.js! 프로젝트 만들기
- 뷰 시작하기
- 크롬 개발자 도구로 코드 확인하기
- 뷰 개발자 도구로 코드 확인하기
- 뷰 개발자 도구 사용 방법
03 화면을 개발하기 위한 필수 단위(인스턴스&컴포넌트)
03-1 뷰 인스턴스
- 뷰 인스턴스의 정의와 속성
- 뷰 인스턴스 옵션 속성
- 뷰 인스턴스의 유효 범위
- 뷰 인스턴스 라이프 사이클
2주차(2018.06.11)
03-2 뷰 컴포넌트
- 컴포넌트란?
- 컴포넌트 등록하기
- 지역 컴포넌트와 전역 컴포넌트의 차이
03-3 뷰 컴포넌트 통신
- 컴포넌트 간 통신과 유효 범위
- 상·하위 컴포넌트 관계
- 상위에서 하위 컴포넌트로 데이터 전달하기
- 하위에서 상위 컴포넌트로 이벤트 전달하기
- 같은 레벨의 컴포넌트 간 통신
- 관계 없는 컴포넌트 간 통신 - 이벤트 버스
3주차(2018.06.18)
컴포넌트 학습공유
4주차(2018.06.25)
04 상용 웹 앱을 개발하기 위한 필수 기술들(라우터&HTTP통신)
04-1 뷰 라우터
- 라우팅이란?
- 뷰 라우터
- 네스티드 라우터
- 네임드 뷰
04-2 뷰 HTTP통신
- 웹 앱의 HTTP 통신 방법
- 뷰 리소스
- 액시오스
5주차(2018.07.02)
05 화면을 개발하기 위한 기본 지식과 팁(템플릿&프로젝트 구성)
05-1 뷰 템플릿
- 뷰 템플릿이란?
- 데이터 바인딩
- 자바스크립트 표현식
- 디렉티브
- 이벤트 처리
- 고급 템플릿 기법
6주차(2018.07.09)
05-2 뷰 프로젝트 구성 방법
- HTML 파일에서 뷰 코드 작성 시의 한계점
- 싱글 파일 컴포넌트 체계
- 뷰 CLI
- 뷰 CLI로 프로젝트 생성하기
- 뷰 로더
7주차(2018.07.16 - 2018.07.23)
06 실전 애플리케이션 만들기
06-1 할 일 관리 앱 살펴보기
- 왜 할 일 관리 앱을 만들어야 하나?
- 할 일 관리 앱 살펴보기
- 애플리케이션 컴포넌트 구조도
06-2 프로젝트 생성하고 구조 확인하기
- 뷰 CLI를 이용한 프로젝트 생성
- 프로젝트 초기 설정
06-3 컴포넌트 생성하고 등록하기
06-4 컴포넌트 내용 구현하기
- 애플리케이션 제목을 보여주는 TodoHeader 컴포넌트
- 할 일을 입력하는 TodoInput 컴포넌트
- 저장된 할 일 목록을 표시하는 TodoList 컴포넌트
- TodoList.vue에 할 일 삭제 기능 추가하기
- 모두 삭제하기 버튼을 포함하는 TodoFooter 컴포넌트