할머니의 콤퓨타 도전기

v-if 조건부 블럭 안의 이벤트 리스너와 자식 컴포넌트가 토글하는 동안 적절하게 제거되고 다시 만들어지기때문에 "진짜" 조건부 렌더링 됨 렌더링에서 조건이 거짓인 경우 조건 블록이 처음으로 참이 될 때 까지 렌더링 되지 않음 v-show CSS 기반 토글만으로 초기 조건에 관계 없이 엘리먼트가 항상 렌더링 됨 v-if는 토글 비용이 높고 v-show는 초기 렌더링 비용이 높다 따라서 매우 자주 바꾸기를 원한다면 v-show를, 런타임 시 조건이 바뀌지 않으면 v-if를 권장 kr.vuejs.org/v2/guide/conditional.html 조건부 렌더링 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 코드 구현 (v-if) 여러개의 div 태그 한번에 조건..

클래스와 스타일 바인딩 kr.vuejs.org/v2/guide/class-and-style.html 클래스 바인딩 코드 구현 hello click! 실행 화면 스타일 바인딩 구현 코드 hello hello click! 실행 화면

Watch 데이터의 감시자가 필요한 경우에 사용 kr.vuejs.org/v2/guide/computed.html#watch-%EC%86%8D%EC%84%B1 computed와 watch — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 코드 구현 {{ message }} Click! {{ updated }} 실행 화면

Computed 속성 methods 속성과 달리 처음에 한번만 계산되고 캐싱된 값을 계속 사용 값이 변경된다면 catch해서 다시 계산하고 적용 kr.vuejs.org/v2/guide/computed.html computed와 watch — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 코드 구현 Click! {{reverseMessage}} {{reverseMessage}} {{reverseMessage}} 실행 화면

양방향 바인딩 stackoverflow 의 경우 Body에서 데이터를 입력하면 밑에 실시간으로 미리보기가 보여진다. 이와 같은 개념이 양방향 바인딩이다. Vue에서는 v-model로 양방향 바인딩이 구현 가능하다. 코드 구현 {{text}} submit 실행 화면

이벤트 어떤 사건이 발생했을 때 무엇을 할 것이다라는 것을 말함 이벤트 핸들링 vuejs.org/v2/guide/events.html Event Handling — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org onClick 이벤트 {{age}} plus minus 실행 화면 onSubmit 이벤트 submit 실행 화면