# v-on ## Vue 이벤트 핸들링 {% embed url="" %} VueJS에서는 `v-on` 디렉티브 또는 `@` 디렉티브를 사용하여 이벤트 핸들링 설정을 할 수 있다. ```markup ``` 디렉티브의 값으로는 javascript 또는 Vue 코드를 작성할 수 있지만 코드가 길어지면 가독성이 떨어지므로 일반적으로 Vue method를 호출하는 형태로 작성한다. ### 사용 예제 - click ```html Vue event

``` {% embed url="" %} 실행해보면 세 버튼 모두 다 동일한 결과가 나오는 것을 확인할 수 있다. 하지만 방식의 차이가 존재한다. ```html ``` 첫 번째 방식은 메소드명을 지정하여 Vue에게 실행을 위임하는 방식이다. 이 경우 이벤트 발생 정보를 Vue에서 첫 번째 매개변수로 설정해주므로 testFunction에서 선언하여 사용할 수 있다. arguments 의 0번 데이터를 살펴보면 이벤트 정보가 들어간 것을 확인할 수 있다. 하지만 이 방식의 경우 매개변수가 필요한 메소드를 실행하며 데이터를 인자로 전달할 수 없다. ```html ``` 두 번째 방식은 메소드를 직접 실행하는 방식이다. 이 경우 이벤트 발생 정보를 직접 설정해줘야 하는데, 설정한 내용이 없기 때문에 이 방식으로 호출한 경우 메소드 내부에서는 발생한 이벤트 정보를 확인할 수 없다. 대신 데이터를 인자로 전달할 수 있다. ```html ``` 세 번째 방식은 메소드를 직접 실행하며 이벤트 정보를 설정하는 방식이다. 첫 번째 방식과 두 번째 방식을 모두 해결할 수 있는 방법으로 Vue 내장 이벤트 객체인 `$event`를 매개변수로 전달하고, 다른 데이터들도 뒤에 작성하여 인자로 전달할 수 있다. ### 사용 예제 - input `input` 이벤트는 입력 발생을 감지한다. v-model 연동으로도 입력에 따른 값의 변화를 관리할 수 있지만 이 부분에 대한 차이는 다음의 예제로 확인할 수 있다. ```markup Vue event

v-model

v-on:input

``` {% embed url="" %} v-on:input은 v-model연동과 다르게 IME 입력이 발생하는 경우도 감지가 가능하다. {% content-ref url="/pages/YXpZgkjxRg3e2lK4VJpX" %} [IME issue](/web/develop-page/js/vuejs/cdn-vue3/vue-instance/data/ime-issue.md) {% endcontent-ref %} ### 사용 예제 - keyup(특정 키만 감지) input 이벤트를 통해 특정 키 입력만 감지하도록 설정할 수 있다. 만약 `Enter`의 입력만 감지하고 싶을 경우 다음과 같이 작성한다. ```html ``` 완성된 예제 코드는 다음과 같다. ```markup Vue event

``` {% embed url="" %} 실행하면 엔터를 입력한 경우에만 이벤트 설정된 `testFunction`이 실행된다. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.sysout.co.kr/web/develop-page/js/vuejs/cdn-vue3/vue-directive/v-on.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.