실전 코드로 배우는 Vue.js

58

실전 코드로 배우는 Vue.js

}

}

}

이 수정자를 적용하면 입력 엘리먼트의 변경 사항이

onChange

이벤트를 발동시켰을 경우에

만

v

-

model

이 이를 추적하게 된다.

TIP

v

-

model

.

number

와

v

-

model

.

trim

수정자

v

-

model

에 바인딩할 데이터 모델이 숫자 타입일 경우

v

-

model

.

number

수정자를 이용해 입력값을 숫자로 변환

할 수 있다. 비슷한 방식으로, 문자열 데이터 모델 값에서 마지막 공백을 제거하려면

v

-

model

.

trim

을 사용하면

된다.

양방향 바인딩에 대한 설명은 이게 전부다. 다음으로 단방향 바인딩을 처리하는 일반적인 디

렉티브인

v

-

bind

를 살펴보자.

2.92.9

vv

--

bindbind

를 통한 반응형 데이터 바인딩 및 를 통한 반응형 데이터 바인딩 및

PropsProps

데이 데이

터 전달터 전달

앞선 내용에서

v

-

model

로 양방향 바인딩을 구현하고 이중 중괄호

{{}}

를 이용해 단방향 데

이터를 주입하는 방법을 배웠다. 그러나 속성값 또는

Vue

컴포넌트를

props

로 다른 엘리먼

트에 전달할 때는 단방향 데이터 바인딩인

v

-

bind

를 사용한다.

v

-

bind

는

:

문자로 축약할 수 있으며

Vue

애플리케이션에서 가장 많이 사용되는 디렉티브

다. 엘리먼트의 속성, 컴포넌트의

props

, 더 나아가 자바스크립트 ...