Skip to content

Commit a7ab66d

Browse files
committed
add api for v-bind
1 parent 98c1b19 commit a7ab66d

File tree

1 file changed

+59
-0
lines changed

1 file changed

+59
-0
lines changed

source/api/index.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1519,6 +1519,8 @@ type: api
15191519

15201520
Attaches an event listener to the element. The event type is denoted by the argument. The expression can either be a method name or an inline statement.
15211521

1522+
When used on a normal element, it listens to **native DOM events** only. When used on a custom element component, it also listens to **custom events** emitted on that child component.
1523+
15221524
- **Example:**
15231525

15241526
``` html
@@ -1547,8 +1549,65 @@ type: api
15471549
<input @keyup.13="onEnter">
15481550
```
15491551

1552+
Listening to custom events on a child component (the handler is called when "my-event" is emitted on the child):
1553+
1554+
``` html
1555+
<my-component @my-event="handleThis"></my-component>
1556+
```
1557+
15501558
- **See also:** [Methods and Event Handling](/guide/events.html)
15511559

1560+
### v-bind
1561+
1562+
- **Shorthand:** `:`
1563+
1564+
- **Expects:** `*`
1565+
1566+
- **Argument:** `attrOrProp (required)`
1567+
1568+
- **Mofifiers:**
1569+
- `.sync` - make the binding two-way. Only respected for prop bindings.
1570+
- `.once` - make the binding one-time. Only respected for prop bindings.
1571+
1572+
- **Usage:**
1573+
1574+
Dynamically bind an attribute or a component prop to an expression.
1575+
1576+
When used to bind the `class` or `style` attribute, it supports additional value types such as Array or Objects. See linked guide section below for more details.
1577+
1578+
When used for prop binding, the prop must be properly declared in the child component. Prop bindings can specify a different binding type using one of the modifiers.
1579+
1580+
- **Example:**
1581+
1582+
``` html
1583+
<!-- bind an attribute -->
1584+
<img v-bind:src="imageSrc">
1585+
1586+
<!-- shorthand -->
1587+
<img :src="imageSrc">
1588+
1589+
<!-- class binding -->
1590+
<div :class="{ red: isRed }"></div>
1591+
<div :class="[classA, classB]"></div>
1592+
1593+
<!-- style binding -->
1594+
<div :style="{ fontSize: size + 'px' }"></div>
1595+
<div :style="[styleObjectA, styleObjectB]"></div>
1596+
1597+
<!-- prop binding. "prop" must be declared in my-component. -->
1598+
<my-component :prop="someThing"></my-component>
1599+
1600+
<!-- two-way prop binding -->
1601+
<my-component :prop.sync="someThing"></my-component>
1602+
1603+
<!-- one-time prop binding -->
1604+
<my-component :prop.once="someThing"></my-component>
1605+
```
1606+
1607+
- **See also:**
1608+
- [Class and Style Bindings](/guide/class-and-style.html)
1609+
- [Component Props](/guide/components.html#Props)
1610+
15521611
### v-model
15531612

15541613
- **Expects:** varies based on input type

0 commit comments

Comments
 (0)