From c94bc88865561fb86de557a8440abde00100d12d Mon Sep 17 00:00:00 2001
From: Damian Stasik <visualfanatic@users.noreply.github.com>
Date: Tue, 21 Jul 2020 00:05:37 +0200
Subject: [PATCH] fix: use current event modifiers syntax in render function

---
 src/guide/render-function.md | 35 ++++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index e7175aaaca..98d5e847d9 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -295,27 +295,32 @@ render() {
 
 #### Event Modifiers
 
-For the `.passive`, `.capture`, and `.once` event modifiers, Vue offers object syntax of the handler:
+For the `.passive`, `.capture`, and `.once` event modifiers, Vue offers a special JSX-friendly syntax - no dots and the prop name has to be in the camelCase notation.
+We can also combine multiple event modifiers, e.g., to use both `.capture` and `.once` event modifiers, the prop name would be `onMouseOverCaptureOnce`.
 
 For example:
 
 ```javascript
 render() {
-  return Vue.h('input', {
-    onClick: {
-      handler: this.doThisInCapturingMode,
-      capture: true
-    },
-    onKeyUp: {
-      handler: this.doThisOnce,
-      once: true
-    },
-    onMouseOver: {
-      handler: this.doThisOnceInCapturingMode,
-      once: true,
-      capture: true
+  return Vue.h(
+    'div',
+    {
+      // `.passive` modifier
+      onScrollPassive: this.doThisInPassiveMode,
     },
-  })
+    [
+      Vue.h('input', {
+        // `.capture` modifier
+        onClickCapture: this.doThisInCapturingMode,
+
+        // `.once` modifier
+        onKeyUpOnce: this.doThisOnce,
+
+        // Both `.capture` and `.once` modifier
+        onMouseOverCaptureOnce: this.doThisOnceInCapturingMode,
+      })
+    ]
+  )
 }
 ```