책이 세상을 바꾼다

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

 

찾아보기