// data() 에서의 return 은 단방향 데이터 바인딩이다.
// @input 을 통해서 양방향 데이터 바인딩으로 바꿀 수 있다.
// @input 은 input 에 입력이 시작되면 모든 @input 이벤트로 해석된다.

<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>

// 이제 input 에 데이터를 입력하면 화면에서 msg 가 바로바로 반영된다.

// 축소 할 수 있다.
// v-model 사용 시 주의사항
// 한글 입력시에는 한박자 늦게 동작한다.
// 한글을 사용할때는 다음과 같이 사용하면 즉시 적용된다.
<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    :value="msg" 
    @input="msg = $event.target.value" />
</template>

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

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

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