Vue에서 이벤트를 처리하는 방법

Vue의 v-on 지시어로 이벤트 처리 수준을 높이는 방법을 알아보세요.

사용자 이벤트를 듣는 것은 모든 반응형 웹 앱의 필수적인 부분이며 Vue 앱도 예외는 아닙니다. Vue는 v-on 지시문을 사용하여 이벤트를 처리하는 간단하고 효율적인 방법으로 구축되었습니다.

Vue의 이벤트 바인딩이란 무엇입니까?

이벤트 바인딩은 DOM(문서 개체 모델) 요소에 이벤트 리스너를 연결할 수 있는 Vue.js 기능입니다. 이벤트가 발생하면 이벤트 리스너가 Vue 앱에서 작업이나 응답을 트리거합니다.

v-on 지시문을 사용하여 Vue에서 이벤트 바인딩을 달성할 수 있습니다. 이 지시어를 사용하면 앱이 클릭, 입력 또는 키업 이벤트와 같은 사용자 이벤트를 수신할 수 있습니다.

v-on을 사용하여 요소에 이벤트 리스너를 연결하려면 이벤트 이름을 지시문에 매개변수로 추가하세요.

<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <button v-on:click="counter++">Click me</button>
    <p>{{ counter}}</p>
  </div>
  <script>
  const app = Vue.createApp({
    data() {
      return {
        text: 'Vue is awesome!',
        counter: 0
      }
    }
  })
  app.mount('#app')
  </script>
</body>
</html>

위의 코드 블록은 클릭 이벤트를 수신하는 Vue 앱의 예를 보여줍니다. 코드 블록은 버튼을 사용하여 Vue 인스턴스의 데이터 속성에 있는 counter 값을 1씩 증가시킵니다.

위의 코드 블록은 v-on 지시어를 사용하여 JavaScript 표현식 counter++를 버튼의 click 이벤트에 바인딩합니다. Vue는 v-on의 빈번한 사용으로 인해 v-on 지시문 대신 @ 문자를 약칭으로 사용합니다.

<button @click="counter++">Click me</button>

Vue의 이벤트 바인딩은 클릭 이벤트에만 국한되지 않습니다. Vue는 키 누르기 이벤트, 마우스 오버 이벤트 등과 같은 다른 이벤트를 처리합니다.

이러한 이벤트를 v-on 지시어에 바인딩하려면 click 이벤트를 원하는 이벤트 이름으로 바꾸세요.

<button @keydown.enter="counter++">Click me</button>

위의 코드는 keydown 이벤트를 수신하는 버튼에 이벤트 리스너를 설정합니다. 버튼에 포커스가 있는 동안 아무 키나 누르면 Vue는 counter++ 표현식을 평가합니다.

Vue의 메소드와 이벤트 연결

대부분의 Vue 앱에서는 발생하는 특정 이벤트를 기반으로 보다 복잡한 로직을 처리할 수 있습니다. 이벤트와 메서드는 함께 작동하여 이벤트를 기반으로 앱 작업을 수행합니다.

Vue 옵션 객체의 메소드 속성에는 Vue 앱의 반응성 향상에 필요한 중요한 기능이 포함되어 있습니다. Vue의 메소드 속성을 사용하면 이벤트 기반의 복잡한 로직을 처리할 수 있습니다.

다음은 메소드 속성으로 처리되는 이벤트를 보여주는 Vue 앱의 예입니다.

<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <button @click="increment">Add 1</button>
    
    <button @click="reduce">reduce 1</button>
    <p>{{ counter }}</p>
  </div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          text: 'Vue is awesome!',
          counter: 0
        }
      },
      methods: {
        increment(){
          this.counter = this.counter + 1
        },
        reduce() {
          this.counter = this.counter - 1
        }
      }
    })
    app.mount('#app')
  </script>
</body>
</html>

위의 Vue 앱은 이벤트를 메서드와 연결하는 방법을 보여줍니다. 앱에는 사용자가 클릭하여 데이터 속성의 카운터 값을 늘리거나 줄일 수 있는 두 개의 버튼이 있습니다.

앱은 @click 지시문을 사용하여 이를 달성합니다. @click 지시어는 카운터 값을 조작하기 위한 메소드 속성의 함수를 가리킵니다.

클릭 이벤트에 인수를 연결할 때 메서드에 전달한 인수에 따라 카운터 값을 추가하거나 줄이기 위해 증가 및 감소 메서드를 사용자 정의할 수 있습니다.

다음과 같습니다:

<body>
  <div id="app">
    <button @click="increment(5)">Add 5</button>
    
    <button @click="reduce(3)">reduce 3</button>
    <p>{{ counter }}</p>
  </div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          text: 'Vue is awesome!',
          counter: 0
        }
      },
      methods: {
        increment(num){
          this.counter = this.counter + num
        },
        reduce(num) {
          this.counter = this.counter - num
        }
      }
    })
    app.mount('#app')
  </script>
</body>

이 코드 블록은 이전 Vue 앱에서 확장되어 버튼의 클릭 이벤트 리스너에 연결된 메서드에 인수를 전달할 수 있습니다.

Vue 인스턴스의 증가 및 감소 메소드는 카운터 속성을 늘리거나 줄이기 위해 인수 num을 사용합니다.

이 예제는 Vue에서 이벤트와 메서드를 연결할 때 인수를 사용하여 작업하는 방법을 보여줍니다. 이벤트와 메서드를 연결하면 Vue 앱을 더욱 대화형으로 만드는 데 도움이 될 수 있습니다.

Vue에서 방지 및 중지 수정자 탐색

Vue의 이벤트 수정자를 사용하면 애플리케이션의 특정 요구 사항을 충족하는 더 나은 이벤트 리스너를 만들 수 있습니다. 이러한 이벤트 수정자를 활용하려면 수정자를 Vue의 이벤트에 연결합니다.

예를 들어:

<form @submit.prevent="handleSubmit">
  <input type="text" v-model="text">
  <button type="submit">Submit</button>
</form>

위의 코드 블록은 제출 이벤트에 prevent 수정자를 연결합니다. prevent 수정자는 Vue에서 양식 작업을 할 때 일반적으로 사용됩니다.

prevent 수정자의 목적은 페이지를 다시 로드하는 양식 제출의 기본 동작을 방지하는 것입니다. prevent를 사용하면 Vue는 handleSubmit 메소드가 양식 제출을 처리하는 동안 프로세스를 계속할 수 있습니다.

매우 유용한 수정자의 또 다른 예는 stop 이벤트 수정자입니다. stop 이벤트 수정자는 이벤트가 DOM 트리 위로 전파되는 것을 중지합니다.

일반적으로 HTML 하위 요소의 이벤트는 DOM 트리를 통해 버블링되어 상위 요소에 연결된 모든 이벤트 리스너를 활성화합니다. stop 수정자를 사용하여 이 이벤트 전파를 방지하고 이벤트가 추가 이벤트 리스너를 트리거하는 것을 방지할 수 있습니다.

stop 수정자가 DOM 트리 위로 이벤트 전파를 중지하는 방법을 이해하려면 아래 코드 블록을 고려하세요.

<body>
    <div id="app">
        <div @click="outerClick" class="outer">
            <div @click.stop="innerClick" class="inner">
              <button @click="buttonClick" class="button">Click me</button>
            </div>
        </div>
    </div>
    <script>
    const app = Vue.createApp({
        methods: {
            outerClick() {
                console.log('Outer click')
            },
            innerClick() {
                console.log('Inner click')
            },
            buttonClick() {
                console.log('Button click')
            }
        }
    });
    app.mount("#app");
    </script>
 </body>

위의 코드 블록에는 세 가지 다른 요소에 연결된 세 가지 이벤트 리스너가 있습니다. 버튼 요소는 inner 클래스가 있는 div 내부에 있고, inner 클래스가 있는 div는 outer 클래스가 있는 div 내부에 있습니다. 클래스.

세 요소 각각은 click 이벤트를 수신하고 클릭한 HTML 요소의 이름을 콘솔에 기록합니다. 다음은 위의 코드 블록을 더 쉽게 이해할 수 있도록 하는 추가 클래스 CSS 스타일입니다.

<head>
    <style>
    .outer {
      padding: 20px;
      background-color: black;
    }
    .inner {
      padding: 20px;
      background-color: gray;
    }
    button {
      padding: 10px;
      background-color: white;
      border: 2px solid black;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
    }
    </style>
</head>

프로그램을 실행하면 생성된 Vue 앱은 다음과 같습니다.

버튼을 클릭하면 프로그램이 buttonClick 메소드를 호출하고 콘솔에 메시지를 기록합니다. 프로그램은 innerClick 메소드도 호출합니다.

그러나 코드 블록이 innerClick 이벤트 리스너에 stop 수정자를 추가했기 때문에 프로그램은 outerClick 메서드를 호출하지 않습니다. 이렇게 하면 이벤트가 DOM 트리 위로 더 이상 전파되지 않습니다.

stop 수정자가 없으면 버튼을 클릭할 때 프로그램이 buttonClick 메소드를 호출하고 이벤트는 계속해서 트리 위로 전파되어 innerClick에 도달합니다. Strong> 메소드와 outerClick 메소드를 차례로 사용합니다.

웹 앱에서 이벤트 처리하기

Vue에서 이벤트 바인딩을 사용하여 이벤트 리스너를 요소에 연결하는 방법과 이벤트가 발생할 때 메서드를 호출하는 방법을 배웠습니다. 또한 이벤트 수정자를 사용하여 이벤트 동작을 맞춤설정하는 방법도 이해했습니다.

웹 앱은 특정 형태의 사용자 이벤트에 의존하여 기능을 수행합니다. JavaScript에는 이러한 다양한 이벤트를 캡처하고 처리할 수 있는 다양한 메서드가 내장되어 있습니다. 이러한 이벤트는 대화형 앱을 구축하는 데 도움이 됩니다.

Vue에서 이벤트를 처리하는 방법

Vue의 이벤트 바인딩이란 무엇입니까?

Vue의 메소드와 이벤트 연결

Vue에서 방지 및 중지 수정자 탐색

웹 앱에서 이벤트 처리하기

관련기사: