[Vue.js] tutorial - 5. Form Bindings

2024. 7. 31.·🎨 프론트엔드 공부/Vue & Nuxt

📍v-model directive

- v-bind, v-on directive를 함께 사용하면 <input> 엘리먼트에 양방향 바인딩을 만들 수 있다

- 즉, <input> value와 컴포넌트의 state가 동기화된다

<input :value="text" @input="onInput">
function onInput(e) {
  // a v-on handler receives the native DOM event
  // as the argument.
  text.value = e.target.value
}

 

- 양방향 바인딩을 단순화하기 위해, v-model directive를 사용할 수 있다

<input v-model="text">
<!-- 아래와 동일 -->
<input :value="text" @input="onInput">
<!-- 물론 text state가 존재해야 함 -->

 

- v-model은 자동으로 <input> value와 바인딩된 state를 동기화한다

- 따라서 v-model을 사용하면 별도의 이벤트 핸들러를 부착하지 않아도 된다

- v-model은 text input, checkbox, radio button, select dropdown 등에 사용할 수 있다

'🎨 프론트엔드 공부/Vue & Nuxt' 카테고리의 다른 글
  • [Vue.js] tutorial - 7. List Rendering
  • [Vue.js] tutorial - 6. Conditional Rendering
  • [Vue.js] tutorial - 4. Event Listeners
  • [Vue.js] tutorial - 3. Attribute Bindings
지식물원
지식물원
지식이 자라는 식물원!
  • 지식물원
    지식물원
    지식물원
  • 전체
    오늘
    어제
    • 분류 전체보기 (516) N
      • 🎨 프론트엔드 공부 (253) N
        • JS & TS (92) N
        • HTML & CSS (22)
        • React & Next (49)
        • Vue & Nuxt (22)
        • 기타 (68)
      • 🤓 기술 학습 & 공부 기록 (116)
        • Node.js (0)
        • Python (37)
        • 백엔드 (0)
        • 딥러닝 (1)
        • 컴퓨터 일반 (72)
        • 개발 인프라 (6)
      • 👨‍💻 프로젝트 경험 (6)
        • Work (0)
        • Toy (6)
      • ⚙️ 개발 팁 & 노하우 (21)
        • 프론트엔드 (6)
        • 기타 (15)
      • ☕️ 커리어 & 인터뷰 준비 (88)
        • 코딩 테스트 (88)
      • 📰 기술 트렌드 & 생각 정리 (4)
      • 📚 기타 (25)
        • 마케팅 (15)
        • 비개발서적 (10)
  • 블로그 메뉴

    • 태그
  • 링크

  • 공지사항

    • 모바일 접속 시 코드 하이라이팅 깨질 때
  • 인기 글

  • hELLO· Designed By정상우.v4.10.3
지식물원
[Vue.js] tutorial - 5. Form Bindings
상단으로

티스토리툴바