Skip to content

Commit d75a1cc

Browse files
committed
Merge branch '2.0-cn' of github.com:vuefe/vuejs.org into 2.0-cn
2 parents 6df608e + db45ecb commit d75a1cc

File tree

8 files changed

+377
-55
lines changed

8 files changed

+377
-55
lines changed

src/api/index.md

Lines changed: 359 additions & 10 deletions
Large diffs are not rendered by default.

src/guide/comparison.md

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ In React, everything is Just JavaScript, which sounds very simple and elegant -
5050

5151
#### JSX vs Templates
5252

53-
Let's dive into a simple React render function, kindly [provided by Dan Abramov](https://github.com/vuejs/vuejs.org/pull/371):
53+
In React, all components express their UI within render functions using JSX, a declarative XML-like syntax that works within Javascript. Here's an example, [vetted by the React community](https://github.com/vuejs/vuejs.org/pull/371):
5454

5555
``` jsx
5656
render () {
@@ -77,18 +77,6 @@ render () {
7777
}
7878
```
7979

80-
This is an extremely common use case, but using JSX, there are a few problems that may not be immediately obvious:
81-
82-
- __Decisions, Decisions__: Despite the simplicity of the above code, it actually went through a series of iterations until Dan Abramov kindly ended the bikeshedding with a definitive version we could settle on. It's interesting to note though, that none of the other recommended solutions we saw were identical to Dan's. This is because JSX, just like JavaScript, requires frequent compromises between readability and declarativeness that come down to individual judgment calls. These are some of the factors to be considered:
83-
84-
- Not everything is an expression in JavaScript, making some common language features such as if statements a bit awkward to embed within JSX. There are sometimes alternatives which _are_ expressions, such as a ternary in this case, but many consider ternaries to be less readable.
85-
- When nesting JSX within JavaScript within JSX (etc), visual noise is created with curly braces and often parentheses. Different people make different decisions in how they prefer to minimize that noise.
86-
- To address the above two concerns, the simplest option is to do as much as possible outside JSX, then only embed a variable, like `children` in the example above. The downside is that the render function then ceases to be a purely declarative description of the generated view, instead becoming an imperative list of operations with a declarative (but less descriptive) result. Other alternatives include:
87-
- Generating parts of the UI in helper functions, then calling them in the main render function. The downside is that visually parsing a component takes longer, as one has to jump around a lot more.
88-
- Breaking a component out into more, smaller components (e.g. `ListContainer`, `List`, `ListItem`, and `EmptyList`). This has advantages beyond making render functions easier to read as an application grows in complexity. However, if it never grows complex enough to otherwise warrant the split, it's a lot of added boilerplate.
89-
90-
- __Learning Curve__: While JSX looks similar to HTML, it's definitely not and there are edge cases to keep in mind - one being the use of `className` instead of `class`, such as in the example. To get this code reading as nicely as possible, it's also necessary to use ES2015+ language features, which many developers have not mastered yet. Combined, these two caveats significantly limit the pool of people that can contribute to the frontend. You eliminate designers, intermediate JavaScript developers, or even advanced JavaScript developers that aren't yet familiar with the quirks of React's JSX.
91-
9280
In Vue, we also have [render functions](render-function.html) and even [support JSX](render-function.html#JSX), because sometimes it is useful to have the power of a full programming language. Render functions are not recommended for most components however.
9381

9482
Instead, we offer templates as a simpler alternative:
@@ -116,13 +104,13 @@ A few advantages here:
116104

117105
This is not only much easier for the developer that's writing it, but designers and less experienced developers will also find it much easier parsing and contributing code.
118106

119-
It doesn't end there though. By embracing HTML rather than trying to reinvent it, Vue also allows you to use preprocessors such as Pug (formerly known as Jade) in your templates.
107+
It doesn't end there though. By embracing HTML rather than trying to reinvent it within JavaScript, Vue also allows you to use preprocessors such as Pug (formerly known as Jade) in your templates.
120108

121109
The React ecosystem also has [a project](https://wix.github.io/react-templates/) that allows you to write templates, but there are a few disadvantages:
122110

123-
- It's not nearly as feature-rich as Vue's templates
111+
- It's not nearly as feature-rich as Vue's templating system
124112
- It requires separating your HTML from component files
125-
- Because it's a 3rd party library rather than an officially supported first-class citizen, it may or may not be kept up-to-date with React core into the future
113+
- Because it's a 3rd party library rather than officially supported, it may or may not be kept up-to-date with React core into the future
126114

127115
#### Component-Scoped CSS
128116

src/guide/custom-directive.md

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -67,27 +67,6 @@ A directive definition object can provide several hook functions (all optional):
6767
- `componentUpdated`: called after the component has completed an update cycle
6868
- `unbind`: called only once, when the directive is unbound from the element.
6969

70-
For example:
71-
72-
``` js
73-
Vue.directive('demo', function (value) {
74-
console.log(value) // "foo bar baz"
75-
})
76-
```
77-
78-
### Element Directives
79-
80-
In some cases, we may want our directive to be used in the form of a custom element rather than as an attribute. This is very similar to Angular's notion of "E" mode directives. Element directives provide a lighter-weight alternative to full-blown components (which are explained earlier in the guide). You can register a custom element directive like so:
81-
82-
``` js
83-
Vue.elementDirective('my-directive', {
84-
// same API as normal directives
85-
bind: function () {
86-
// manipulate this.el...
87-
}
88-
})
89-
```
90-
9170
We'll explore the arguments passed into these hooks (i.e. `el`, `binding`, `vnode`, and `oldVnode`) in the next section.
9271

9372
## Directive Hook Arguments

src/guide/forms.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -695,3 +695,11 @@ If you want user input to be automatically typecast as a number, you can add the
695695
```
696696

697697
This is often useful, because even with `type="number"`, the value of HTML input elements always returns a string.
698+
699+
### `.trim`
700+
701+
If you want user input to be trimmed automatically, you can add the `trim` modifier to your `v-model` managed inputs:
702+
703+
```html
704+
<input v-model.trim="msg">
705+
```

src/guide/overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -243,4 +243,4 @@ You may have noticed that Vue components are very similar to **Custom Elements**
243243

244244
2. Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication, and dynamic component switching with transition effects.
245245

246-
The component system is the foundation for building large apps with Vue. The Vue ecosystem also provides advanced tooling and officially supported companion libraries that can be combined to create a more framework-like system. The responsibilities of these libraries include [ajax](https://github.com/vuejs/vue-resource), [routing](https://github.com/vuejs/vue-router), [flux-like state management](https://github.com/vuejs/vuex), and [more](https://github.com/vuejs).
246+
The component system is the foundation for building large apps with Vue. The Vue ecosystem also provides advanced tooling and officially supported companion libraries that can be combined to create a more framework-like system. The responsibilities of these libraries include [routing](https://github.com/vuejs/vue-router), [flux-like state management](https://github.com/vuejs/vuex), and [more](https://github.com/vuejs).

src/guide/plugins.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,8 +126,6 @@ webpack plugin.js bundle.js --optimize-minimize
126126

127127
- [vue-router](https://github.com/vuejs/vue-router): The official router for Vue.js. Deeply integrated with Vue.js core to make building Single Page Applications a breeze.
128128

129-
- [vue-resource](https://github.com/vuejs/vue-resource): A plugin that provides services for making web requests and handle responses using a XMLHttpRequest or JSONP.
130-
131129
- [vue-async-data](https://github.com/vuejs/vue-async-data): Async data loading plugin.
132130

133131
- [vue-validator](https://github.com/vuejs/vue-validator): A plugin for form validations.

src/guide/render-function.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -319,8 +319,8 @@ Vue.component('my-component', {
319319
Everything the component needs is passed through `context`, which is an object containing:
320320

321321
- `props`: An object of the provided props
322-
- `children`: A function returning the children
323-
- `slots`: A function returning a slots object
322+
- `children`: An array of the VNode children
323+
- `slots`: A slots object
324324
- `data`: The entire data object passed to the component
325325
- `parent`: A reference to the parent component
326326

@@ -370,7 +370,7 @@ Vue.component('smart-list', {
370370

371371
### `slots` vs `children`
372372

373-
You may wonder why we need both `slots` and `children`. Wouldn't `slots().default` be the same as `children`? In some cases, yes - but what if you have a functional component with the following children?
373+
You may wonder why we need both `slots` and `children`. Wouldn't `slots.default` be the same as `children`? In some cases, yes - but what if you have a functional component with the following children?
374374

375375
``` html
376376
<my-functional-component>
@@ -381,7 +381,7 @@ You may wonder why we need both `slots` and `children`. Wouldn't `slots().defaul
381381
</my-functional-component>
382382
```
383383

384-
For this component, `children()` will give you both paragraphs, `slots().default` will give you only the second, and `slots().foo` will give you only the first. Having both `children` and `slots` therefore allows you to choose whether this component knows about a slot system or perhaps delegates that responsibility to another component by simply passing along `children`.
384+
For this component, `children` will give you both paragraphs, `slots.default` will give you only the second, and `slots.foo` will give you only the first. Having both `children` and `slots` therefore allows you to choose whether this component knows about a slot system or perhaps delegates that responsibility to another component by simply passing along `children`.
385385

386386
## Template Compilation
387387

themes/vue/_config.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
google_analytics: UA-46852172-1
22
root_domain: vuefe.cn
3-
vue_version: 2.0.0-rc.1
3+
vue_version: 2.0.0-rc.3

0 commit comments

Comments
 (0)