v-model 바인딩

캡틴판교님의 게시물을 참고해 작성된 내용입니다.

 

---

1. v-model

v-model 지시자는 애플리케이션 모델에 폼 데이터를 연결할 때 사용된다.

※  바인딩 지시자

v-bind	v-model
주로 HTML 속성 바인딩에 사용	주로 입력과 폼 바인딩에 사용

 

 

2. v-model 사용법

1) v-model 사용해 바인딩

<input v-model="inputText">

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

2) v-bind와 v-on을 사용해 바인딩

<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;
    }
  }
})

 

1번 방법과 2번 방법은 동작하는 원리가 같다.

차이점이 있다면, v-bind와 v-on을 이용하는 두번째 방법은 언어에 따른 차이없이 동일하게 작용하지만, v-model을 이용하는 첫번째 방법으로 한국어를 입력받게 된다면 한글자씩 나중에 바인딩 된다는 한계점이 있다. 

 

 

3. v-model 속성

HTML 입력 요소의 종류에 따라 v-model 속성이 각각 다음과 같이 구성된다.

1. input 태그에는 value / input
   
2. checkbox 태그에는 checked / change
   
3. select 태그에는 value / change