[vue] v-model

Vue에서 제공하는 여러가지 편리한 기능 중 한 번쯤 정리하고 싶은 것들이 있었는데, 오늘은 v-model를 정리해보려고한다!

form의 input 요소나 textarea요소, select 요소에 쌍방향 데이터 바인딩을 만들고 싶을 때, v-model 디렉티브를 사용할 수 있다.

v-model의 역할은 "변경과 데이터를 엮어주는 것"이라고 할 수 있다.
즉,  (1) 표시할 데이터 (2) 변경이 있다면 데이터에 반영
이 두 가지를 세트로 한 것이 쌍방향(two-way) 데이터 바인딩이며, 이것을 v-model이 해준다는 것이다.

<input :value="email" @input="updateEmail" />
new Vue({
  data: {
    email: ''
  },
  methods: {
    updateEmail: function(event) {
      this.email = event.target.value;
    }
  }
})

input 박스에 입력하면 입력한 텍스트가 화면에 렌더링되는 간단한 코드이다. v-model을 이용하면 위 코드를 훨씬 간단하게 쓸 수 있다.

<input v-model="email">
new Vue({
  data: {
    email: ''
  }
})

v-model은 v-bind와 v-on을 합쳐놓은 것이다. (이를 two-way binding 이라 한다.) 덕분에 첫번째 코드와 같이 따로 updateEmail과 같은 이벤트 리스너를 등록하지 않아도, 알아서 email 값을 업데이트 해준다.

v-model은 내부적으로 prop의 기본값으로 value (:value)를, 이벤트의 기본값으로 input (@input)을 가진다.

• 텍스트와 여러 행의 텍스트는 value 속성과 input 이벤트를 사용한다.
• 체크박스와 라디오 박스는 checked 속성과 change 이벤트를 사용한다.
• 선택 필드는 value 속성과 change 이벤트를 사용한다.
• checkbox의 경우에는 value 속성과 바인딩 되는 것이 아니라 체크 속성 여부에 따라 boolean타입의 true/false로 설정된다.