vue.js에서 이벤트를 처리하는 방법에 대한 자세한 설명

다음vue.js 튜토리얼에서는 vue.js를 사용하여 이벤트를 처리하는 방법을 소개합니다. 도움이 되길 바랍니다.

Vue를 사용하여 동적 웹사이트를 구축할 때 Vue가 이벤트에 응답하기를 원할 가능성이 높습니다.

예를 들어, 사용자가 버튼을 클릭하거나, 양식을 제출하거나, 마우스를 움직이는 경우 Vue 웹사이트가 특정 방식으로 응답하도록 할 수 있습니다.

Vue를 사용하여 이벤트 처리

관련 DOM 요소에 v-on 지시문을 추가하여 이벤트를 가로챌 수 있습니다. 버튼 요소에 대한 클릭을 처리하고 싶다고 가정해 보겠습니다. Vue 템플릿에 다음을 추가할 수 있습니다. v-on指令添加到相关DOM元素来拦截事件。假设我们要处理对按钮元素的点击-我们可以在Vue模板中添加以下内容：

<button v-on:click="clickHandler"></button>

请注意，我们在指令中添加了一个参数，该v-on参数将是我们要处理的事件的名称（在本例中为click）。

然后，我们将表达式绑定到指令，该指令通常是您要用于处理事件的方法。在这种情况下，我们称之为clickHandler。

提示：该v-on指令具有一个方便的速记形式@，可以代替以下形式使用v-on:：<button @click="clickHandler"></button>

<div id="app">
  <button v-on:click="clickHanlder"></button>
</div>

지시문에 매개변수를 추가했다는 점에 유의하세요. v-on 매개변수는 처리할 이벤트의 이름입니다(이 경우 클릭).

그런 다음 표현식을 지시문에 바인딩합니다. 이는 일반적으로 이벤트를 처리하는 데 사용하려는 방법입니다. 이 경우 clickHandler라고 부릅니다. 팁: v-on 명령에는 @라는 편리한 단축 형식이 있으며 v-on::<button @click="clickHandler"></button>.

처리할 수 있는 이벤트 종류

• 클릭 외에 어떤 DOM 이벤트를 처리할 수 있나요?

Vue는 다음을 포함하여 모든 종류의 웹 또는 모바일 기본 이벤트(나중에 설명할 사용자 정의 이벤트 포함)를 처리할 수 있습니다.

• 가장 일반적인
DOM 이벤트 목록
• 이벤트 처리 메서드

이제 메서드를 이벤트 처리 지시문에 바인딩하면 일부 사용자 정의 코드를 실행할 수 있습니다.

이 예에서는 간단하게 유지하고 콘솔에 메시지만 기록하겠습니다. 하지만 다른 요소 표시/숨기기, 카운터 증가 등과 같은 더 흥미로운 작업을 수행할 수도 있습니다.

new Vue({
  el: "#app",
  methods: {
    clickHandler () {
      console.log("You clicked the button!");
    }
  }
})

clickHandler (event) {
  console.log(`The button was clicked at ${event.timeStamp}.`);
}

Event Object

이벤트 객체는 이벤트 핸들러로 전달되어 이벤트에 응답하는 방법에 대한 더 많은 가능성을 열어줍니다. 이 객체에는 이벤트가 발생한 요소(event.target), 이벤트가 발생한 시간(event.timeStamp)에 대한 참조 등을 포함하여 많은 유용한 속성과 메서드가 포함되어 있습니다.

formHandler (event) {
  event.preventDefault();
  // form handling logic
}

이 개체는 Vue가 아닌 기본 웹 API에서 제공되므로 순수 JavaScript에서 찾을 수 있는 개체와 동일합니다. 편의를 위해

이벤트 인터페이스 참조

를 참조하세요.

이벤트 수정자

JavaScript 애플리케이션의 일반적인 패턴은 기본 기능을 사용하는 대신 양식 제출을 수동으로 처리하는 것입니다. 이렇게 하려면 양식 처리 코드를 실행하기 전에 Submit 이벤트의 PreventDefault 기본 메서드를 사용해야 합니다. 그렇지 않으면 페이지가 완료되기 전에 페이지가 리디렉션됩니다.

<form @submit.prevent="formHandler"></form>

Vue는 핸들러에서 수동으로 수행하는 대신 템플릿에서 직접 수행할 수 있는 이벤트 수정자를 제공합니다. 지시문 뒤에 추가된 수정자는 '.'입니다.

ParentComponent
 |
 | (data travels down via props, never up)  
 v 
ChildComponent

Vue는 일반적인 이벤트 처리 시나리오에 유용한 여러 가지 이벤트 수정자를 제공합니다.

.self

.once

.passive

• custom event

• 지금까지 네이티브 이벤트를 처리하는 방법에 대해 논의했습니다. 하지만 Vue는 구성 요소 기반 프레임워크이므로 구성 요소가 자체 이벤트를 내보내도록 할 수 있나요?
  예, 매우 유용할 수 있습니다. 하위 구성 요소가 상위 구성 요소에 데이터를 보내도록 하려고 한다고 가정해 보겠습니다. 소품 데이터는 부모에서 자식으로만 전달되고 그렇지 않으면 전달되지 않기 때문에 여기서는 소품을 사용할 수 없습니다.

export default {
  methods: {
    onClose() {
      this.$emit("dialog-closed");
    }
  }
};

• 해결책은 하위 구성 요소가 이벤트를 내보내고 상위 구성 요소가 이벤트를 수신하도록 하는 것입니다.
  이렇게 하려면 이벤트를 내보내고 싶을 때 하위 구성 요소에서 this.$emit("my-event")를 호출하세요. 예를 들어 상위 MainPage에 닫혔음을 알려야 하는 DialogComponent 구성 요소가 있다고 가정해 보겠습니다.

<div>
  <dialog-component @dialog-closed="eventHandler" />
</div>

• 그러면 상위 구성 요소는 로컬 이벤트와 똑같이 사용자 정의 이벤트를 처리할 수 있습니다.

  onClose() {
    this.$emit("dialog-closed", { time: Date.now() });
  }

  핸들러 메서드를 통해 수신할 수 있는 맞춤 이벤트에 데이터를 보낼 수도 있습니다.

eventHandler (event, { time }) {
  console.log(`Dialog was closed at ${time}`);
}

import Vue from "vue";
export default new Vue();

• 팁: 맞춤 이벤트에는 케밥 케이스 이름을 사용하세요! HTML은 대소문자를 구분하지 않으므로 myEvent와 같이 낙타로 표기된 이벤트 이름은 템플릿에 myevent가 있으므로 혼동될 수 있습니다. 따라서 혼란을 피하기 위해 kebab-case my-event를 사용하는 것이 좋습니다.

  活动巴士

  如上所述，子组件可以将事件发送到父组件。但是，如果您希望组件将事件发送到层次结构中的任何其他组件怎么办？例如，同级，祖父母等。

  为此，我们可以使用一种称为事件总线的模式。在这里，我们创建了一个单独的Vue实例，以将事件传输到导入该事件的任何组件。

  首先，在新的模块文件中创建并导出Vue实例：

  import Vue from "vue";
  export default new Vue();

  接下来，将总线导入到您要发出事件的组件中。您可以使用$emit总线Vue实例的方法。

  import eventBus from "./eventBus";
  
  export default {
    ...
    methods: {
      myMethod () {
        eventBus.$emit("my-event")
      }
    }
  }

  最后，将总线导入到您想听事件的组件中。然后，您应该在代码中的某个位置设置侦听器。我建议您使用生命周期挂钩，就像created您可以在此处访问组件实例一样。

  这是通过$on总线方法完成的，该方法带有两个参数-您要监听的事件和一个回调。

  import eventBus from "./eventBus";
  
  export default {
    ...
    created () {
      eventBus.$on("my-event", () => {
        console.log("my-event called on global event bus");
      });
    }
  }

  相关推荐：
  

  2020年前端vue面试题大汇总（附答案）

  vue教程推荐：2020最新的5个vue.js视频教程精选

  更多编程相关知识，请访问：编程入门！！
  

  위 내용은 vue.js에서 이벤트를 처리하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!