• input에 문자입력하면 경고문을 띄우고 싶다 ? wathcer
  • data를 감시하는 함수다.

<script>
export default {
    name: "ModalWidnow",
    data() {
      return {
        month: 0,
      }
    },
    props : {
        products : Array,
        clickedNum : Number,
        isModalOpen : Boolean,
    },
    watch : {
      month(a) {
        if (a >= 13) {
          alert("13이상 입력하지 마셈");
        }
      }
    }
}
</script>

• watch : { 감시할데이터이름() {} }
• month라는 데이터가 변할 떄 마다 코드가 실행된다.
• a는 month라는 data일 것이다.
  • 만약 뒤 (a, b)를 붙였으면 b는 이전 데이터가 들어오게 된다.
    • a: 변경 후, b: 변경 전

<input type="range" min="1", max="12">

• 이런걸 쓰면 input을 제한해볼 수도 있다.
• form validation 라이브러리가 Vue 전용으로 있으니 HTML 단위에서 검사하도록 하는 것도 좋은 방법이다.

Animation

.start {
  opacity: 0;
  transition: all 1s;
}

.end {
  opacity: 1;
}

• transition: 해당 클래스의 모든 속성들이 변하는 시간 지정

<div class="start" :class="{ end : true }">

• class를 binding 하는 것도 가능한데, :class를 통해 { class명 : 조건 } 을 쓰면 된다.

  <transition name="fade" >
  <ModalWindow @closeModal="isModalOpen=false;" 
               :products="products" :clickedNum="clickedNum" :isModalOpen="isModalOpen"/>
  </transition>

• vue는 개꿀로 제공해준다.

.fade-enter-form {
  opacity: 0;
}
.fade-enter-active {
  transition: all 1s;
}
.fade-enter-to {
  opacity: 1;
}

• 이렇게 css 지정해주면 끝 등장 애니메이션이다.
• 퇴장 애니메이션은 enter -> leave로 바꿔주기만 하면된다.