# once

## 한 번만 실행

VueJS에서는 이벤트를 한 번만 실행할 수 있도록 이벤트 설정 시 추가로 수식어를 설정할 수 있다. 예를 들어 클릭 이벤트를 설정할 경우 다음과 같이 디렉티브 뒤에 `.once` 수식어를 추가할 수 있다.

```html
<button v-on:click.once="testFunction">한 번만 호출</button>
```

### 사용 예제 - once 유뮤에 따른 이벤트 차이

```markup
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue event</title>
</head>

<body>
    <div id="app">
        <button v-on:click="testFunction">계속 호출</button>
        <button v-on:click.once="testFunction">한 번만 호출</button>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            methods: {
                testFunction() {
                    window.alert("testFunction 실행");
                }
            }
        });
        app.mount("#app");
    </script>
</body>

</html>
```

{% embed url="<https://codepen.io/hiphop5782/pen/WNXNLXz>" %}

`.once` 수식어가 추가된 경우 한 번 클릭 이후 이벤트가 제거됨을 확인할 수 있다.


---

# 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/once.md?ask=<question>
```

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.
