Vue.js의 TodoMVC ToDo list 연결 스크립트 https://kr.vuejs.org/v2/examples/todomvc.html TodoMVC — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org ToDo 리스트 만들기 : 임시데이터로 todo리스트 표시 ToDo 리스트 만들기 {{ todo.text }} [ {{ remaining }} / {{ todos.length }} ] 건 처리 추가 & 삭제 기능 넣기 ToDo 리스트 만들기 {{ todo.text }} 처리완료 목록 삭제 [ {{ remaining }} / {{ todos.length }} ] 건 처리
Google Chart 코드 가져오는 방법 https://developers-dot-devsite-v2-prod.appspot.com/chart Charts | Google Developers Interactive charts for browsers and mobile devices. developers.google.com 해당 화면 하단의 코드를 복붙한다. 구글차트 사용해보기 - Google Charts 라이브러리의 CDN을 지정하는 방법 Google Charts로 원그래프 그리기 선호하는 점심 메뉴 투표 구글차트와 Vue 같이 사용하기 Google Charts로 원그래프 그리기 선호하는 점심 메뉴 투표 {{item[0]}} : {{item[1]}} 한표 + 한표 -
조건에 따른 표시 : v-if True일때만 표시 표시 {{myVisible}} 체크박스 ON 체크박스 OFF - 클릭하면 버튼을 삭제하는 예제 클릭하면 "좋아~" 버튼을 삭제하는 예제 좋아~ 반복 표시 : v-for - 배열 데이터를 리스트로 출력 배열 데이터를 리스트로 표시하는 예제 {{item}} - 오브젝트 배열 데이터를 리스트로 출력 오브젝트 배열 데이터를 리스트로 표시하는 예제 {{item.name}} \{{item.price}} - 구구단을 출력하는 예제 더보기 1 x 5 ~ 10 x 5를 반복 표시하는 예제 {{n}} x 5 = {{n * 5}} - 배열 데이터를 번호가 붙어 있는 리스트로 표시하는 예제 더보기 배열 데이터를 번호가 붙어 있는 리스트로 표시하는 예제 {{index}} : {..
이벤트와 연결하기 : v-on - 버튼 클릭 or 키 입력 시 사용한다. - => 메소드는 Vue 인스턴스에 methods 옵션을 추가해서 만든다. 클릭하면 증가하는 예제 {{ count }} 회 1씩 증가 1씩 감소 다시하기 - 파라미터를 전달하여 메소드 실행하기 : ex) v-on:click="countUp(3)" 클릭하면 증가하는 예제 {{ count }} 회 파라미터를 전달하여 메소드 실행하기 3증가 10증가 100증가 - 버튼 클릭 시 프롬프트 띄워서 원하는 수 만큼 증가시키기 클릭하면 증가하는 예제 {{ count }} 회 파라미터를 전달하여 메소드 실행하기 3증가 10증가 100증가 원하는 수 만큼 증가
연산 연습하기 x : y : 덧셈 결과 : {{xNumb+yNumb}} 곱셈 결과 : {{xNumb*yNumb}} 구구단 {{first}}곱하기 {{second}}는? 확인 {{result[0]}} {{result[1]}} * 위 코드는 확인버튼을 누르지 않아도 정답유무 결과를 출력함...
입력폼을 데이터와 연결하기 : v-model ex) - 텍스트 입력받는 input 태그와 Vue의 데이터 연결 이름 : 입력한 이름 : {{myname}} - textarea 태그와 Vue의 데이터 연결 입력한 문장 : 문장 : {{mytext}}, {{mytext.length}}글자 입력됨 - checkbox 태그와 Vue의 데이터 연결 좋아하는 과일 선택 사과 키위 포도 오렌지 바나나 선택한 과일 {{fruits}} 선택된 개수 : {{fruits.length}}개 선택됨 - button 태그와 Vue의 데이터 연결 체크하면 비활성화 시키기 동의합니다. 동의함 동의하지 않음 {{myagree}} 동의함 동의하지 않음 {{myagree}} - radio 태그와 Vue의 데이터 연결 선택한 라디오 버튼을..
요소의 속성을 데이터로 지정하는 : v-bind v-bind:속성명 ex) :속성명 으로 사용 가능하다. - 이미지 지정하기 ex) - 링크 지정하기 ex) - 정렬 위치 지정하기 (우측정렬, 좌측정렬, 중앙정렬) ex) 인라인 스타일 지정 - 인라인 : 태그마다 지정 (태그부분의 전체를 지정하는 것은 태그에 스타일을 지정함) 일반 style 태그 : style="원하는 속성 : 프로퍼티명;" Vue데이터 사용 태그 : v-bind:style="{원하는 속성 : 프로퍼티명}" 으로 사용 ex) 일반 스타일에서 background-color ⇒ Vue 사용시 backgraoundColor #id명 id선택자 .class명 class선택자 : 반응선택자 (a:action, a:hover) * (전체선택) 글..
글자 잘라내기 : substr() 날짜 계산하기 : parseInt(toDay.getFullYear()) 이름 : {{myName}}, 주민번호 : {{myBirth}} {{myName}}님. 반갑습니다. 당신의 생일은 {{myBirth.substr(2,2)}}월 {{myBirth.substr(4,2)}}일. 나이는 {{(parseInt(toDay.getFullYear())) - (parseInt(myBirth.substr(0,2)) + 1900) +1 }}세 이군요.
