14. 양방향 바인딩 v-model | v-model 수식어

v-model

 

프론트엔드에서 입력 양식을 처리할때 입력 요소의 상태와 자바스크립트의 상태를 동기화해야 하는 경우가

많습니다. value를 바인딩하고 @input 이벤트로 text를 변경하는것은 번거로울 수 있습니다.

 

그래서 Vue에서는 이런 작업은 단순화 하도록 양방향 바인딩을 할 수 있는 v-model 디렉티브를 제공합니다.

 

---

textarea

 

:value, @input

 

v-model

---

checkbox,  radio, select

 

v-model은 내부적으로 HTML 요소가 어떤 요소냐에 따라 서로 다른 속성(:value)과 이벤트(@input)을 사용합니다.

 

• input text="text"와 textarea는 value 속성과 input 이벤트를 사용합니다.
• checkbox와 radio 버튼은 checked 속성와 change 이벤트를 사용합니다
• select 태그는 value 속성과 change 이벤트를 사용합니다

---

v-model 수식어 (modifiers)

 

.lazy

기본적으로, v-model은 각 imput 이벤트 후 입력과 데이터를 동기화 합니다.

(단, 앞에서 설명한 IME 구성은 제외 됩니다) lazy 수식어를 추가하여 change 이벤트 이후에 동기화 할 수 있습니다.

쉬운 설명 : input에 글씨 쓰는 도중에는 동기화 안되고 글씨 다 쓰고 다른작업으로 넘어가면 동기화 된다.

 

 

.number

사용자 입력이 자동으로 nunber 타입으로 형변화 되길 원하면, .number 수식어를 추가하면 됩니다.

 

 

.trim

사용자가 입력한 내용에서 자동으로 공백을 제거하는 트림처리가 되길 바라면, v-model이 관리하는

input에 trim 수식어를 추가하면 됩니다