[vue3] Form Input Bindings(v-model)

프론트엔드에서 폼을 처리할 때, 폼 입력 엘리먼트의 상태를 JavaScript의 상태와 동기화해야 하는 경우가 많음. 값 바인딩을 수동으로 연결하고 이벤트 리스너를 변경하는 것은 번거로운 작업임.

<input
  :value="text"
  @input="event => text = event.target.value">

v-model 디렉티브는 위의 내용을 다음과 같이 단순화하는 데 도움이 됨.

<input v-model="text>

또한 v-model은 다른 유형의 입력인 <textarea> 및 <select> 엘리먼트에 사용할 수 있음.
사용되는 엘리먼트에 따라 자동으로 다른 DOM 속성 및 이벤트 쌍으로 확장됨.

• 텍스트 유형의 <input> 과 <textarea> 경우, value 속성과 input 이벤트를 사용함.
• <input type="checkbox"> 과 <input type="radio"> 경우, checked 속성과 change 이벤트를 사용함.
• <select> 는 value를 속성으로 사용하고 change를 이벤트로 사용함.

기본 사용법

<p>메세지: {{ message }}</p>
<input v-model="message" placeholdedr="메세지 입력하기" />

하지만 IME가 필요한 언어(중국어, 일본어, 한국어 등)의 경우 IME 구성 중에 v-model 이 업데이트되지 않는 것을 알 수 있음. 이러한 업데이트에도 응답하려면 v-model 을 사용하는 대신 직접 구현한 input 이벤트 리스너와 value 바인딩을 사용해 기능을 구헝해야 함.

여러 줄 텍스트

<span>여러 줄 메세지:</span>
<p style="white-space: pre-line;">{{ mesaage }}</p>
<textarea v-mode="message" placeholder="여러 줄을 추가"></textarea>

<textarea> 내부에 이중 중괄호 문법은 작동하지 않으므로 v-model을 사용해야 함.

체크박스

단일 체크박스는 불리언을 값을 사용함.

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

배열 또는 Set에 여러 개의 체크박스 값을 바인딩 할 수도 있음.

const checkedNames = ref([])

<div>체크된 이름: {{ checkedNames }}</div>

<input type="checkbox" id="jack" value="젝" v-model="checkedNames">
<label for="jack">젝</label>

<input type="checkbox" id="john" value="존" v-model="checkedNames">
<label for="john">존</label>

<input type="checkbox" id="mike" value="마이크" v-model="checkedNames">
<label for="mike">마이크</label>

라디오

<div>선택한 것: {{ picked }}</div>

<input type="radio" id="one" value="하나" v-model="picked" />
<label for="one">하나</label>

<input type="radio" id="two" value="둘" v-model="picked" />
<label for="two">둘</label>

셀렉트 박스

<div>선택됨: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">다음 중 하나를 선택하세요</option>
  <option>가</option>
  <option>나</option>
  <option>다</option>
</select>

값 바인딩 하기

라디오, 체크박스 및 셀릭트 옵션의 경우, v-model에 바인딩된 값은 일반적으로 정적 문자열(체크박스의 경우 불리언)임.

수식어

.lazy

기본적으로 v-model은 각 input 이벤트 이후 데이터와 입력을 동기화 함. 대신 change 이벤트 이후에 동기화하기 위해 .lazy 수식어를 추가할 수 있음.

<!-- "input" 대신 "change" 이벤트 후에 동기화됨 -->
<input v-model.lazy="msg" />

.number

사용자 입력이 자동으로 수자로 유형 변환되도록 하려면, v-model 수식어로 .number 를 추가하면 됨.

<input v-model.number="age" />

.trim

사용자 입력의 공백이 자동으로 트리밍되도록 하려면 v-model 수식어로 .trim을 추가하면 됨

<input v-model.trim="msg" />