[Vue]6. v-model / watch()

v-model

컴포넌트에서 사용하면 양방향 바인딩을 구현할 수 있는 문법

<input>,<select>,<textarea>,컴포넌트에서 사용이 가능하다.

사용자가 입력한 정보를 변수에 저장하고 화면에 보이게 하려면?

예시 코드

<template>
  <input @input="month = $event.target.value">
</template>

<script>
export default {
  data(){
    return {
      month : 0
    }
  }
}
</script>

• @input은 사용자가 input창에 입력할 때 마다 동작하는 이벤트 핸들러
• $event는 자바스크립트 이벤트 리스너의 파라미터와 같은 의미이다.(addEventListener('click', function(event){}))
  => $event.target.value는 input 태그에 에 입력한 값!
• input태그에 value값을 month에 저장

이 내용을 축약할 수 있는게 v-model 이다!

<input @input="month = $event.target.value">
<input v-model="month"> 

둘은 같은 코드이다.

❗️참고
input의 value는 문자값으로 저장된다.
그래서 v-model.number="month" 이런 directive라는걸 사용해야 숫자가 들어오면 숫자로 저장이 된다.

---

watch()

데이터 변경 시 감시하여 콜백 실행
키(감시할 컴포넌트 이름)와 값(콜백)으로 이루어진 객체이다.
첫번째 파라미터: 변경될 값 / 두번째 파라미터: 변경전 값

export default {
  data(){
    return {
      a : 1
    }
  },
  watch : {
    // 감시할 데이터 a
    a(변경될값, 변경전값){
      //a가 변경될 때 실행할 코드
    }
  }
}

만약 Object일 경우 watch()의 사용법이 약간 달라진다.
Object의 프로퍼티값까지 deep하게 인지하지 못하기 때문이다.
이때는 watch를 Object형태로 선언해주고 handler를 추가해줘야한다.

export default {
  data(){
    return {
      a : 1
      receit(){
      	food:1000,
        fare:3000
      }
    }
  },
  watch : {
    a(newValue,oldValue){
      console.log(newValue,oldValue)
    }
    receit:{
      handler(newValue,oldValue){
        // 실행될 코드
      },
      deep : true // 프로퍼티의 값 인지 여부,
      immediate : true // watch는 값이 변화될때 실행된다. -> 최초 렌더링 됐을때부터 실행 여부 
    }
  }
}