From cc39aa0f2107794c16f1cc048999c9218ee723d8 Mon Sep 17 00:00:00 2001 From: Changyu Geng Date: Fri, 2 Dec 2016 17:42:32 +0800 Subject: [PATCH 1/4] Add `.once` description modifier for v-on Add `.once` description modifier for v-on and modifiers in render functions --- src/v2/guide/events.md | 44 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md index 01b822eea3..09eba7641f 100644 --- a/src/v2/guide/events.md +++ b/src/v2/guide/events.md @@ -186,6 +186,17 @@ To address this problem, Vue provides **event modifiers** for `v-on`. Recall tha
...
``` +> New in 2.1.4 + +It's also common to declare an event listener to be triggered at most once. Vue provides the `.once` modifier for `v-on`. + +``` html + + +``` + +`.once` modifier works for component `v-on` as well. + ## 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: @@ -247,6 +258,39 @@ For example:
Do something
``` +## 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`: From ad0547aca6c75ccaf5e10ed77ca2961469acf7e3 Mon Sep 17 00:00:00 2001 From: Chris Fritz Date: Fri, 2 Dec 2016 09:48:58 -0500 Subject: [PATCH 2/4] Update description of .once event modifier --- src/v2/guide/events.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md index 09eba7641f..cc959eed9e 100644 --- a/src/v2/guide/events.md +++ b/src/v2/guide/events.md @@ -164,6 +164,7 @@ To address this problem, Vue provides **event modifiers** for `v-on`. Recall tha - `.prevent` - `.capture` - `.self` +- `.once` ``` html @@ -188,14 +189,12 @@ To address this problem, Vue provides **event modifiers** for `v-on`. Recall tha > New in 2.1.4 -It's also common to declare an event listener to be triggered at most once. Vue provides the `.once` modifier for `v-on`. - ``` html ``` -`.once` modifier works for component `v-on` as well. +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 From 647cdfc034b86b6abab7f152fd6f1c7a8eb5eb91 Mon Sep 17 00:00:00 2001 From: Chris Fritz Date: Fri, 2 Dec 2016 11:49:33 -0500 Subject: [PATCH 3/4] move event/key modifiers in render functions to that section --- src/v2/guide/events.md | 33 -------------------- src/v2/guide/render-function.md | 55 +++++++++++++++++++++++++++++++-- 2 files changed, 53 insertions(+), 35 deletions(-) diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md index cc959eed9e..8e27a98382 100644 --- a/src/v2/guide/events.md +++ b/src/v2/guide/events.md @@ -257,39 +257,6 @@ For example:
Do something
``` -## 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`: diff --git a/src/v2/guide/render-function.md b/src/v2/guide/render-function.md index ff25982b17..9da6d940be 100644 --- a/src/v2/guide/render-function.md +++ b/src/v2/guide/render-function.md @@ -296,8 +296,8 @@ render: function (createElement) { value: self.value }, on: { - input: function (e) { - self.value = e.target.value + input: function (event) { + self.value = event.target.value } } }) @@ -306,6 +306,57 @@ render: function (createElement) { This is the cost of going lower-level, but it also gives you much more control over the interaction details compared to `v-model`. +### Event & Key Modifiers + +For the `.capture` and `.once` event modifiers, Vue offers prefixes that can be used with `on`: + +| Modifier(s) | Prefix | +| ------ | ------ | +| `.capture` | `!` | +| `.once` | `~` | +| `.capture.once` or
`.once.capture` | `~!` | + +For example: + +```javascript +on: { + '!click': this.doThisInCapturingMode, + '~keyup': this.doThisOnce, + `~!mouseover`: this.doThisOnceInCapturingMode +} +``` + +For all other event and key modifiers, no proprietary prefix is necessary, because you can simply use event methods in the handler: + +| Modifier(s) | Equivalent in Handler | +| ------ | ------ | +| `.stop` | `event.stopPropagation()` | +| `.prevent` | `event.preventDefault()` | +| `.self` | `if (event.target !== event.currentTarget) return` | +| Keys:
`.enter`, `.13` | `if (event.keyCode !== 13) return` (change `13` to [another key code](keycode.info) for other key modifiers) | +| Modifiers Keys:
`.ctrl`, `.alt`, `.shift`, `.meta` | `if (!event.ctrlKey) return` (change `ctrlKey` to `altKey`, `shiftKey`, or `metaKey`, respectively) | + +Here's an example with all of these modifiers used together: + +```javascript +on: { + keyup: function (event) { + // Abort if the element emitting the event is not + // the element the event is bound to + if (event.target !== event.currentTarget) return + // Abort if the key that went up is not the enter + // key (13) and the shift key was not held down + // at the same time + if (!event.shiftKey || event.keyCode !== 13) return + // Stop event propagation + event.stopPropagation() + // Prevent the default keyup handler for this element + event.preventDefault() + // ... + } +} +``` + ### Slots You can access static slot contents as Arrays of VNodes from [`this.$slots`](http://vuejs.org/v2/api/#vm-slots): From 5f3a52411a4c6a14cb61a71f8eb906e7e09702c1 Mon Sep 17 00:00:00 2001 From: Chris Fritz Date: Fri, 2 Dec 2016 11:49:40 -0500 Subject: [PATCH 4/4] improve styling for tables --- themes/vue/source/css/page.styl | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl index da7bc23443..f2c62ca6f3 100644 --- a/themes/vue/source/css/page.styl +++ b/themes/vue/source/css/page.styl @@ -93,6 +93,29 @@ margin-left 0 iframe margin 1em 0 + > table + border 1px solid $border + margin 1.2em auto + padding: 1em + border-collapse collapse + td, th + line-height 1.6em + padding .5em + border none + &:first-child + padding-left: 1.4em + &:last-child + padding-right: 1.4em + th + padding-top: .85em + padding-bottom .85em + text-align left + tbody + tr:nth-child(2n - 1) + background-color #fdfdfd + tr:last-child + td + padding-bottom: 1.2em p.tip padding 12px 24px 12px 30px margin 2em 0