Vue 폼 입력 바인딩

• v-model 디렉티브를 사용하여 input, textarea, select 요소들에 양방향 데이터 바인딩을 생성할 수 있음
• input :value 속성 + @input event = v-model
• v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송
  • text와 textarea 태그는 value속성과 input이벤트를 사용
  • 체크박스와 라디오버튼들은 checkcd 속성과 change 이벤트를 사용
  • select 태그는 value를 prop으로, change를 이벤트로 사용

---

- 주의사항

• v-model을 통해서 한글을 입력한 경우 한박자 늦게 적용됨(자음 + 모음이 완성되야 적용)
• 한글을 입력할 경우에는 :value + @input 을 통해 양방향 바인딩 적용

---

- 수식어

• .lazy
  • 기본적으로 v-model은 각 input 이벤트 후 입력과 데이터를 동기화
  • lazy 수식어를 추가하여 change 이벤트 이후에 동기화

  <!-- "input" 대신 "change" 이후에 동기화 됩니다. -->
  <input v-model.lazy="msg" />

• .number
  • 사용자 입력이 자동으로 숫자로 형변환
    
    
• .trim
  •  사용자가 입력한 내용에서 자동으로 앞뒤 공백 제거

---

[ 참고자료 ]

https://v3.ko.vuejs.org/guide/forms.html#%E1%84%80%E1%85%B5%E1%84%87%E1%85%A9%E1%86%AB-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%87%E1%85%A5%E1%86%B8

폼 입력 바인딩 | Vue.js