Vue.js -2

Vue.js -2

Vue.js

Vue computed 속성

- 특정 데이터의 변경사항을 실시간으로 처리

- 캐싱을 이용하여 데이터의 변경이 없을 경우 캐싱된 데이터를 반환

- Setter와 Getter를 직접 지정할 수 있음

- 작성은 method 형태로 작성하지만 Vue에서 proxy 처리하여 property처럼 사용

Computed와 Method의 차이

Computed : Vue 인스턴스가 생성될 때, data의 message값을 받아 reversedMsg를 계싼하여 저장해 놓음(캐싱)

위 코드에서 reversedMsg를 한 번 실행하는 것과 같음

Method : reversedMsg()를 사용하려고 할 때 마다 계산

위 코드에서 reversedMsg()를 세 번 실행하는 것과 같음

Vue watch 속성

- Vue Instance의 특정 property가 변경될 때 실행할 콜백 함수 설정

Vue evnet

- DOM Event를 청취하기 위해 v-on directive 사용

- inline event handling

- method를 이용한 event handling

Vue event 청취 : v-on

- v-on directive를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있음

method event handler

- 이벤트 발생시 처리 로직을 v-on에 넣기 힘듦.

- v-on에서 이벤트 발생 시 처리해야 하는 method의 이름을 받아 처리

inline method handler

- 메소드 이름을 직접 바인딩 하는 대신 인라인 JavaScript 구문에 메소드를 사용할 수도 있음

- 원본 DOM 이벤트에 액세스 해야하는 경우 특별한 $event 변수를 사용해 메소드에 전달할 수도 있음

이벤트 수식어 (Event Modifier)

- method는 DOM의 이벤트를 처리하는 것 보다 data 처리를 위한 로직만 작업하는 것이 좋음

- Vue는 v-on 이벤트에 이벤트 수식어를 제공

- 수식어는 점으로 표시된 접미사

키 수식어 (Key Modifier)

- Vue는 키 이벤트를 수신할 때 v-on에 대한 키 수식어를 추가 가능

- key code

.enter (.13)

.tab

.delete ("Delete" 와 "Backspace")

.esc

.space

.up

.down

.left

.right

ref, $refs.

- 뷰에서는 $refs 속성을 이용해 DOM에 접근할 수 있음

- 뷰의 가장 중요한 목정 중 하나는 개발자가 DOM을 다루지 않게 하는 것

- 되도록 ref 사용을 피하는 것이 좋음

class binding

- element의 class와 style을 변경

- v-bind:class는 조건에 따라 class를 적용 가능

폼 입력 바인딩 (Form input bindings)

- v-model directive를 사용하여 폼 input과 textarea element에 양방향 데이터 바인딩을 생성 가능

- text와 textarea 태그는 value속성과 input 이벤트를 사용

- 체크박스들과 라디오 버튼들은 checked 속성과 change 이벤트를 사용

- Select 태그는 value를 prop으로, change를 이벤트로 사용

form - 수식어 (Modifiers)

- .lay : change 이벤트 이후에 동기화 가능

- .number : 사용자 입력이 자동으로 숫자로 형 변환

- .trim : 입력이 자동으로 trim 됨

from http://dabonee.tistory.com/55 by ccl(A) rewrite - 2021-11-14 19:01:52