Vue 이벤트 수정자: 완벽 가이드

Vue 이벤트 수정자: 완벽 가이드

Vue 이벤트 수정자란?

Vue의 이벤트 수정자는 이벤트가 메소드 실행을 트리거하는 방법을 수정하고, 보다 효율적이고 간단한 방법으로 이벤트를 처리하는 데 도움이 됩니다. 이벤트 수정자는 Vue 지시어와 함께 사용됩니다 v-on. 예를 들면 다음과 같습니다:

• HTML 양식의 기본 제출 동작 방지(v-on:submit.prevent)
• 페이지가 로드된 후 이벤트가 한 번만 실행되도록 설정(v-on:click.once)
• 메소드를 실행하기 위한 키보드 키 지정(v-on:keyup.enter)

v-on 지시문을 수정하는 방법

<div id="app">
  <p>Click the button to create an alert:</p>
  <button v-on:click.once="createAlert">Create Alert</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    methods: {
      createAlert() {
        alert("Alert created from button click")
      }
    }
  })
  app.mount('#app')
</script>

키보드 키 이벤트 수정자

세 가지 키보드 이벤트 유형이 있습니다: keydown, keypress, keyup. 각 키 이벤트 유형을 사용하면 키 이벤트가 발생한 후 수신할 키를 정확하게 지정할 수 있습니다. 예를 들어 .space, .enter, .w 등이 있습니다.

예제

<div id="app">
  <input v-on:keydown="getKey">
  <p>{{ keyValue }}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        keyValue: ''
      }
    },
    methods: {
      getKey(event) {
        this.keyValue = event.key
        console.log(event.key)
      }
    }
  })
  app.mount('#app')
</script>

마우스 버튼 수정자

마우스 클릭에 반응하려면 v-on:click을 쓸 수 있지만, 클릭한 마우스 버튼을 지정하려면 .left, .center, .right 수정자를 사용할 수 있습니다.

예제

<div id="app">
  <div v-on:click.right="changeColor"
       v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
    <p>Press right mouse button here.</p>
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        bgColor: 0
      }
    },
    methods: {
      changeColor() {
        this.bgColor += 50
      }
    }
  })
  app.mount('#app')
</script>

키보드 이벤트 수정자 결합

이벤트 수정자를 조합하여 둘 이상의 작업이 동시에 발생해야 메소드를 호출하도록 설정할 수 있습니다.

예제

<div id="app">
  <p>Try pressing the 's' key:</p>
  <textarea v-on:keydown.ctrl.s="createAlert"></textarea>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    methods: {
      createAlert() {
        alert("You pressed the 'S' and 'Ctrl' keys, in combination!")
      }
    }
  })
  app.mount('#app')
</script>

마우스 버튼과 .prevent 수정자

.prevent 수정자를 사용하여 마우스 오른쪽 버튼을 클릭할 때 기본 드롭다운 메뉴가 표시되는 것을 방지할 수 있습니다.

예제

<div id="app">
  <div v-on:click.right.prevent="changeColor"
       v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
    <p>Press right mouse button here.</p>
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        bgColor: 0
      }
    },
    methods: {
      changeColor() {
        this.bgColor += 50
      }
    }
  })
  app.mount('#app')
</script>

클릭 시 Shift 키 사용 예제

아래 예제는 사용자가 'Shift' 키를 누르면서 이미지를 클릭할 때 이미지를 변경하는 방법을 보여줍니다.

<div id="app">
  <p>Press the 'Shift' keyboard key while you do a left mouse button click on the image below to change it.</p>
  <img v-on:click.left.shift="changeImg" v-bind:src="imgUrl">
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        imgUrlIndex : 0,
        imgUrl: 'img_tiger_square.jpeg',
        images: [
          'img_tiger_square.jpeg',
          'img_moose_square.jpeg',
          'img_kangaroo_square.jpeg'
        ]
      }
    },
    methods: {
      changeImg() {
        this.imgUrlIndex++;
        if(this.imgUrlIndex>=3){
          this.imgUrlIndex=0
        }
        this.imgUrl = this.images[this.imgUrlIndex]
      }
    }
  })
 app.mount('#app')
</script>

이 글이 유용했다면 좋아요와 공유 부탁드립니다! 더 많은 웹 개발 관련 정보는 저희 블로그에서 확인하세요.