Vue.js

Vue filter

• 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능
• filter를 이용하여 표현식에 새로운 결과 형식 적용

Vue computed

• 특정 데이터의 변경사항을 실시간으로 처리
• 캐싱을 이용하여 데이터의 변경이 없을 경우 캐싱된 데이터를 반환
• Setter와 Getter를 직접 지정할 수 있음
• 작성은 method 형태로 작성하지만, Vue에서 proxy 처리하여 property처럼 사용

computed VS method

• computed: Vue 인스턴스가 생성될 때 값을 받아 계산 후 저장함
• method: 메서드를 사용하려고 할 때마다 계산

Vue watch

• 특정 property가 변경될 때 실행할 콜백 함수 설정
• computed는 종속된 data가 변경되었을 경우 그 data를 다시 계산하여 캐싱함
• watch는 data가 변경되었을 경우 다른 data를 변경하는 작업을 함

Vue event

• DOM Event를 청취하기 위해 v-on directive 사용
• 인라인 이벤트 핸들링
• 메서드를 이용한 이벤트 핸들링
• 이벤트 발생시 처리 로직을 v-on에 다 넣기 힘들다. 이를 해결하기 위해 method의 이름을 받아서 처리한다.
• 메서드 이름을 직접 바인딩하는 대신 인라인 자바스크립트 구문에 메서드를 사용할 수도 있다.

컴포넌트(Component)

• HTML Element를 확장하여 재사용 가능한 코드를 캡슐화
• 전역 컴포넌트, 지역 컴포넌트
• 전역 컴포넌트: Vue.component({컴포넌트 이름, 옵션)
• 지역 컴포넌트: Vue 인스턴스 내 components 안에 위치

컴포넌트간 통신

• 상위(부모) - 하위(자식) 컴포넌트 간 data 전달 방법
• 부모 → 자식: props 라는 특별한 속성을 전달(Pass Props)
• 자식 → 부모: event 로만 전달 가능(Emit Event)

사용자 정의 이벤트

• 컴포넌트 및 props와 달리 이벤트는 자동 대소문자 변환을 제공하지 않음
• 대소문자를 혼용하는 대신 emit 할 정확한 이벤트 이름 작성 권장
• 이벤트 발생 → $emit, 이벤트 수신 → $on