Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/joshua1988/doit-vuejs

'Do it! Vue.js 입문' 책 예제 코드 저장소
https://github.com/joshua1988/doit-vuejs

do-it javascript vue

Last synced: about 21 hours ago
JSON representation

'Do it! Vue.js 입문' 책 예제 코드 저장소

Awesome Lists containing this project

README

        

# Do it! Beginning Vue.js
> This repository contains all the code samples, quizzes and projects for Do it! Beginning Vue.js book.

이 리포지토리는 Do it! Vue.js 입문 도서의 예제, 직접 해보세요, 종합 프로젝트 코드가 포함되어 있습니다.

책에 안내된 번호에 따라 코드를 활용해보세요 :)

## 구성
- [예제](#예제)
- [직접해보세요](#직접해보세요)
- [종합프로젝트](#종합프로젝트)

## 예제
#### 2장
1. [Hello Vue.js](https://github.com/joshua1988/doit-vuejs/blob/master/exam/02/02-1/index.html)

#### 3장
1. [3-1 라이프 사이클 실습 예제](https://github.com/joshua1988/doit-vuejs/blob/master/exam/03/03-1/index.html)
2. [3-2 message 값을 변경한 라이프 사이클 실습 예제](https://github.com/joshua1988/doit-vuejs/blob/master/exam/03/03-2/index.html)
3. [3-3 전역 컴포넌트 등록하기](https://github.com/joshua1988/doit-vuejs/blob/master/exam/03/03-3/index.html)
4. [3-4 지역 컴포넌트 등록하기](https://github.com/joshua1988/doit-vuejs/blob/master/exam/03/03-4/index.html)
5. [3-5 지역 컴포넌트와 전역 컴포넌트 등록하기](https://github.com/joshua1988/doit-vuejs/blob/master/exam/03/03-5/index.html)
6. [3-6 인스턴스 유효 범위와 전역, 지역 컴포넌트 관계](https://github.com/joshua1988/doit-vuejs/blob/master/exam/03/03-6/index.html)
7. [3-7 컴포넌트 유효 범위 증명](https://github.com/joshua1988/doit-vuejs/blob/master/exam/03/03-7/index.html)
8. [3-8 props 속성을 사용한 데이터 전달 예제](https://github.com/joshua1988/doit-vuejs/blob/master/exam/03/03-8/index.html)
9. [3-9 이벤트를 발생시키고 수신하기](https://github.com/joshua1988/doit-vuejs/blob/master/exam/03/03-9/index.html)
10. [3-10 이벤트 버스 구현하기](https://github.com/joshua1988/doit-vuejs/blob/master/exam/03/03-10/index.html)

#### 4장
1. [4-1 뷰 라우터 실습](https://github.com/joshua1988/doit-vuejs/blob/master/exam/04/04-1/index.html)
2. [4-2 네스티드 라우터 구현하기](https://github.com/joshua1988/doit-vuejs/blob/master/exam/04/04-2/index.html)
3. [4-3 네임드 뷰 구현하기](https://github.com/joshua1988/doit-vuejs/blob/master/exam/04/04-3/index.html)
4. [4-4 뷰 리소스로 데이터 받아오기](https://github.com/joshua1988/doit-vuejs/blob/master/exam/04/04-4/index.html)
5. [4-5 액시오스로 데이터 받아오기](https://github.com/joshua1988/doit-vuejs/blob/master/exam/04/04-5/index.html)

#### 5장
1. [5-1 v-bind 예제](https://github.com/joshua1988/doit-vuejs/blob/master/exam/05/05-1/index.html)
2. [5-2 자바스크립트 표현식 예제](https://github.com/joshua1988/doit-vuejs/blob/master/exam/05/05-2/index.html)
3. [5-3 자바스크립트 표현식 사용 시 주의할 점](https://github.com/joshua1988/doit-vuejs/blob/master/exam/05/05-3/index.html)
4. [5-4 많이 사용되는 디렉티브 다루기](https://github.com/joshua1988/doit-vuejs/blob/master/exam/05/05-4/index.html)
5. [5-5 v-on 디렉티브 이용해 이벤트 처리](https://github.com/joshua1988/doit-vuejs/blob/master/exam/05/05-5/index.html)
6. [5-6 v-on 디렉티브에 인자 값 넘기기](https://github.com/joshua1988/doit-vuejs/blob/master/exam/05/05-6/index.html)
7. [5-7 event 인자를 이용해 돔 이벤트 접근하기](https://github.com/joshua1988/doit-vuejs/blob/master/exam/05/05-7/index.html)
8. [5-8 computed 속성과 methods 속성의 차이점](https://github.com/joshua1988/doit-vuejs/blob/master/exam/05/05-8/index.html)
9. [5-9 watch 속성 예제](https://github.com/joshua1988/doit-vuejs/blob/master/exam/05/05-9/index.html)

## 직접해보세요
- [3-2 지역, 전역 컴포넌트 등록하기](https://github.com/joshua1988/doit-vuejs/tree/master/quiz/03-2)
- [3-3 props를 이용하여 컴포넌트 통신하기](https://github.com/joshua1988/doit-vuejs/tree/master/quiz/03-3)
- [4-1 네임드 뷰 라우터를 이용하여 페이지 이동하기](https://github.com/joshua1988/doit-vuejs/tree/master/quiz/04-1)
- [5-1 뷰 템플릿 디렉티브 구현하기](https://github.com/joshua1988/doit-vuejs/tree/master/quiz/05-1)

## 종합프로젝트
- [TODO it! 애플리케이션 확인 링크](https://vuejstodo-aa185.firebaseapp.com/)
- [TODO it! 애플리케이션 소스](https://github.com/joshua1988/doit-vuejs/tree/master/final/vue-todo)

## 입문 책을 보고나서 보면 좋은 온라인 강좌

1. [Vue.js 시작하기](https://www.inflearn.com/course/Age-of-Vuejs/)
2. [Vue.js 중급 강좌](https://www.inflearn.com/course/vue-pwa-vue-js-%EC%A4%91%EA%B8%89/?utm_source=blog&utm_medium=githubio&utm_campaign=captianpangyo&utm_term=banner)
3. [Vue.js 완벽 가이드](https://www.inflearn.com/course/vue-js/?utm_source=blog&utm_medium=githubio&utm_campaign=captianpangyo&utm_term=banner)

> 추천 학습 로드맵 : Do it! Vue.js 입문 -> Vue.js 시작하기 -> Vue.js 중급 -> Vue.js 완벽 가이드

## 진행 예정인 오프라인 강좌

- [Vue로 구현하는 PWA 캠프](https://www.fastcampus.co.kr/dev_camp_wap/)

- 기간 : 19.08.24(토) ~ 19.11.02(토) 8주
- 일정 : 매주 토요일 14시 ~ 19시
- 장소 : 패스트 캠퍼스 (강남역 4번 출구 앞)

- [Vue.js 정복 캠프](https://www.fastcampus.co.kr/dev_camp_vue/)

- 기간 : 19.10.14(월) ~ 19.11.20(수) 6주
- 일정 : 매주 월/수 20시 ~ 23시
- 장소 : 패스트 캠퍼스 (강남역 4번 출구 앞)

## License & Copyright
**Copyright © 2018 Captain Pangyo**

Creative Commons License

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 4.0 Unported License.