폼 입력 - 바인딩

단방향 데이터 바인딩은 바인딩된 데이터를 수정하여도 실제적으로 데이터가 변경되지 않는다.

 

양방향 데이터 바인딩은 바인딩된 데이터가 수정되면 실제 데이터도 변경되고 그 데이터를 가져오는 곳에서도 자동으로 갱신된다.

 

@input: input 태그에 데이터가 입력되면 이벤트 발생

 

v-model을 이용하여 간편하게 위와 같은 이벤트를 발생할 수 있다.

하지만 한글을 입력할때에는 바로 적용이 안된다.

 

따라서 한글을 이용할 때에는 @input을 이용하여 사용하는 것이 좋을것 같다.

 

코드 예제

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    :value="msg" />
  <br /><br />
  @input: input 태그에 데이터가 입력되면 이벤트 발생
  <input
    type="text"
    :value="msg" 
    @input="handler" />
  <br /><br />
  핸들러 메소드를 사용하지 않고 양방향 데이터 바인딩
  <input
    type="text"
    :value="msg" 
    @input="msg=$event.target.value" />
  <br /><br />
  v-modle을 이용하여 간략화 
  <input
    type="text"
    v-model="msg" />
  <br /><br />
  checkbox 예제
  <h1>{{ checked }}</h1>
  <input
    type="checkbox"
    v-model="checked" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world',
      checked: false
    }
  },
  methods: {
    handler(evnet) {
      // evnet.target: 이벤트가 발생된 태그를 출력
      console.log(evnet.target);
      // evnet.target.value: 실제 입력된 데이터를 출력
      console.log(evnet.target.value);
      // 새로 변경된 데이터를 msg 데이터에 저장
      // msg 데이터가 갱신된다.
      this.msg = evnet.target.value;
    }
  }
}
</script>

 

브라우저 확인