이벤트 설정

 

이벤트 설정

 

[@이벤트명]으로 이벤트 설정이 가능하다. 그리고 이벤트 수식자는 이벤트 처리 중에 발생하는 동작을 수정하거나 조절하는 데 사용되는 기능이다. 이벤트 수식자를 사용하면 클릭, 키보드 입력 등과 같은 다양한 이벤트에 대한 동작을 보다 정확하게 제어할 수 있다. Vue.js에서 가장 일반적으로 사용되는 이벤트 수식자는 다음과 같다

• .stop: 이벤트 전파 중지 예: <a @click.stop="doSomething">
• .prevent: 기본 동작 방지 예: <form @submit.prevent="onSubmit">
• .capture: 캡처 모드에서 이벤트 처리 예: <div @click.capture="doSomething">
• .self: 이벤트가 요소 자체에서 발생한 경우에만 처리 예: <div @click.self="doSomething">
• .once: 이벤트 한 번만 처리 예: <button @click.once="doSomething">
• .passive: 스크롤 이벤트의 스크롤 방지 예: <div @scroll.passive="onScroll">

 

// HTML
<template>
	
  <input type="input" v-model="userInput" @input="check()" />
  
</template>

// Javascript
<script setup>

  import { ref } from 'vue'
	
  const userInput = ref('');

  function check() {
    if (userInput.value === 'hello') {
      showAlert();
    }
  }

  function showAlert() {
    alert("こんにちは");
  }
  
</script>