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/_posts/011-component.md
+3-1Lines changed: 3 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -3,6 +3,8 @@ date: 2014-12-08 15:02:14
3
3
tags:
4
4
---
5
5
6
+
<pclass="tip">Note: this post contains information for the outdated 0.11 version. Please refer to the [0.12 release notes](https://github.com/yyx990803/vue/releases) for the changes in the API.</p>
7
+
6
8
The release of 0.11 introduced [many changes](https://github.com/yyx990803/vue/blob/master/changes.md), but the most important one is how the new component scope works. Previously in 0.10.x, components have inherited scope by default. That means in a child component template you can reference parent scope properties. This often leads to tightly-coupled components, where a child component assumes knowledge of what properties are present in the parent scope. It is also possible to accidentally refer to a parent scope property in a child component.
7
9
8
10
<!-- more -->
@@ -55,4 +57,4 @@ Previously the standard way for a child component to communicate to its parent i
55
57
56
58
The most common use case is for a parent to react to the events from a specific, direct child component. So in 0.11.4, [a new directive `v-events`](/api/directives.html#v-events) has been introduced to enable exactly this behavior.
I'm really excited to announce that [Vue.js 0.12: Dragon Ball](https://github.com/yyx990803/vue/releases/tag/0.12.0) is finally here! Thanks to everyone who tried out the beta/rc versions and provided feedback / bug reports along the way.
6
+
7
+
There's a lot to cover in this release, and we will talk about a few highlights below. However, it is still recommended to carefully go through the [Full Release Note](https://github.com/yyx990803/vue/releases/tag/0.12.0) and updated docs if you are upgrading from 0.11. You can report bugs on GitHub, send questions to [vuejs/Discussion](https://github.com/vuejs/Discussion/issues), or join us in the [Gitter chat channel](https://gitter.im/yyx990803/vue).
8
+
9
+
<!-- more -->
10
+
11
+
### More Consistent Component Syntax
12
+
13
+
Previously in 0.11 you have two ways to use a Vue.js component: using the `v-component` directive, or using custom elements. There are also two ways to pass data down to child components: using the `v-with` directive, or using the `paramAttributes` option. Although both custom elements and param attributes get compiled down to directives eventually, it is confusing and redundant to have two sets of syntax for the same functionality.
14
+
15
+
In addition, it should be noted that the component system is a first-class concept in Vue.js, even more important than directives. It defines how we encapsulate our higher-level view logic and compose our application. In the meanwhile, having a clear and declarative way to pass data into child components is also very important. Components and param attributes really deserve their own dedicated syntax to differentiate from other directives.
16
+
17
+
As a result, `v-component` and `v-with` have been deprecated in 0.12. `paramAttributes` has also been renamed to `props`, which is shorter and cleaner. From now on, most Vue.js components will look like this:
There are also additional props-related improvements such as explicit one-time or one-way props, expression as props, methods as prop callbacks and more. You can find out more details in the 0.12 release notes linked above and the updated [Component System](/guide/components.html) section of the guide.
24
+
25
+
### Filter Arguments Improvements
26
+
27
+
In 0.11, filters always receive their arguments as plain strings. An argument can be enclosed in quotes to include whitespace, but the quotes are not automatically stripped when passed into the filter function. Some users were also confused about how to retrive a dynamic value on the vm instead of a plain string.
28
+
29
+
In 0.12, the filter argument syntax now follows a simple rule: if an argument is enclosed in quotes, it will be passed in as a plain string; otherwise, it will be evaluated against the current vm as a dynamic value.
30
+
31
+
This means the usage of some existing filters will have to change:
32
+
33
+
```html
34
+
<av-on="keyup: onKeyUp | key 'enter'"></a>
35
+
{{ items.length | pluralize 'item' }}
36
+
```
37
+
38
+
But it would make custom filters that rely on dynamic values much easier to write:
39
+
40
+
```html
41
+
{{ msg | concat otherMsg }}
42
+
```
43
+
44
+
Here the first argument to the `concat` filter will be the value of `this.otherMsg`.
45
+
46
+
### Asynchronous Components
47
+
48
+
It is common practice to bundle all the JavaScript into one file when building large single page applications. But when the file becomes too large, we may want to defer loading parts of our application for a faster initial load. However, this does pose some constraints on how the application architecture should be designed. It could be very tricky to figure out how to properly split up your JavaScript bundles.
49
+
50
+
Well, with Vue.js we can already build our applications as decoupled components. If we can lazily load a dynamic component only when it is needed, wouldn't it be awesome? As a matter of fact, in 0.12 this would be trivially easy with the new Asynchronous Component feature.
51
+
52
+
In 0.12, you can define a component as a factory function that asynchronously resolves a component definition (can be just a plain options object). Vue.js will only trigger the factory function when the component actually needs to be rendered, and will cache the result for future re-renders:
53
+
54
+
```js
55
+
Vue.component('async-example', function (resolve, reject) {
56
+
setTimeout(function () {
57
+
resolve({
58
+
template:'<div>I am async!</div>'
59
+
})
60
+
}, 1000)
61
+
})
62
+
```
63
+
64
+
It is up to you to decide how to load the component from the server, e.g. `$.getScript()` or require.js; but the recommended usage is to pair it up with Webpack's [Code Splitting feature](http://webpack.github.io/docs/code-splitting.html):
65
+
66
+
```js
67
+
Vue.component('async-webpack-example', function (resolve, reject) {
68
+
// In Webpack AMD like syntax indicates a code split point
69
+
require(['./my-async-component'], resolve)
70
+
})
71
+
```
72
+
73
+
That's all you need to do. You can use the component just like before, without even thinking about it being async. Webpack will automatically split your final JavaScript into separate bundles with correct dependencies, and automatically load a bundle via Ajax when it is required. You can check out a fully functional example [here](https://github.com/vuejs/vue-webpack-example).
74
+
75
+
### Improved Transition System
76
+
77
+
Vue.js' transition system is really easy to use, but in the past it has the limitation that you cannot mix CSS and JavaScript-based transitions together. In 0.12 that is no longer the case! The improved transition system now allows you to add JavaScript hooks to a CSS-based transition for additional control. The amount of hooks exposed have also been expanded to give you finer-grained control at every stage of the transition.
78
+
79
+
`v-repeat` now also ships with built-in support for staggering transitions. It is as simple as adding `stagger="100"` to your repeated element. It is also possible to define separate staggering for enter and leaving, or even dynamically calculate the staggering delay in a JavaScript hook.
80
+
81
+
For full details on the new transition system, check out the [updated guide](/guide/transitions.html).
82
+
83
+
### Performance Tuning
84
+
85
+
Vue.js' precise dependency tracking makes it the one of the most efficient view layer for small hot updates, but there's always room for improvement. In 0.12, internal instance creation and compilation refactors have improved first-render performance for large lists by up to 40%. With proper `track-by` usage, [re-rendering with large, brand new dataset](http://vuejs.github.io/js-repaint-perfs/vue/) is also comparable to, or even faster other Virtual-DOM based frameworks.
86
+
87
+
### One More Thing...
88
+
89
+
With 0.12 out of the door, more efforts will now be spent on the official vue-router, a dedicated routing library for Vue.js with nested view matching, full transition support, and asynchronous data hooks. I have expressed that Vue.js core intends to stay as a no-frills, drop-in view layer library, and that will not change. The vue-router will be shipped separately and is totally optional, however you can expect it to work seamlessly with Vue.js core when you need it.
Copy file name to clipboardExpand all lines: source/api/directives.md
+17-81Lines changed: 17 additions & 81 deletions
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ order: 6
11
11
12
12
Updates the element's `textContent`.
13
13
14
-
Internally, {{ Mustache }} interpolations are also compiled as a `v-text`direcitve on a textNode.
14
+
Internally, {{ Mustache }} interpolations are also compiled as a `v-text`directive on a textNode.
15
15
16
16
### v-html
17
17
@@ -41,6 +41,8 @@ If a directive argument is provided, the argument will be the class to be toggle
41
41
"></span>
42
42
```
43
43
44
+
Alternatively, you can bind the directive directly to an Object. The keys of the object will the list of classes to toggle based on corresponding values.
45
+
44
46
### v-attr
45
47
46
48
- This directive requires an argument.
@@ -53,6 +55,10 @@ Updates the element's given attribute (indicated by the argument).
53
55
<canvasv-attr="width:w, height:h"></canvas>
54
56
```
55
57
58
+
Falsy values except 0 will remove the attribute.
59
+
60
+
Alternatively, you can bind the directive directly to an Object. The keys of the object will the list of attributes to set based on corresponding values.
61
+
56
62
Internally, {{ Mustache }} interpolations inside attributes are compiled into computed `v-attr` directives.
57
63
58
64
<pclass="tip">You should use `v-attr` instead of mustache binding when setting the `src` attribute on `<img>` elements. Your templates are parsed by the browser before being compiled by Vue.js, so the mustache binding will cause a 404 when the browser tries to fetch it as the image's URL.</p>
@@ -117,7 +123,7 @@ Attaches an event listener to the element. The event type is denoted by the argu
117
123
### v-model
118
124
119
125
- This directive can only be used on `<input>`, `<select>` or `<textarea>` elements.
Create a two-way binding on a form input element. Data is synced on every `input` event by default. For detailed examples see [Handling Forms](/guide/forms.html).
123
129
@@ -151,7 +157,7 @@ Will render:
151
157
- This directive requires the value to be an Array, Object or Number.
Create a child ViewModel for every item in the binding Array or Object. If the value is a whole Number then that many child ViewModels are created. These child ViewModels will be automatically created / destroyed when mutating methods, e.g. `push()`, are called on the Array or Object, or the number is increased or decreased.
157
163
@@ -179,100 +185,30 @@ If an argument is provided, a wrapper data object will always be created, using
179
185
180
186
For detailed examples, see [Displaying a List](/guide/list.html).
181
187
182
-
### v-with
183
-
184
-
- This directive can only be used with `v-component`.
185
-
- This directive accepts only keypaths, no expressions.
186
-
187
-
Allows a child ViewModel to inherit data from the parents. 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 must be used in combination with `v-component`.
188
-
189
-
Example inheriting an object:
190
-
191
-
```js
192
-
// parent data looks like this
193
-
{
194
-
user: {
195
-
name:'Foo Bar',
196
-
email:'foo@bar.com'
197
-
}
198
-
}
199
-
```
200
-
201
-
```html
202
-
<my-componentv-with="user">
203
-
<!-- you can access properties without `user.` -->
204
-
{{name}} {{email}}
205
-
</my-component>
206
-
```
207
-
208
-
Example inheriting individual properties (using the same data):
<!-- you can access properties with the new keys -->
213
-
{{myName}} {{myEmail}}
214
-
</my-component>
215
-
```
216
-
217
-
### v-events
218
-
219
-
- This directive can only be used with `v-component`.
220
-
- This directive accepts only keypaths, no expressions.
221
-
222
-
Allows a parent instance to listen to events on a child instance. The difference from `v-on` is that `v-events` listens to Vue's component system events created via `vm.$emit()` rather than DOM events. This directive allows more decoupled parent-child communication without having to hard-code event listeners into the parent component. Note that it can only be used together with `v-component`, i.e. on the root element of a child component.
When the child component calls `this.$emit('change', ...)`, the parent's `onChildChange` method will be invoked with additional arguments passed to `$emit()`.
232
-
233
188
## Literal Directives
234
189
235
190
> 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 evaluated only once on first compile and do not react to data changes.
Notify Vue.js to apply transitions to this element. The transition classes are applied when certain transition-triggering directives modify the element, or when the Vue instance's DOM manipulation methods are called.
240
197
241
-
Compile this element as a child ViewModel with a registered component constructor. This can be used with `v-with` to inehrit data from the parent. For more details see [Component System](/guide/components.html).
198
+
For details, see [the guide on transitions](/guide/transitions.html).
242
199
243
200
### v-ref
244
201
245
-
Register a reference to a child component on its parent for easier access. Only respected when used in combination with `v-component` or `v-repeat`. The component instance will be accessible on its parent's `$` object. For an example, see [child reference](/guide/components.html#Child_Reference).
202
+
Register a reference to a child component on its parent for easier access. Only respected when used on a component or with`v-repeat`. The component instance will be accessible on its parent's `$` object. For an example, see [child reference](/guide/components.html#Child_Reference).
246
203
247
204
When used with `v-repeat`, the value will be an Array containing all the child Vue instances corresponding to the Array they are bound to.
248
205
206
+
New in 0.12: If the `v-repeat`'s source data is an Object, then `v-ref` will return an Object with instances matching each key in the Object.
207
+
249
208
### v-el
250
209
251
210
Register a reference to a DOM element on its owner Vue instance for easier access. e.g. `<div v-el="hi">` will be accessible as `vm.$$.hi`.
252
211
253
-
### v-partial
254
-
255
-
Replace the element's innerHTML with a registered partial. Partials can be registered with `Vue.partial()` or passed inside the `partials` option.
256
-
257
-
Using the mustache tag inside `v-partial` makes it reactive:
258
-
259
-
```html
260
-
<!-- content will change based on vm.partialId -->
261
-
<divv-partial="{{partialId}}"></div>
262
-
```
263
-
264
-
You can also use this syntax (which doesn't support reactivity):
265
-
266
-
```html
267
-
<div>{{> my-partial}}</div>
268
-
```
269
-
270
-
### v-transition
271
-
272
-
Notify Vue.js to apply transitions to this element. The transition classes are applied when certain transition-triggering directives modify the element, or when the Vue instance's DOM manipulation methods are called.
273
-
274
-
For details, see [the guide on transitions](/guide/transitions.html).
275
-
276
212
## Empty Directives
277
213
278
214
> Empty directives do not require and will ignore their attribute value.
0 commit comments