Form 입력 바인딩 | Vue.js

→ 프론트엔드에서 폼을 처리할 때, 폼 입력 엘리먼트의 상태를 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 를 이벤트로 사용한다.

기본 사용법

텍스트