v-model 없이 구현

<input v-bind:value="inputText" v-on:input="updateInput">

new Vue({ 
  data:{ 
    inputText: ''
  }, 
  methods:{ 
    updateInput: function(event){ 
      var updatedText = event.target.value
      this.inputText = updatedText
    }
  }
})

v-model

<input v-model="inputText">

new Vue({
  data: { 
    inputText: ''
  }, 
})

v-model
입력 값이 자동으로 뷰 데이터 속성에 연결된다

v-bind + v-on
일일이 v-bind와 v-on속성을 다 지정해주지 않아도 더 편하게 개발 가능
v-bind : 뷰 인스턴스의 데이터 속성을 해당 html 요소에 연결할 때 사용
v-on: 해당 html 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용
사용자 이벤트에 의해 실행된 뷰 메서드 함수의 첫번째 인자에는 event가 들어온다

태그에 따라 v-model 속성이 다 다르다

input 태그에는 value/input
checkbox 태그에는 checked/change
select 태그에는 values/change

한 글자 입력이 끝나야 inputText 데이터가 인풋 박스의 텍스트 값과 동기화된다