Vue 문법(2)

조건부 렌더링

https://v3.ko.vuejs.org/guide/conditional.html#v-if

이벤트 핸들링 - 이벤트 수식어

이벤트 객체를 메소드 내부에서 처리하던 것을 vue.js에서 수식어를 붙이면서 간단하게 사용할 수 있도록 제공.
ex) 메소드에서 event 받아서 event.preventDefault() 처리하던것을 @click.prevent로 사용 가능

1) prevent : 기본 동작 방지
2) once : 한번만 동작하도록 함

<template>
  <a
  href="https://naver.com" 
  target="_blank"
// chaining을 통해 여러 수식어 붙여서 사용 가능 
 @click.prevent.once="handler">
 NAVER
 </a>
</template>

<script>
export default{
  methods:{
    handler(event){
      // 원래 a태그가 가지고 있는 기본 동작을 방지
      // event.preventDefault();
      console.log('ABC');
    }
  }
}
</script>

3) stop : 이벤트 버블링 방지(자식->부모)

4) capture : 이벤트 캡처링(부모->자식 순서로 동작하도록함)

5) self : self가 정의된 영역을 선택해야만 이벤트 발생

6) @wheel.passive : 휠과 로직을 분리시켜 효율성을 높일 때 사용

키 수식어

폼 입력 바인딩

@change를 사용하면 입력 완료 후에야 값이 갱신 된다.
v-model에서도 동일하게 하려면 v-model.lazy를 통해 동일하게 씀.