Vue.js 초급 공부 Part IV - Template

[ 뷰의 템플릿 문법 ]

 

- 뷰로 화면을 조작하는 방법을 의미한다 

- 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다 

- 데이터 바인딩 :

• 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법 
• 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)이다 -> {{ }}

- 디렉티브 :

• 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법이다
• 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공 
• 특정 속성 값에 따라 화면의 영역을 표시하거나 표시하지 않을 수 있다 -> show : false & v-if="show"

v-bind v-if v-show

v-on 디렉티브 이용 키보드,마우스 이벤트 처리

* keyup : 키보드의 모든 키 

- keyup 뒤에 . (modifier)를 붙히고 특정 키보드만 설정 가능 

 

watch를 이용하여 log로 테스트 할 수 있다

[ watch vs computed ]

- computed는 자동으로 값을 변경하고 캐싱해주는 반응형 getter이다 

- computed의 장점은 의존성을 가진 데이터가 변경되지 않으면 getter 호출 시 내부 로직연산을 다시 하지 않고,

이미 계산되어 있는 결과를 즉시 반환한다 - Vue가 데이터를 추적하기 위해 사용하는 방식 덕분에 불필요한 연산을 줄여준다

- watch는 Vue 인스턴스의 특정 프로퍼티가 변경될 때 지정한 콜백함수가 실행되는 기능이다 

- 데이터 변경 시 특정 동작을 취해야 하는 상황은 watch, 그 외 상황은 대체로 computed가 적합하다 

 

 

watch 속성과 computed 속성 차이점에 관한 공식 문서 링크 

https://vuejs.org/v2/guide/computed.html#ad

Computed Properties and Watchers — Vue.js

 

computed 속성을 이용한 클래스 코드 작성