8000 Add `.once` modifier description for v-on (#627) · rubythonode/vuejs.org@6cfa669 · GitHub
[go: up one dir, main page]
Skip to content

Commit 6cfa669

Browse files
KingMariochrisvfritz
KingMario
authored and
chrisvfritz
committed
Add .once modifier description for v-on (vuejs#627)
* Add `.once` description modifier for v-on Add `.once` description modifier for v-on and modifiers in render functions * Update description of .once event modifier * move event/key modifiers in render functions to that section * improve styling for tables
1 parent 6e867e3 commit 6cfa669

File tree

3 files changed

+86
-2
lines changed

3 files changed

+86
-2
lines changed

‎src/v2/guide/events.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,7 @@ To address this problem, Vue provides **event modifiers** for `v-on`. Recall tha
164164
- `.prevent`
165165
- `.capture`
166166
- `.self`
167+
- `.once`
167168

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

190+
> New in 2.1.4
191+
192+
``` html
193+
<!-- the click event will be triggered at most once -->
194+
<a v-on:click.once="doThis"></a>
195+
```
196+
197+
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.
198+
189199
## Key Modifiers
190200

191201
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:

‎src/v2/guide/render-function.md

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -296,8 +296,8 @@ render: function (createElement) {
296296
value: self.value
297297
},
298298
on: {
299-
input: function (e) {
300-
self.value = e.target.value
299+
input: function (event) {
300+
self.value = event.target.value
301301
}
302302
}
303303
})
@@ -306,6 +306,57 @@ render: function (createElement) {
306306

307307
This is the cost of going lower-level, but it also gives you much more control over the interaction details compared to `v-model`.
308308

309+
### Event & Key Modifiers
310+
311+
For the `.capture` and `.once` event modifiers, Vue offers prefixes that can be used with `on`:
312+
313+
| Modifier(s) | Prefix |
314+
| ------ | ------ |
315+
| `.capture` | `!` |
316+
| `.once` | `~` |
317+
| `.capture.once` or<br>`.once.capture` | `~!` |
318+
319+
For example:
320+
321+
```javascript
322+
on: {
323+
'!click': this.doThisInCapturingMode,
324+
'~keyup': this.doThisOnce,
325+
`~!mouseover`: this.doThisOnceInCapturingMode
326+
}
327+
```
328+
329+
For all other event and key modifiers, no proprietary prefix is necessary, because you can simply use event methods in the handler:
330+
331+
| Modifier(s) | Equivalent in Handler |
332+
| ------ | ------ |
333+
| `.stop` | `event.stopPropagation()` |
334+
| `.prevent` | `event.preventDefault()` |
335+
| `.self` | `if (event.target !== event.currentTarget) return` |
336+
| Keys:<br>`.enter`, `.13` | `if (event.keyCode !== 13) return` (change `13` to [another key code](keycode.info) for other key modifiers) |
337+
| Modifiers Keys:<br>`.ctrl`, `.alt`, `.shift`, `.meta` | `if (!event.ctrlKey) return` (change `ctrlKey` to `altKey`, `shiftKey`, or `metaKey`, respectively) |
338+
339+
Here's an example with all of these modifiers used together:
340+
341+
```javascript
342+
on: {
343+
keyup: function (event) {
344+
// Abort if the element emitting the event is not
345+
// the element the event is bound to
346+
if (event.target !== event.currentTarget) return
347+
// Abort if the key that went up is not the enter
348+
// key (13) and the shift key was not held down
349+
// at the same time
350+
if (!event.shiftKey || event.keyCode !== 13) return
351+
// Stop event propagation
352+
event.stopPropagation()
353+
// Prevent the default keyup handler for this element
354+
event.preventDefault()
355+
// ...
356+
}
357+
}
358+
```
359+
309360
### Slots
310361

311362
You can access static slot contents as Arrays of VNodes from [`this.$slots`](http://vuejs.org/v2/api/#vm-slots):

‎themes/vue/source/css/page.styl

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,29 @@
9393
margin-left 0
9494
iframe
9595
margin 1em 0
96+
> table
97+
border 1px solid $border
98+
margin 1.2em auto
99+
padding: 1em
100+
border-collapse collapse
101+
td, th
102+
line-height 1.6em
103+
padding .5em
104+
border none
105+
&:first-child
106+
padding-left: 1.4em
107+
&:last-child
108+
padding-right: 1.4em
109+
th
110+
padding-top: .85em
111+
padding-bottom .85em
112+
text-align left
113+
tbody
114+
tr:nth-child(2n - 1)
115+
background-color #fdfdfd
116+
tr:last-child
117+
td
118+
padding-bottom: 1.2em
96119
p.tip
97120
padding 12px 24px 12px 30px
98121
margin 2em 0

0 commit comments

Comments
 (0)
0