<template>
  <div id="app">
    <h1>입력할때 마다 값 변경하기</h1>
    <h1>msg : {{msg}}</h1>
    <!-- @input : 입력이 될때 발동함 -->
    <input 
      type="text" 
      :value="msg"
      @input="handler">
    <!-- 한글 사용할떄는 이거로 사용하기 -->
    <input 
      type="text" 
      :value="msg"
      @input="msg = $event.target.value"
      placeholder="한글을 사용할떄는 이 코드를 사용하세요">
    <!-- 위에 코드 더 간략하게 하기 -->
    <input type="text" v-model="msg">
    <br>
    <br>
    <h1>체크 할때마다 T/F 변경하기</h1>
    <h1>flag : {{flag}}</h1>
    <input 
      type="text" 
      v-model="msg">
    <!--  -->
    <input 
      type="checkbox"
      v-model="flag">
  </div>
</template>

<script>
export default {
  data(){
    return{
      msg:'Hello',
      flag:false
    }
  },
  methods:{
    handler(event){
      console.log(event.target.value) // 입력할때마 value값 반환
      this.msg = event.target.value // 입력할때마다 msg값 변경됨
    }
  }
}
</script>