책소개
이 책은 프론트엔드 자바스크립트 프레임워크 Vue.js를 빠르게 배우고 현업에 적용하고자 하는 개발자 혹은 프론트엔드 입문자를 위한 책이다. 80여 개의 예제와 각 장마다 실습문제를 제공하고 있으며 마지막 장에는 Json 기반 게시판 프로젝트를 진행해봄으로써 Vue.js로 웬만한 프론트엔드 프로그램을 디자인할 수 있는 역량을 가질 수 있을 것이다.
[샘플원고] www.roadbook.co.kr/231
대상 독자
자바스크립트 프레임워크 Vue를 빠르게 배우고 실무에 적용하고자 하는 개발자
프론트엔드 자바스크립트 프레임워크를 배우고자 하는 프론트엔드 입문자
저자소개
저자 : Yoshinao Mori
저자 : Yoshinao Mori
컴퓨터가 이 세상에 등장한 시대부터 미니게임을 만들어 오길 30년. 현재는 IOS 어플리케이션과 웹 컨텐츠 제작, 집필 활동, 관서학원대학과 성안조형대학 비상근 강사, 프로그래밍 스쿨 코프리의 강사 등 프로그래밍에 관한 폭넓은 활동을 하고 있다. 〈〈Python 1년생〉〉, 〈〈Java 1년생〉〉(성안당 번역), 〈〈Xcode로 시작하는 아이폰 프로그래밍〉〉(로드북 번역), 〈〈인공지능 앱을 만들어 보자!〉〉 〈〈재미있게 배우는 알고리즘과 프로그래밍 도감'(마이 나비 출판), 〈〈과연! 프로그래밍〉〉(SB크리에이티브) 등을 집필하였다.
역자 : 신대호
웹 개발자이다. 일본에서 웹 솔루션 관련 SI 업무를 다수 진행하였고 웹 스크립트 언어를 중점적으로 다루고 있다. 현재는 게임회사에 근무 중이며 게임 서비스에 필요한 웹 개발을 진행하고 있다. 웹 개발 영역에서 프론트 프레임워크의 중요성이 커져 React, 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
[함께 해봐요] 버
.png){kind=logo}
