Skip to content

Commit bf61cc8

Browse files
dingyimingdingyiming
authored
Merge pull request volksbright#8 from vuejs/2.0
2.0
2 parents 4ff83dc + b7d93b5 commit bf61cc8

File tree

8 files changed

+394
-54
lines changed

8 files changed

+394
-54
lines changed

‎src/api/index.md

+350
Original file line numberDiff line numberDiff line change
@@ -669,6 +669,34 @@ type: api
669669
})
670670
// callback is fired immediately with current value of `a`
671671
```
672+
673+
<h3 id="vm-set">vm.$set( object, key, value )</h3>
674+
675+
- **Arguments:**
676+
- `{Object} object`
677+
- `{String} key`
678+
- `{*} value`
679+
680+
- **Returns:** the set value.
681+
682+
- **Usage:**
683+
684+
This is the **alias** of the global `Vue.set`.
685+
686+
- **See also:** [Vue.set](#Vue-set)
687+
688+
<h3 id="vm-delete">vm.$delete( object, key )</h3>
689+
690+
- **Arguments:**
691+
- `{Object} object`
692+
- `{String} key`
693+
694+
- **Usage:**
695+
696+
This is the **alias** of the global `Vue.delete`.
697+
698+
- **See also:** [Vue.delete](#Vue-delete)
699+
672700
## Instance Methods / Events
673701

674702
<h3 id="vm-on">vm.$on( event, callback )</h3>
@@ -820,3 +848,325 @@ type: api
820848
Triggers the `beforeDestroy` and `destroyed` hooks.
821849

822850
- **See also:** [Lifecycle Diagram](/guide/instance.html#Lifecycle-Diagram)
851+
852+
## Directives
853+
854+
### v-text
855+
856+
- **Expects:** `String`
857+
858+
- **Details:**
859+
860+
Updates the element's `textContent`. If you need to update the part of `textContent`, you should use `{% raw %}{{ Mustache }}{% endraw %}` interpolations.
861+
862+
- **Example:**
863+
864+
```html
865+
<span v-text="msg"></span>
866+
<!-- same as -->
867+
<span>{{msg}}</span>
868+
```
869+
870+
- **See also:** [Data Binding Syntax - interpolations](/guide/syntax.html#Text)
871+
872+
### v-html
873+
874+
- **Expects:** `String`
875+
876+
- **Details:**
877+
878+
Updates the element's `innerHTML`. The contents are inserted as plain HTML - data bindings are ignored. If you need to reuse template pieces, you should use [functional components](!!TODO).
879+
880+
<p class="tip">Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use `v-html` on trusted content and **never** on user-provided content.</p>
881+
882+
- **Example:**
883+
884+
```html
885+
<div v-html="html"></div>
886+
```
887+
- **See also:** [Data Binding Syntax - interpolations](/guide/syntax.html#Raw-HTML)
888+
889+
### v-if
890+
891+
- **Expects:** `*`
892+
893+
- **Usage:**
894+
895+
Conditionally render the element based on the truthy-ness of the expression value. The element and its contained data bindings / components are destroyed and re-constructed during toggles. If the element is a `<template>` element, its content will be extracted as the conditional block.
896+
897+
- **See also:** [Conditional Rendering - v-if](/guide/conditional.html)
898+
899+
### v-show
900+
901+
- **Expects:** `*`
902+
903+
- **Usage:**
904+
905+
Toggle's the element's `display` CSS property based on the truthy-ness of the expression value. Triggers transitions if present.
906+
907+
- **See also:** [Conditional Rendering - v-show](/guide/conditional.html#v-show)
908+
909+
### v-else
910+
911+
- **Does not expect expression**
912+
913+
- **Restriction:** previous sibling element must have `v-if` or `v-show`.
914+
915+
- **Usage:**
916+
917+
Denote the "else block" for `v-if` and `v-show`.
918+
919+
```html
920+
<div v-if="Math.random() > 0.5">
921+
Sorry
922+
</div>
923+
<div v-else>
924+
Not sorry
925+
</div>
926+
```
927+
928+
- **See also:**
929+
- [Conditional Rendering - v-else](/guide/conditional.html#v-else)
930+
- [Conditional Rendering - Component caveat](/guide/conditional.html#Component-caveat)
931+
932+
### v-for
933+
934+
- **Expects:** `Array | Object | Number | String`
935+
936+
- **Param Attributes:**
937+
- [`key`](/guide/list.html#key)
938+
939+
- **Usage:**
940+
941+
Render the element or template block multiple times based on the source data. The directive's value must use the special syntax `alias in expression` to provide an alias for the current element being iterated on:
942+
943+
```html
944+
<div v-for="item in items">
945+
{{ item.text }}
946+
</div>
947+
```
948+
949+
Alternatively, you can also specify an alias for the index (or the key if used on an Object):
950+
951+
```html
952+
<div v-for="(item, index) in items"></div>
953+
<div v-for="(key, val) in object"></div>
954+
<div v-for="(key, val, index) in object"></div>
955+
```
956+
957+
The detailed usage for `v-for` is explained in the guide section linked below.
958+
959+
- **See also:** [List Rendering](/guide/list.html).
960+
961+
### v-on
962+
963+
- **Shorthand:** `@`
964+
965+
- **Expects:** `Function | Inline Statement`
966+
967+
- **Argument:** `event (required)`
968+
969+
- **Modifiers:**
970+
- `.stop` - call `event.stopPropagation()`.
971+
- `.prevent` - call `event.preventDefault()`.
972+
- `.capture` - add event listener in capture mode.
973+
- `.self` - only trigger handler if event was dispatched from this element.
974+
- `.{keyCode | keyAlias}` - only trigger handler on certain keys.
975+
- `.native` - listen for a native event on the root element of component.
976+
977+
- **Usage:**
978+
979+
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, or simply omitted when there are modifiers present.
980+
981+
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.
982+
983+
When listening to native DOM events, the method receives the native event as the only argument. If using inline statement, the statement has access to the special `$event` property: `v-on:click="handle('ok', $event)"`.
984+
985+
- **Example:**
986+
987+
```html
988+
<!-- method handler -->
989+
<button v-on:click="doThis"></button>
990+
991+
<!-- inline statement -->
992+
<button v-on:click="doThat('hello', $event)"></button>
993+
994+
<!-- shorthand -->
995+
<button @click="doThis"></button>
996+
997+
<!-- stop propagation -->
998+
<button @click.stop="doThis"></button>
999+
1000+
<!-- prevent default -->
1001+
<button @click.prevent="doThis"></button>
1002+
1003+
<!-- prevent default without expression -->
1004+
<form @submit.prevent></form>
1005+
1006+
<!-- chain modifiers -->
1007+
<button @click.stop.prevent="doThis"></button>
1008+
1009+
<!-- key modifier using keyAlias -->
1010+
<input @keyup.enter="onEnter">
1011+
1012+
<!-- key modifier using keyCode -->
1013+
<input @keyup.13="onEnter">
1014+
```
1015+
1016+
Listening to custom events on a child component (the handler is called when "my-event" is emitted on the child):
1017+
1018+
```html
1019+
<my-component @my-event="handleThis"></my-component>
1020+
1021+
<!-- inline statement -->
1022+
<my-component @my-event="handleThis(123, $event)"></my-component>
1023+
```
1024+
1025+
- **See also:**
1026+
- [Methods and Event Handling](/guide/events.html)
1027+
- [Components - Custom Events](/guide/components.html#Custom-Events)
1028+
1029+
### v-bind
1030+
1031+
- **Shorthand:** `:`
1032+
1033+
- **Expects:** `* (with argument) | Object (without argument)`
1034+
1035+
- **Argument:** `attrOrProp (optional)`
1036+
1037+
- **Modifiers:**
1038+
- `.prop` - Used for binding DOM attributes.
1039+
1040+
- **Usage:**
1041+
1042+
Dynamically bind one or more attributes, or a component prop to an expression.
1043+
1044+
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.
1045+
1046+
When used for prop binding, the prop must be properly declared in the child component.
1047+
1048+
When used without an argument, can be used to bind an object containing attribute name-value pairs. Note in this mode `class` and `style` does not support Array or Objects.
1049+
1050+
- **Example:**
1051+
1052+
```html
1053+
<!-- bind an attribute -->
1054+
<img v-bind:src="imageSrc">
1055+
1056+
<!-- shorthand -->
1057+
<img :src="imageSrc">
1058+
1059+
<!-- class binding -->
1060+
<div :class="{ red: isRed }"></div>
1061+
<div :class="[classA, classB]"></div>
1062+
<div :class="[classA, { classB: isB, classC: isC }]">
1063+
1064+
<!-- style binding -->
1065+
<div :style="{ fontSize: size + 'px' }"></div>
1066+
<div :style="[styleObjectA, styleObjectB]"></div>
1067+
1068+
<!-- binding an object of attributes -->
1069+
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
1070+
1071+
<!-- DOM attribute binding with prop modifier -->
1072+
<div v-bind:text-content.prop="text"></div>
1073+
1074+
<!-- prop binding. "prop" must be declared in my-component. -->
1075+
<my-component :prop="someThing"></my-component>
1076+
1077+
<!-- XLink -->
1078+
<svg><a :xlink:special="foo"></a></svg>
1079+
```
1080+
1081+
- **See also:**
1082+
- [Class and Style Bindings](/guide/class-and-style.html)
1083+
- [Components - Component Props](/guide/components.html#Props)
1084+
1085+
### v-model
1086+
1087+
- **Expects:** varies based on value of form inputs element or output of components
1088+
1089+
- **Limited to:**
1090+
- `<input>`
1091+
- `<select>`
1092+
- `<textarea>`
1093+
- components
1094+
1095+
- **Param Attributes:**
1096+
- [`lazy`](/guide/forms.html#lazy)
1097+
- [`number`](/guide/forms.html#number)
1098+
- [`trim`](/guild/forms.html#trim)
1099+
1100+
- **Usage:**
1101+
1102+
Create a two-way binding on a form input element or a component. For detailed usage, see guide section linked below.
1103+
1104+
- **See also:**
1105+
- [Form Input Bindings](/guide/forms.html)
1106+
- [Components - Parent-Child Commnunication](/guide/components.html#Form-Input-Components-using-Custom-Events)
1107+
1108+
### v-pre
1109+
1110+
- **Does not expect expression**
1111+
1112+
- **Usage**
1113+
1114+
Skip compilation for this element and all its children. You can use this for displaying raw mustache tags. Skipping large numbers of nodes with no directives on them can also speed up compilation.
1115+
1116+
- **Example:**
1117+
1118+
```html
1119+
<span v-pre>{{ this will not be compiled }}</span>
1120+
```
1121+
1122+
### v-cloak
1123+
1124+
- **Does not expect expression**
1125+
1126+
- **Usage:**
1127+
1128+
This directive will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as `[v-cloak] { display: none }`, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.
1129+
1130+
- **Example:**
1131+
1132+
```css
1133+
[v-cloak] {
1134+
display: none;
1135+
}
1136+
```
1137+
1138+
```html
1139+
<div v-cloak>
1140+
{{ message }}
1141+
</div>
1142+
```
1143+
1144+
The `<div>` will not be visible until the compilation is done.
1145+
1146+
### v-once
1147+
1148+
- **Does not expect expression**
1149+
1150+
- **Details:**
1151+
1152+
Evaluates the element and component **once** only.
1153+
1154+
```html
1155+
<!-- single element -->
1156+
<span v-once>This will never change: {{msg}}</span>
1157+
<!-- the element have children -->
1158+
<div v-once>
1159+
<h1>comment</h1>
1160+
<p>{{msg}}</p>
1161+
</div>
1162+
<!-- component -->
1163+
<my-component v-once :comment="msg"></my-component>
1164+
<!-- v-for directive -->
1165+
<ul>
1166+
<li v-for="i in list" v-once>{{i}}</li>
1167+
</ul>
1168+
```
1169+
1170+
- **See also:**
1171+
- [Data Binding Syntax - interpolations](/guide/syntax.html#Text)
1172+
- [Components - Cheap Static Components with v-once](/guide/components.html#Cheap-Static-Components-with-v-once)

0 commit comments

Comments
 (0)