Skip to content

Add .once modifier description for v-on #627

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Dec 2, 2016
Merged
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions src/v2/guide/events.md
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@ To address this problem, Vue provides **event modifiers** for `v-on`. Recall tha
- `.prevent`
- `.capture`
- `.self`
- `.once`

``` html
<!-- the click event's propagation will be stopped -->
Expand All @@ -186,6 +187,15 @@ To address this problem, Vue provides **event modifiers** for `v-on`. Recall tha
<div v-on:click.self="doThat">...</div>
```

> New in 2.1.4

``` html
<!-- the click event will be triggered at most once -->
<a v-on:click.once="doThis"></a>
```

Unlike the other modifiers, which are exclusive to native DOM events, the `.once` modifier can also be used on [component events](components.html#Using-v-on-with-Custom-Events). If you haven't read about components yet, don't worry about this for now.

## Key Modifiers

When listening for keyboard events, we often need to check for common key codes. Vue also allows adding key modifiers for `v-on` when listening for key events:
Expand Down Expand Up @@ -247,6 +257,39 @@ For example:
<div @click.ctrl="doSomething">Do something</div>
```

## Specify Modifiers in Render Function Event Registration

In [render functions](render-function.html), event handlers are nested under "on", though event modifiers such as `.stop`, `.prevent`, `.self` and key modifiers such as `.enter` in `v-on:keyup.enter` or `67` in `v-on:keyup.67` and modifier keys are not supported.

You'll have to manually add codes in the very beginning of your event handler:

| Modifier | Code to Add |
| ------ | ------ |
| `.stop` | `event.stopPropagation()` |
| `.prevent` | `event.preventDefault()` |
| `.self` | `if(event.target !== event.currentTarget) return` |
| `.ctrl` (`.alt`, `.shift`, `.meta`) | `if(!event.ctrlKey) return` (change `ctrlKey` to `altKey`, `shiftKey`, `metaKey` accordingly) |

Or check the `event.keyCode` in the handler.

Vue has a syntactic sugar by special prefixes for event name to support `.capture` and `.once` modifiers in rendering functions.

| Modifier(s) | Prefix |
| ------ | ------ |
| `.capture` | `!` |
| `.once` | `~` |
| `.capture.once` or `.once.capture` | `~!` |

Examples:

```javascript
on: {
'!click': this.doThisInCapturingMode,
'~keyup': this.doThisOnce,
`~!mouseover`: this.doThisOnceInCapturingMode
}
```

## Why Listeners in HTML?

You might be concerned that this whole event listening approach violates the good old rules about "separation of concerns". Rest assured - since all Vue handler functions and expressions are strictly bound to the ViewModel that's handling the current view, it won't cause any maintenance difficulty. In fact, there are several benefits in using `v-on`:
Expand Down