[Vue.js] tutorial - 5. Form Bindings

📍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 등에 사용할 수 있다