[Vue.js] v-model 과 v-bind/v-on

사용자의 입력값을 받는 방법으로 v-model과 v-on:input 방법이 있다.

 

두 가지 방법에 어떤 차이가 있는지 정리해보려고 한다.

 

v-model

<input value='text' v-model="changeWord"/>

v-model 자체가 v-bind와 v-on의 조합으로 작동하는 것과 같다. 

<input v-bind:value="word" v-on:input="changeWord"/>

...

<script>
export default {
	...
	methods: {
    	changeWord(e) {
          this.word = e.target.value;
        },
    }
    ...
}
</script>

• v-bind 속성은 데이터 값을 해당 HTML 요소와 연결할 때 사용한다.
• v-on은 HTML에서 발생한 이벤트를 아래 methods의 로직과 연결할 때 사용된다.

• HTML의 input 종류에 따라 v-model의 v-bind, v-on의 구성이 달라진다.
  input --> v-bind:value | v-on:input
  checkbox --> v-bind:checked | v-on:change
  select --> v-bind:value | v-on:change

 

v-model이 v-bind/v-on가 같은 기능에 더 간결한 코드 작성을 보여주지만 한 가지 단점으로는

IME 입력(한국어, 일본어, 중국어)에 대해서 한 글자에 대한 입력이 모두 끝난 후에 입력이 되는 단점이 있다.

 

v-model 영어 입력

• v-model 한국어 입력

'요'글자 입력이 끝나야 아래 결괏값에 반영되는 것을 확인할 수 있었다.

 

v-model을 사용하여 한국어를 올바르게 처리하는 방법을 구글링을 통해 찾긴 했지만

개인적으로 v-bind | v-on으로 처리하는 것이 더 나아 보인다.

아래 참고 블로그 글을 확인하면 그 방법을 확인할 수 있다.

 

 

 

#Reference

v-model의 동작 원리와 활용 방법