💡 input

<input @input = ' '> 입력할 때 마다 뭐 실행해주세요.
<input @change = ' '> 입력하고 커서다른데 찍으면 뭐 실행해주세요.

사용자가 입력한 정보에 따라서 이것저것 뭔가 실시간으로 바뀌고 싶으면
당연히 data로 저장해두고 필요할 때 {{데이터바인딩}} 을 해야한다.

//ModalPage.vue
<templage>
(생략)
<input @input= "month = $event.target.value">
      <p> {{month}}개월 선택함 : {{원룸들[누른거].price * month }}원 </p>
      
<script>
export default {
  data(){
    return {
      month : 0
      // 숫자입력받을 거면 초기값을 숫자로 하고, 문자입력받을 것이라면 초기값을 문자로 하자.
    }
  }
}
</script>      
      

📜 $event는 Vue가 제공하는 특별한 변수인데 event object라는걸 뜻한다.
자바스크립트 이벤트리스너에서 addEventListener('click', function(e){}) 이런 문법을 쓰는데 여기서의 e랑 똑같은 의미이다.

그래서 $event.target.value라고 작성하면 인풋에 입력한 값을 가져올 수 있다.

그럼 이제 인풋에 뭔가 입력할 때마다 month라는 곳에 사용자가 입력한 값이 저장된다.

💡 v-model="데이터 이름"

<input v-model="month">

이렇게도 쓸 수 있는데 위의 @input 과 동일하다.
textarea , select 등의 input 에도 모두 v-model이 가능하다.

📍 사용자가 인풋에 입력한 것은 전부 문자자료형.

<input v-model.number="month">

<p> {{month}}개월 선택함 : {{원룸들[누른거].price + month }}원</p>

이라고 해야 덧셈을 올바르게 잘해준다.

📍 watcher

input에 문자입력하면 경고문을 띄우고 싶을 때, data를 감시하는 함수
(사용자의 인풋을 받을 때에 거의 사용)

데이터를 감시하려면

watch : {감시할 데이터(){} }

<script>
export default {
  name:'ModalPage',
  data(){
    return{
      month: 1,
    }
  },
  watch:{
    month(a){
      //month라는 데이터가 변할 때마다 여기있는 코드가 실행됨
      // if(사용자가 month에 입력한 데이터가 13보다 크면){
      //   alert('13이상 입력하지마세요')
      // }
      
      if(a>=13){
        alert('13이상입력하지마셈')
      }
    },
  },

month라는 데이터가 바뀔 때마다 저 watch 가 실행된다.
month(a) 에서 a는 month 데이터를 뜻하는 파라미터이다.
(두개까지 작명가능한데 첫째는 변경될 값, 둘째는 변경전 값을 의미)

만약, 인풋창에 숫자가 아닌 문자가 입력되었을 때
'문자는 입력이 어렵습니다.'라는 alert창을 띄우고
초기값을 1로 설정하려면?

isNaN() 안에 숫자를 입력하면 false, 글자를 입력하면 true가 나온다.

watch : {
    month(a){
      if (isNaN(a) == true){
        alert('문자입력하지마라');
        this.month = 1;
      }
    },
 },