Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 20495f3

Browse files
0.10 blog update
1 parent a73823d commit 20495f3

File tree

2 files changed

+111
-67
lines changed

2 files changed

+111
-67
lines changed

‎source/_posts/vuejs-010-release.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
title: Vue.js 0.10 is here!
22
date: 2014年03月22日 19:00:13
33
type: '{{type}}'
4+
yield: '{{>yield}}'
45
---
56

67
Vue.js 0.10.0 (Blade Runner) has been released! This release comes with many useful additions based on the suggestions from the users, notably interpolation in literal directives, dynamic components with the new `v-view` directive, array filters, and the option to configure interpolation delimiters. Internally, the codebase has received many refactoring and inprovements which makes Vue.js even faster.
@@ -22,12 +23,13 @@ See the [Installation](/guide/installation.html) page for the latest builds.
2223

2324
### Changed
2425

26+
- `{{yield}}` syntax has been deprecated. A Web Components spec compatible content insertion mechanism using `<content>` elements has been introduced. [Doc](/guide/composition.html#content-insertion-points).
2527
- To use a component as a custom element, the component ID must now contain a hyphen (`-`). This is consistent with the current custom element spec draft.
26-
- `v-repeat` Arrays' augmented methods have been renamed to `$set(index, value)` and `$remove(index | value)` to better differentiate from native methods. The `replace` method has been removed.
28+
- `v-repeat` Arrays' augmented methods have been renamed from `set`to `$set(index, value)` and `remove` to `$remove(index | value)`. The prefix better differentiates them from native methods. The `replace` method has been removed.
2729
- When iterating over an Object with `v-repeat`, the object no longer gets a `$repeater` array. Instead, the object is now augmented with two methods: `$add(key, value)` and `$delete(key)`, which will trigger corresponding view updates.
28-
- Production build now strips all warnings and debug logs. To leverage `debug: true` you now have to use the development version.
2930
- `v-if` now creates and destroys a child ViewModel instance when the binding value changes, instead of simply removing/inserting the DOM node. In addition, it can no longer be used with `v-repeat`. Use `v-show` or the new built-in array filters instead.
3031
- `v-with` can no longer be used alone. It now must be used with either `v-component` or `v-view`. `v-component` can also be used as an empty directive just to create a child VM using the default `Vue` constructor.
32+
- Production build now strips all warnings and debug logs. To leverage `debug: true`, use the development version. The development version now has more detailed warning messages.
3133

3234
### Fixed
3335

@@ -39,4 +41,5 @@ See the [Installation](/guide/installation.html) page for the latest builds.
3941

4042
- `v-component`, `v-with` and `v-if` have been re-written for a cleaner compile flow.
4143
- `v-repeat` has been re-written to use refined diff algorithm which triggers minimum DOM manipulations when the array is set to a different instance containing overlapping elements. This makes it efficient to pipe an Array through filters.
42-
- The compiling procedure has been further optimized and instantiation perf has increased roughly 20%.
44+
- `template` option now directly clones native `<template>`'s content when available.
45+
- Overall performance improvements for both initialization and rendering.

‎source/guide/composition.md‎

Lines changed: 105 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -46,69 +46,6 @@ It is important to understand the difference between `Vue.extend()` and `Vue.com
4646

4747
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.
4848

49-
## Partials and {&#123;>yield&#125;}
50-
51-
You can use partials in templates with {&#123;>partial-id&#125;}, 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:
52-
53-
Top level markup:
54-
55-
``` html
56-
<div v-component="my-component">
57-
<p>original content</p>
58-
</div>
59-
```
60-
61-
Template for `my-component`:
62-
63-
``` html
64-
<div class="wrapper">
65-
<h1>This is my component!</h1>
66-
{&#123;> yield&#125;}
67-
</div>
68-
```
69-
70-
When the component element is compiled, its content will be replaced with the component's template, but the original content will be preserved and inserted into the `yield` position. If no `yield` outlet is found in the template, the original content will be wiped away.
71-
72-
<p class="tip">If needed, you can get access to the original content DocumentFragment in the component's `created` hook as a `this.$compiler.rawContent`.</p>
73-
74-
## Encapsulating Private Assets
75-
76-
Sometimes a component needs to use assets such as directives, filters and its own child components, but might want to keep these assets encapsulated so the component itself can be reused elsewhere. You can do that using the private assets instantiation options. Private assets will only be accessible by the instances of the owner component and its child components.
77-
78-
``` js
79-
// All 5 types of assets
80-
var MyComponent = Vue.extend({
81-
directives: {
82-
// id : definition pairs same with the global methods
83-
'private-directive': function () {
84-
// ...
85-
}
86-
},
87-
filters: {
88-
// ...
89-
},
90-
components: {
91-
// ...
92-
},
93-
partials: {
94-
// ...
95-
},
96-
effects: {
97-
// ...
98-
}
99-
})
100-
```
101-
102-
Alternatively, you can add private assets to an existing Component constructor using a chaining API similar to the global asset registeration methods:
103-
104-
``` js
105-
MyComponent
106-
.directive('...', {})
107-
.filter('...', function () {})
108-
.component('...', {})
109-
// ...
110-
```
111-
11249
## Data Inheritance
11350

11451
### Inheriting Objects from Parent as `$data`
@@ -157,7 +94,7 @@ var parent = new Vue({
15794
})
15895
</script>
15996

160-
### Inheriting Properties with `v-with`
97+
### Inheriting Individual Properties with `v-with`
16198

16299
When `v-with` is given an argument, it will create a property on the child Component's `$data` using the argument as the key. That property will be kept in sync with the bound value on the parent:
163100

@@ -315,4 +252,108 @@ var parent = new Vue({
315252
})
316253
</script>
317254

255+
## Encapsulating Private Assets
256+
257+
Sometimes a component needs to use assets such as directives, filters and its own child components, but might want to keep these assets encapsulated so the component itself can be reused elsewhere. You can do that using the private assets instantiation options. Private assets will only be accessible by the instances of the owner component and its child components.
258+
259+
``` js
260+
// All 5 types of assets
261+
var MyComponent = Vue.extend({
262+
directives: {
263+
// id : definition pairs same with the global methods
264+
'private-directive': function () {
265+
// ...
266+
}
267+
},
268+
filters: {
269+
// ...
270+
},
271+
components: {
272+
// ...
273+
},
274+
partials: {
275+
// ...
276+
},
277+
effects: {
278+
// ...
279+
}
280+
})
281+
```
282+
283+
Alternatively, you can add private assets to an existing Component constructor using a chaining API similar to the global asset registeration methods:
284+
285+
``` js
286+
MyComponent
287+
.directive('...', {})
288+
.filter('...', function () {})
289+
.component('...', {})
290+
// ...
291+
```
292+
293+
## Content Insertion Points
294+
295+
### Single insertion point
296+
297+
When creating reusable components, we often need to access and reuse the original content in the hosting element, which are not part of the component. Vue.js implements a content insertion mechanism that is compatible with the current Web Components spec draft, using the special `<content>` element to serve as insertion points for the original content. When there is only one `<content>` tag with no attributes, the entire original content will be inserted at its position in the DOM and replaces it. Anything originally inside the `<content>` tags are considered **fallback content**. Fallback content will only be displayed if the hosting element is empty and has no content to be inserted. For example:
298+
299+
Template for `my-component`:
300+
301+
``` html
302+
<h1>This is my component!</h1>
303+
<content>This will only be displayed if no content is inserted</content>
304+
```
305+
306+
Parent markup that uses the component:
307+
308+
``` html
309+
<div v-component="my-component">
310+
<p>This is some original content</p>
311+
<p>This is some more original content</p>
312+
</div>
313+
```
314+
315+
The rendered result will be:
316+
317+
``` html
318+
<div>
319+
<h1>This is my component!</h1>
320+
<p>This is some original content</p>
321+
<p>This is some more original content</p>
322+
</div>
323+
```
324+
325+
### Multiple insertion points and the `select` attribute
326+
327+
`<content>` elements have a special attribute, `select`, which expects a CSS selector. You can have multiple `<content>` insertion points with different `select` attributes, and each of them will be replaced by the elements matching that selector from the original content.
328+
329+
Template for `multi-insertion-component`:
330+
331+
``` html
332+
<content select="p:nth-child(3)"></content>
333+
<content select="p:nth-child(2)"></content>
334+
<content select="p:nth-child(1)"></content>
335+
```
336+
337+
Parent markup:
338+
339+
``` html
340+
<div v-component="multi-insertion-component">
341+
<p>One</p>
342+
<p>Two</p>
343+
<p>Three</p>
344+
</div>
345+
```
346+
347+
The rendered result will be:
348+
349+
``` html
350+
<div>
351+
<p>Three</p>
352+
<p>Two</p>
353+
<p>One</p>
354+
</div>
355+
```
356+
357+
The content insertion mechanism provides fine control over how original content should be manipulated or displayed, making components extremely flexible and composable.
358+
318359
Next: [Building Larger Apps](/guide/application.html).

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /