feat: added explanation on prop modifiers

Author: NataliaTepluhina

src/api/built-in-directives.md

@@ -319,7 +319,7 @@ Dynamically bind one or more attributes, or a component prop to an expression.
   <svg><a :xlink:special="foo"></a></svg>
   ```
 
-  The `.prop` modifier also has a dedicated shorthand, `.`:
+  The `.prop` modifier has a dedicated shorthand, `.`:
 
   ```vue-html
   <div :someProperty.prop="someObject"></div>
@@ -328,6 +328,15 @@ Dynamically bind one or more attributes, or a component prop to an expression.
   <div .someProperty="someObject"></div>
   ```
 
+  The `.attr` modifier has a shorthand `^`:
+
+  ```vue-html
+  <div :someProperty.attr="someObject"></div>
+
+  <!-- equivalent to -->
+  <div ^someProperty="someObject"></div>
+  ```
+
   The `.camel` modifier allows camelizing a `v-bind` attribute name when using in-DOM templates, e.g. the SVG `viewBox` attribute:
 
   ```vue-html

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() {
+    /* ... */
+  }
 }
 
 // <div v-pin:top.animate="200"></div>