1. 이벤트 핸들링

➡️ https://ko.vuejs.org/guide/essentials/event-handling

<aside> 💡

• 반응성 (reactivity) 데이터의 변화를 감지하고 자동으로 화면 UI를 업데이트하는 기능 </aside>

• 반응성 시스템 뷰에서는 자체적으로 반응성 시스템을 사용하여 데이터 변화를 감지하도록 구성되어 있음

• v-once
  • 실습코드
• v-memo vue 3.2 이상 사용 가능. 메모이제이션 기술 <template> 태그의 구성 요소를 효율적으로 랜더링 하고 싶을 때 사용하는 기술 중 하나. 이전에 계산한 결과를 저장하여 중복 계산을 피하고 실행 속도를 향상 시키는 프로그래밍 기술
  • 실습코드
• v-model
  • 실습코드
• computed 속성
  • 실습코드
• 감시자 속성 (watch)
  • 실습코드

실습: 계산기 만들기

• 실습내용
  1. 숫자를 클릭하면 클릭한 숫자를 출력칸에 표시
  2. 숫자가 표시된 상태에서 사칙연산 기호를 클릭하면 출력칸에 표시된 숫자가 사라짐
  3. 다시 한번 숫자를 클릭하면 입력한 숫자가 출력칸에 표시
  4. 숫자가 출력칸에 표시된 상태에서 등호(=)를 클릭하면 지금까지 입력 한 숫자의 연산 결과가 화면에 표시
  5. 다시 등호를 클릭하면 아무런 일도 일어나지 않음
  6. 새로운 숫자를 클릭하면 연산 결과 뒤로 클릭한 숫자가 붙음
  7. 사칙연산 기호를 클릭하면 2번 과정부터 반복
• 실습코드