From 9c986295ee07c97d63f18333c9c134d4fdb93385 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Thu, 12 May 2022 10:12:04 +0200 Subject: [PATCH 1/5] feat: added explanation on prop modifiers --- src/api/built-in-directives.md | 11 +++++++++- src/guide/extras/render-function.md | 34 ++++++++++++++--------------- 2 files changed, 27 insertions(+), 18 deletions(-) diff --git a/src/api/built-in-directives.md b/src/api/built-in-directives.md index 4c1992d92f..d6df8fe3ba 100644 --- a/src/api/built-in-directives.md +++ b/src/api/built-in-directives.md @@ -319,7 +319,7 @@ Dynamically bind one or more attributes, or a component prop to an expression. ``` - The `.prop` modifier also has a dedicated shorthand, `.`: + The `.prop` modifier has a dedicated shorthand, `.`: ```vue-html
@@ -328,6 +328,15 @@ Dynamically bind one or more attributes, or a component prop to an expression.
``` + The `.attr` modifier has a shorthand `^`: + + ```vue-html +
+ + +
+ ``` + The `.camel` modifier allows camelizing a `v-bind` attribute name when using in-DOM templates, e.g. the SVG `viewBox` attribute: ```vue-html diff --git a/src/guide/extras/render-function.md b/src/guide/extras/render-function.md index 1039ae8df4..cb7d0d7cf3 100644 --- a/src/guide/extras/render-function.md +++ b/src/guide/extras/render-function.md @@ -39,6 +39,9 @@ h('div', { id: 'foo' }) // Vue automatically picks the right way to assign it h('div', { class: 'bar', innerHTML: 'hello' }) +// props modifiers such as .prop and .attr can be added via shorthands +h('div', { .name: 'some-name', ^width: '100' }) + // class and style have the same object / array // value support that they have in templates h('div', { class: [foo, { bar }], style: { color: 'red' } }) @@ -112,11 +115,7 @@ import { h } from 'vue' export default { setup() { // use an array to return multiple root nodes - return () => [ - h('div'), - h('div'), - h('div') - ] + return () => [h('div'), h('div'), h('div')] } } ``` @@ -163,11 +162,7 @@ import { h } from 'vue' export default { render() { // use an array to return multiple root nodes - return [ - h('div'), - h('div'), - h('div') - ] + return [h('div'), h('div'), h('div')] } } ``` @@ -563,8 +558,8 @@ Passing slots as functions allows them to be invoked lazily by the child compone import { h, KeepAlive, Teleport, Transition, TransitionGroup } from 'vue' export default { - setup () { - return () => h(Transition, { mode: 'out-in' }, /* ... */) + setup() { + return () => h(Transition, { mode: 'out-in' } /* ... */) } } ``` @@ -576,8 +571,8 @@ export default { import { h, KeepAlive, Teleport, Transition, TransitionGroup } from 'vue' export default { - render () { - return h(Transition, { mode: 'out-in' }, /* ... */) + render() { + return h(Transition, { mode: 'out-in' } /* ... */) } } ``` @@ -614,7 +609,8 @@ export default { render() { return h(SomeComponent, { modelValue: this.modelValue, - 'onUpdate:modelValue': (value) => this.$emit('update:modelValue', value) + 'onUpdate:modelValue': (value) => + this.$emit('update:modelValue', value) }) } } @@ -631,8 +627,12 @@ import { h, withDirectives } from 'vue' // a custom directive const pin = { - mounted() { /* ... */ }, - updated() { /* ... */ } + mounted() { + /* ... */ + }, + updated() { + /* ... */ + } } //
From bd893d9c98c95fcafed806e73784eb7f564cb56f Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Thu, 12 May 2022 10:14:59 +0200 Subject: [PATCH 2/5] fix: fixed quotes --- src/guide/extras/render-function.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/extras/render-function.md b/src/guide/extras/render-function.md index cb7d0d7cf3..6c23d27fdb 100644 --- a/src/guide/extras/render-function.md +++ b/src/guide/extras/render-function.md @@ -40,7 +40,7 @@ h('div', { id: 'foo' }) h('div', { class: 'bar', innerHTML: 'hello' }) // props modifiers such as .prop and .attr can be added via shorthands -h('div', { .name: 'some-name', ^width: '100' }) +h('div', { '.name': 'some-name', '^width': '100' }) // class and style have the same object / array // value support that they have in templates From 0c155013dea1f5b772a2365c9a0bb1e81d4bda41 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Thu, 12 May 2022 10:16:51 +0200 Subject: [PATCH 3/5] fix: fixed autoformatting --- src/guide/extras/render-function.md | 31 ++++++++++++++++------------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/src/guide/extras/render-function.md b/src/guide/extras/render-function.md index 6c23d27fdb..4c74fa0df5 100644 --- a/src/guide/extras/render-function.md +++ b/src/guide/extras/render-function.md @@ -115,7 +115,11 @@ import { h } from 'vue' export default { setup() { // use an array to return multiple root nodes - return () => [h('div'), h('div'), h('div')] + return () => [ + h('div'), + h('div'), + h('div') + ] } } ``` @@ -162,7 +166,11 @@ import { h } from 'vue' export default { render() { // use an array to return multiple root nodes - return [h('div'), h('div'), h('div')] + return [ + h('div'), + h('div'), + h('div') + ] } } ``` @@ -558,8 +566,8 @@ Passing slots as functions allows them to be invoked lazily by the child compone import { h, KeepAlive, Teleport, Transition, TransitionGroup } from 'vue' export default { - setup() { - return () => h(Transition, { mode: 'out-in' } /* ... */) + setup () { + return () => h(Transition, { mode: 'out-in' }, /* ... */) } } ``` @@ -571,8 +579,8 @@ export default { import { h, KeepAlive, Teleport, Transition, TransitionGroup } from 'vue' export default { - render() { - return h(Transition, { mode: 'out-in' } /* ... */) + render () { + return h(Transition, { mode: 'out-in' }, /* ... */) } } ``` @@ -609,8 +617,7 @@ export default { render() { return h(SomeComponent, { modelValue: this.modelValue, - 'onUpdate:modelValue': (value) => - this.$emit('update:modelValue', value) + 'onUpdate:modelValue': (value) => this.$emit('update:modelValue', value) }) } } @@ -627,12 +634,8 @@ import { h, withDirectives } from 'vue' // a custom directive const pin = { - mounted() { - /* ... */ - }, - updated() { - /* ... */ - } + mounted() { /* ... */ }, + updated() { /* ... */ } } //
From 4eac4049fe05380a838f740d7dae6398abcfde9b Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Thu, 12 May 2022 17:08:31 +0200 Subject: [PATCH 4/5] fix: reverted change for .attr modifier --- src/api/built-in-directives.md | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/api/built-in-directives.md b/src/api/built-in-directives.md index d6df8fe3ba..4c1992d92f 100644 --- a/src/api/built-in-directives.md +++ b/src/api/built-in-directives.md @@ -319,7 +319,7 @@ Dynamically bind one or more attributes, or a component prop to an expression. ``` - The `.prop` modifier has a dedicated shorthand, `.`: + The `.prop` modifier also has a dedicated shorthand, `.`: ```vue-html
@@ -328,15 +328,6 @@ Dynamically bind one or more attributes, or a component prop to an expression.
``` - The `.attr` modifier has a shorthand `^`: - - ```vue-html -
- - -
- ``` - The `.camel` modifier allows camelizing a `v-bind` attribute name when using in-DOM templates, e.g. the SVG `viewBox` attribute: ```vue-html From 1922783f92a5f49b4a94a4c2cf5108f3bd3fd4a8 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Thu, 12 May 2022 17:12:42 +0200 Subject: [PATCH 5/5] fix: tweaked the wording on prefixes --- src/guide/extras/render-function.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/guide/extras/render-function.md b/src/guide/extras/render-function.md index 4c74fa0df5..ad2cb21171 100644 --- a/src/guide/extras/render-function.md +++ b/src/guide/extras/render-function.md @@ -39,7 +39,8 @@ h('div', { id: 'foo' }) // Vue automatically picks the right way to assign it h('div', { class: 'bar', innerHTML: 'hello' }) -// props modifiers such as .prop and .attr can be added via shorthands +// props modifiers such as .prop and .attr can be added +// with '.' and `^' prefixes respectively h('div', { '.name': 'some-name', '^width': '100' }) // class and style have the same object / array