이벤트 작업

완료됨

애플리케이션에서 이벤트는 발생할 수 있는 동작이지만, 언제 발생하는지를 꼭 알지는 못합니다. 예를 들어 페이지에 단추가 있는 경우 사용자가 해당 단추를 선택할 것이라는 것을 압니다. 하지만 타이밍을 알 수는 없습니다.

웹 애플리케이션을 만들려면 이벤트를 처리하는 방법을 알고 있어야 합니다. 여기서는 Vue.js를 사용하여 이벤트를 관리하는 방법을 알아봅니다.

v-on 지시문과 @

Vue.js는 v-on:click과 같이 이벤트에 바인딩할 수 있는 v-on이라는 지시문을 제공합니다. 이벤트 처리는 핵심 작업이므로 Vue.js는 모든 이벤트에 대한 @ 바로 가기도 제공합니다. 클릭 이벤트를 바인딩하려면 @click 바로 가기를 사용할 수 있습니다.

이벤트 처리기

Vue 애플리케이션 또는 구성 요소의 methods 필드에 함수를 추가하여 이벤트 처리기를 만들 수 있습니다. methods 필드는 data()와 비슷하지만 상태 개체를 반환하는 대신 애플리케이션에 사용할 수 있는 함수의 목록을 유지 관리합니다. 다른 JavaScript 함수를 참조하는 것과 같은 방법으로 HTML에서 이러한 함수를 참조할 수 있습니다.

참고

methods 필드에 함수를 추가하는 주요 이유는 함수에서 등록된 모든 데이터에 액세스할 수 있다는 것입니다.

Vue 앱 또는 구성 요소에 메서드를 추가하는 경우 this는 활성 인스턴스를 가리킵니다. 다음 예의 name과 같이 활성 인스턴스에 사용할 수 있는 모든 데이터는 this에서 액세스할 수 있습니다.

이벤트 처리기 만들기

호출될 때 name 데이터 속성의 값을 표시하는 메서드를 만들려면 다음 예제를 따르면 됩니다.

const app = Vue.createApp({
    data() {
        return {
            name: 'Cheryl'
        }
    },

    methods: {
        displayName() {
            console.log(this.name);
        }
    }
});

displayName()은 methods 속성에 추가되기 때문에 템플릿에서 액세스 가능하며 이벤트에 바인딩될 수 있습니다.

이벤트에 이벤트 처리기 바인딩

약식 displayName()을 사용하여 click 이벤트에 @click 함수를 바인딩할 수 있습니다. 사용자가 단추를 선택하면 displayName() 함수가 호출됩니다.

<button type="button" @click="displayName">Display name</button>