You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: source/api/directives.md
+16-7Lines changed: 16 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -85,13 +85,6 @@ When the argument is prefixed with `$`, Vue.js will automatically apply prefixed
85
85
86
86
<pclass="tip">It is recommended to use `v-style` instead of mustache bindings inside `style` attribute because Internet Explorer, regardless of version, will remove invalid inline styles when parsing the HTML.</p>
87
87
88
-
### v-repeat
89
-
90
-
- This directive requires the value to be Array or falsy.
91
-
- This directive can trigger transitions.
92
-
93
-
Create a child ViewModel for every item in the binding Array. These child ViewModels will be automatically created / destroyed when mutating methods, e.g. `push()`, are called on the Array. For more details see [Displaying a List](/guide/list.html).
94
-
95
88
### v-on
96
89
97
90
- This directive requires exactly one argument.
@@ -111,8 +104,17 @@ Create a two-way binding on a form or editable element. Data is synced on every
111
104
112
105
Conditionally insert / remove the element based on the truthy-ness of the binding value.
113
106
107
+
### v-repeat
108
+
109
+
- This directive requires the value to be Array or falsy.
110
+
- This directive creates child ViewModels.
111
+
- This directive can trigger transitions.
112
+
113
+
Create a child ViewModel for every item in the binding Array. These child ViewModels will be automatically created / destroyed when mutating methods, e.g. `push()`, are called on the Array. For more details see [Displaying a List](/guide/list.html).
114
+
114
115
### v-with
115
116
117
+
- This directive creates child ViewModels.
116
118
- This directive accepts only keypaths, no expressions.
117
119
118
120
Compile this element as a child ViewModel, inheriting data from the parent. You can either pass in an Object which will be used as the `data` option, or bind individual parent properties to the child with different keys. This directive can be used in combination with `v-component`.
@@ -145,6 +147,13 @@ Example inehriting individual properties (using the same data):
145
147
</div>
146
148
```
147
149
150
+
### v-view
151
+
152
+
- This directive creates child ViewModels.
153
+
- This directive can trigger transitions.
154
+
155
+
Conditionally instantiate ViewModels, using the bound value as the Component ID to look up constructors with. When the bound value changes, existing ViewModel will be destroyed and a new ViewModel will be created. When a ViewModel is created, the original element will be replaced, but all attributes will be copied to the new element. For more details, see [Routing](/guide/application.html#routing).
156
+
148
157
## Literal Directives
149
158
150
159
> Literal directives treat their attribute value as a plain string; they do not attempt to bind themselves to anything. All they do is executing the `bind()` function with the string value once. Literal directives accept mustache expressions inside their value, but these expressions will be evaludated only once on first compile and do not react to data changes.
Copy file name to clipboardExpand all lines: source/guide/application.md
+24-2Lines changed: 24 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -23,9 +23,31 @@ Similar modularization can be achieved in Browserify too, with transform plugins
23
23
24
24
## Routing
25
25
26
-
You can implement some rudimentary routing logic by manually updating a state object on hashchange. An example can be found [here](https://github.com/yyx990803/vue/blob/master/test/functional/fixtures/routing.html).
26
+
You can implement some rudimentary routing logic by manually listening on hashchange and utilizing the `v-view` direcitve. The `v-view` directive is essentially a dynamic component loader: it binds to a string value and creates a new VM instance using that string as the Component ID (and destroys the old VM if it exists). Example:
27
27
28
-
It is also possible to implement something more robust with the help of routing components such as [Page.js](https://github.com/visionmedia/page.js) or [Director](https://github.com/flatiron/director). There is plan to provide a vue-router component that integrates with Vue.js for easier routing and deep linking.
28
+
```html
29
+
<divid="app">
30
+
<divv-view="currentView"></div>
31
+
</div>
32
+
```
33
+
34
+
```js
35
+
Vue.component('home', { /* ... */ })
36
+
Vue.component('page1', { /* ... */ })
37
+
38
+
var app =newVue({
39
+
el:'#app',
40
+
data: {
41
+
currentView:'home'
42
+
}
43
+
})
44
+
```
45
+
46
+
The `home` component will be rendered in place of `v-view`. When `currentView`'s value changes to `page1`, the existing `home` component will be destroyed and replaced by the new `page1` component. The full, more detailed example can be found [here](https://github.com/yyx990803/vue/blob/master/test/functional/fixtures/routing.html).
47
+
48
+
<pclass="tip">`v-view` will replace the element it's bound to with the new instantiated VM's element, so avoid using it on your root element.</p>
49
+
50
+
With `v-view` it's very easy to leverage standalone routing libraries such as [Page.js](https://github.com/visionmedia/page.js) and [Director](https://github.com/flatiron/director). There is plan to provide a vue-router component that integrates with Vue.js for easier routing and deep linking.
Copy file name to clipboardExpand all lines: source/guide/composition.md
+6-2Lines changed: 6 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -36,6 +36,10 @@ If you prefer, components can also be used in the form of a custom element tag:
36
36
37
37
<pclass="tip">To avoid naming collisions with native elements and stay consistent with the W3C Custom Elements specification, the component's ID **must** contain a hyphen `-` to be usable as a custom tag.</p>
38
38
39
+
It is important to understand the difference between `Vue.extend()` and `Vue.component()`. Since `Vue` itself is a constructor, `Vue.extend()` is a **class inheritance method**. Its task is to create a sub-class of `Vue` and return the constructor. `Vue.component()`, on the other hand, is an **asset registration method** similar to `Vue.directive()` and `Vue.filter()`. Its task is to associate a given constructor with a string ID so Vue.js can pick it up in templates. When directly passing in options to `Vue.component()`, it calls `Vue.extend()` under the hood.
40
+
41
+
Vue.js supports two different API paradigms: the class-based, imperative, Backbone style API, and the markup-based, declarative, Web Components style API. If you are confused, think about how you can create an image element with `new Image()`, or with an `<img>` tag. Both are useful in its own right and Vue.js tries to provide both for maximum flexibility.
42
+
39
43
## Partials and {{>yield}}
40
44
41
45
You can use partials in templates with {{>partial-id}}, which inserts the partial registered via `Vue.partial('partial-id', '...')`. But there is a special reserved partial ID: `yield`. Basically, the `yield` partial inside a template serves as a insertion point for the original, pre-compile content inside the element. This syntax allows components to be easily nested and composed while maintaining their custom markup. For example:
@@ -80,10 +84,10 @@ var MyComponent = Vue.extend({
0 commit comments