폼 입력 바인딩

단방향 데이터 바인딩

연결이 한쪽 방향으로 (script에서 template로)만 되어있는 경우
메시지를 수정해도 갱신이 되지 않는다.
(input 고쳐도 h1은 똑같음)

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    :value="msg" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world'
    }
  }
}
</script>

양방향 데이터 바인딩

사용자가 데이터를 입력했을 때 input이라는 이벤트가 발생하게 되고 handler라는 메소드가 실행이 되는데 내부로 입력된 데이터의 이벤트 객체를 받아서 target의 value를 msg에 할당한다. 이게 갱신되었기 때문에 연결되어져있는 반응성을 통해 화면에 출력한다.

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    :value="msg" 
    @input="handler" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world'
    }
  },
  methods: {
    handler(e) {
      console.log(e.target.value)
      this.msg = e.target.value
    }
  }
}
</script>

<style>

</style>

간소화

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    :value="msg" 
    @input="msg = $event.target.value" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world'
    }
  },
}
</script>

v-model

양방향 데이터 바인딩을 v-model이라는 디렉티브로 구현 가능
앞선 내용보다 훨씬 간소화 된 모습!
여러가지 input요소들에 손쉽게 데이터를 연결해서 쓸 수 있음
주의사항: v-model로 한글을 출력하게 되면 한박자 늦는 모습
한글 입력할 때는 v-model이 아닌 간소화 버전으로 쓸 것(약간 수동)

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    v-model="msg" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world'
    }
  },
}
</script>