0509 Vue.js (2)

Vue Instance 속성

Vue method

• this : 객체(Vue instance)가 가진 변수나 함수에 접근하기 위해 사용
• Mustache 표기법 내에서 함수명 뒤의 '()' 를 생략할 경우, 문자열로 인식됨

Vue filter

: 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능

• 중괄호 보간법 [ {{}} ] 또는 v-bind 속성에서 사용 가능
  ex: [ val | filt1 | filt2 ] => val 값을 filt1에서 변경한 뒤, 이 값을 다시 filt2에서 변경 (chaining 가능)
• 문자의 포맷을 설정할 때 유용함 (ex: 핸드폰 번호, 천 단위마다 쉼표 찍기)
• 전역 필터 ; Vue.filter (필터 이름, 콜백함수)
  지역 필터 ; filters : { 필터 이름 (가져올 값, 초기값) }

Vue Computed

• 특정 데이터의 변경사항을 실시간으로 처리
• 캐싱을 이용하여 데이터의 변경이 없을 경우 캐싱된 데이터(값)를 반환(항상 return 필요)
  → 쓸데없는 호출을 줄일 수 있음
• method : 요청할 때마다 매번 실행, 단순 작업에 사용 / computed : 인스턴스가 가진 데이터를 변경해야할 때 사용

Vue watch

• Vue instance의 특정 property가 변경될 때 실행할 콜백 함수를 설정
• 형식 ; data변수명 : function (새로운값, 이전값) {...}
• 명령적인 watch 콜백(명령형 프로그래밍 방식)보다 computed 속성(선언형 프로그래밍 방식)을 사용하는 것을 권장
  - Computed는 종속된 data가 변경되었을 경우, 그 data를 다시 계산하여 캐싱
  - Watch는 data가 변경되었을 경우, 다른 data를 변경하는 작업을 실행

Vue event

• v-on directive를 사용하여 DOM 이벤트를 듣고 트리거 될 때 Javascript를 실행
• inline event handling을 기본으로 함
• 이벤트 핸들러 내부에서 event.preventDefault()를 사용하거나 이벤트 수식어(.prevent) 사용

CSS binding

• element의 class와 style을 변경
• v-bind:class는 조건에 따라 class를 적용할 수 있음

Component

• Vue의 가장 강력한 기능 중 하나
• HTML Element를 확장하여 재사용 가능한 코드를 캡슐화
• Vue Component는 Vue Instance이기도 하기때문에 모든 옵션 객체를 사용 가능

전역 컴포넌트

• Vue.component (tagName, options) 를 사용해서 등록
• 권장하는 컴포넌트 이름 : 케밥 표기법 (전부 소문자, '-' 이용) ex: my-component-name
  단, 엘리먼트를 부를 때에는 반드시 케밥 표기법을 사용해야 함
  cf. 파스칼 표기법 (단어의 첫글자를 대문자로) ex: MyComponentName

지역 컴포넌트

: 컴포넌트를 components 인스턴스 옵션으로 등록하여 다른 인스턴스/컴포넌트의 범위에서만 사용할 수 있는 컴포넌트를 만들 수 있음

컴포넌트간 통신

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

상위에서 하위 컴포넌트로 data 전달

• 하위 컴포넌트는 상위 컴포넌트의 값을 직접 참조 불가능
• data와 마찬가지로 props 속성값을 template에서 사용 가능