Vue 양방향 바인딩 v-model

Vue에서는 양방향 바인딩을 v-model를 이용하여 간단하고 쉽게 할 수 있는 방법이 있습니다.

 

양방향 바인딩이란?

입력요소의 이벤트를 수신하는 동시에 값을 보내는 방식입니다.

동시에 데이터 통신이 일어나기 때문에 양방향 바인딩이라고 합니다

v-model 이란?

Vue의 v-bind 속성과 v-on 속성을 이용하여 양방향 바인딩을 할 수 있는 유용한 방법입니다.

1. v-on 이벤트를 이용하여 데이터에 값을 넣는다.
2. v-bind를 이용하여 속성에 데이터를 넣어준다.

Vue.component("App", {
  data() {
    return {
      name: ""
    };
  },
  template: `
  <div>
  <input type="text" v-bind:value="name" v-on:input="setInput"/>
  <p>이름: {{ name }}</p>
  </div>`,
  methods: {
    setInput(event) {
      this.name = event.target.value;
    }
  }
});

setInput 이벤트롤 통해서 input 태그에 입력된 값을 name 데이터에 넣어줍니다.

name 데이터에 들어간 이름은 다시 v-bind 속성을 이용하여 input value에 값이 들어가게 됩니다.

 

이런 일련의 과정들을 vue 에서는 v-model를 이용하여 간단하게 구현할 수 있습니다.

Vue.component("App", {
  data() {
    return {
      name: ""
    };
  },
  template: `
  <div>
  <input type="text" v-model="name" placeHolder="이름을 입력하세요"/>
  <p>이름: {{ name }}</p>
  </div>`,
});

코드펜 예시

See the Pen Untitled by powerku (@powerku) on CodePen.

※ 단, 한글을 입력할 때는 한 글자를 다 입력해야 양방향 바인딩이 됩니다.

Vue 데이터 바인딩 보간법 v-bind

Vue 이벤트와 methods 사용하기