할머니의 콤퓨타 도전기

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 실행 화면

Data Binding - 단방향 데이터 값이 변경되면 자동으로 업데이트 코드 구현 {{greeting(name)}} jione github 실행 화면

코드 구현 {{greeting('jione')}} 실행 화면

el 옵션 Vue가 실행될 HTML의 DOM 요소를 지정 (# --> id 지정, . --> 클래스 지정) data 옵션 data Vue가 바라보는 data 객체를 지정 (직접 객체를 작성해도 되고 미리 선언된 객체변수를 작성해도 됨) 코드 구현 {{name}} 실행 화면