Skip to content

spelling and grammar fixes #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 17, 2014
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions source/api/directives.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ Apply inline CSS styles to the element.

When there is no argument, Vue.js will use the value to set `el.style.cssText`.

When there is an argument, it will be used as the CSS property to apply. Combined with multiple clause you can set multiple properties together:
When there is an argument, it will be used as the CSS property to apply. Combined with multiple clauses you can set multiple properties together:

**Example:**

Expand Down Expand Up @@ -108,7 +108,7 @@ Conditionally insert / remove the element based on the truthy-ness of the bindin
### v-repeat

- This directive creates child ViewModels.
- This directive requires the value to be an Array.
- This directive requires the value to be an Array or Object.
- This directive can trigger transitions.
- This directive accepts an optional argument.

Expand Down Expand Up @@ -171,7 +171,7 @@ Example inheriting an object:
</div>
```

Example inehriting individual properties (using the same data):
Example inheriting individual properties (using the same data):

```
<div v-with="myName : user.name, myEmail: user.email">
Expand All @@ -182,7 +182,7 @@ Example inehriting individual properties (using the same data):

## Literal Directives

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

### v-component

Expand Down Expand Up @@ -212,7 +212,7 @@ For details, see [the guide](/guide/transitions.html#JavaScript_Functions).

### v-transition

Notify Vue.js to apply transition CSS classes to this element. The transition classes are applied when certain transition-triggering directives modifies the element, or when the ViewModel's DOM manipulation methods are called.
Notify Vue.js to apply transition CSS classes to this element. The transition classes are applied when certain transition-triggering directives modify the element, or when the ViewModel's DOM manipulation methods are called.

For details, see [the guide](/guide/transitions.html#Css_Transitions).

Expand All @@ -224,7 +224,7 @@ For details, see [the guide](/guide/transitions.html#Css_Animations).

### v-pre

Skip compilation for this element and all its children. Skipping large amount of nodes with no directives on them can speed up compilation.
Skip compilation for this element and all its children. Skipping large numbers of nodes with no directives on them can speed up compilation.

### v-cloak

Expand Down
2 changes: 1 addition & 1 deletion source/api/filters.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ Finally, you can use quotes to indicate literal arguments:
- this filter only works in `v-repeat`
- this is a computed filter

Sort `v-repeat`'s displayed result. The `sorKey` argument is a property key on the context ViewModel. The value of that property will be used as the key to sort the Array items with. The optional `reverseKey` argument is also a property key on the context ViewModel, but the value's truthiness will determine whether the result should be reversed.
Sort `v-repeat`'s displayed result. The `sortKey` argument is a property key on the context ViewModel. The value of that property will be used as the key to sort the Array items with. The optional `reverseKey` argument is also a property key on the context ViewModel, but the value's truthiness will determine whether the result should be reversed.

``` html
<ul>
Expand Down
2 changes: 1 addition & 1 deletion source/api/global-methods.md
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ Will result in:

- **callback** `Function`

Vue.js batches view updates and execute them all asynchronously. It uses `requestAnimationFrame` if available and fallsback to `setTimeout(fn, 0)`. This method calls the callback after the next view update, which can be useful when you want to wait until the view has been updated.
Vue.js batches view updates and executes them all asynchronously. It uses `requestAnimationFrame` if available and falls back to `setTimeout(fn, 0)`. This method calls the callback after the next view update, which can be useful when you want to wait until the view has been updated.

### Vue.require( module )

Expand Down
6 changes: 3 additions & 3 deletions source/api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ type: api
order: 1
---

The `Vue` Class is the core of vue.js. It is a constructor that allows you to create ViewModel instances. Creating a ViewModel instance is straightforward:
The `Vue` Class is the core of Vue.js. It is a constructor that allows you to create ViewModel instances. Creating a ViewModel instance is straightforward:

``` js
var vm = new Vue({ /* options */ })
Expand All @@ -15,10 +15,10 @@ During the compilation phase, Vue.js walks through the DOM and compiles the dire

Each ViewModel instance has an associated DOM element `$el`, which is essentially the V in MVVM. It also has an associated JavaScript object `$data`, which is essentially the M in MVVM. Changing the M results in updates in the V. For two-way bindings, inputs in the V results in changes in the M. For more details check out [Instance Properties](/api/instance-properties.html).

ViewModel instances proxies access to their `$data` objects, so if you have `vm.$data.msg` you can also access it as `vm.msg`. This might look a bit magical, but is totally optional. You can stick to `vm.$data.msg` for more explicit data access. However it is still important to notice the difference between `vm` and `vm.$data`, since the former cannot be observed by other ViewModels as data.
ViewModel instances proxy access to their `$data` objects, so if you have `vm.$data.msg` you can also access it as `vm.msg`. This might look a bit magical, but is totally optional. You can stick to `vm.$data.msg` for more explicit data access. However it is still important to notice the difference between `vm` and `vm.$data`, since the former cannot be observed by other ViewModels as data.

It's also worth noting that data objects do not necessarily belong to a single ViewModel - multiple ViewModels can observe the same piece of data, whether directly as `$data` or nested under it. This is useful when multiple components need to react to a shared global state object.

Each ViewModel instance also has a number of [Instance Methods](/api/instance-methods.html) which covers data observation, event communication and dom manipulation.
Each ViewModel instance also has a number of [Instance Methods](/api/instance-methods.html) which cover data observation, event communication and DOM manipulation.

Finally, the `Vue` constructor itself also holds several [Global Methods](/api/global-methods.html), which allow you to extend the `Vue` class, configure global settings and register global custom assets such as components, directives, filters and more.
4 changes: 2 additions & 2 deletions source/api/instance-methods.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,11 +78,11 @@ Attach a one-time only listener for an event.
- **event** `String` *optional*
- **callback** `Function` *optional*

If no arguments are given, stop listening for all events; If only the event is given, remove all callbacks for that event; If both event and callback are given, remove that specific callback only.
If no arguments are given, stop listening for all events; if only the event is given, remove all callbacks for that event; if both event and callback are given, remove that specific callback only.

## DOM Manipulation

> All vm DOM manipulation methods work like their jQuery counterparts - except they also trigger vue.js transitions if there are any declared on vm's `$el`. For more details on transitions see [Adding Transition Effects](/guide/transitions.html).
> All vm DOM manipulation methods work like their jQuery counterparts - except they also trigger Vue.js transitions if there are any declared on vm's `$el`. For more details on transitions see [Adding Transition Effects](/guide/transitions.html).

### vm.$appendTo( element | selector )

Expand Down
4 changes: 2 additions & 2 deletions source/api/instance-properties.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ new Vue({
- **Type:** `Object`
- **Read only**

An object that holds child ViewModels that has `v-ref` registered. For more details see [v-ref](/api/directives.html#v-ref).
An object that holds child ViewModels that have `v-ref` registered. For more details see [v-ref](/api/directives.html#v-ref).

### vm.$index

Expand All @@ -56,7 +56,7 @@ The parent ViewModel, if the current ViewModel has one.
- **Type:** `Object ViewModel`
- **Read only**

The root ViewModel. It the current ViewModel has no parents this value will be itself.
The root ViewModel. If the current ViewModel has no parents this value will be itself.

### vm.$compiler

Expand Down
8 changes: 4 additions & 4 deletions source/api/instantiation-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ vm.a // 3

The object must be JSON-compliant (no circular references). You can use it just like an ordinary object, and it will look exactly the same when serialized with `JSON.stringify`. You can also share it between multiple ViewModels.

<p class="tip">Under the hood, vue.js attaches a hidden property `__emitter__` and recursively converts the object's non-function properties into getters and setters that trigger events when called. Properties with keys that starts with `$` or `_` are skipped.</p>
<p class="tip">Under the hood, Vue.js attaches a hidden property `__emitter__` and recursively converts the object's non-function properties into getters and setters that trigger events when called. Properties with keys that starts with `$` or `_` are skipped.</p>

### methods

Expand Down Expand Up @@ -131,7 +131,7 @@ A string template to be inserted into `vm.$el`. Any existing markup inside `vm.$

If it starts with `#` it will be used as a querySelector and use the selected element's innerHTML and the template string. This allows the use of the common `<script type="x-template">` trick to include templates.

<p class="tip">Vue.js uses DOM-based templating. The compiler walks through DOM elements and looks for directives and creates data bindings. This means all vue.js templates are parsable HTML that can be converted into actual DOM elements by the browser. Vue.js converts string templates into DOM fragments so they can be cloned when creating more ViewModel instances. If you want your templates to be valid HTML, you can configure the directive prefix to start with `data-`.</p>
<p class="tip">Vue.js uses DOM-based templating. The compiler walks through DOM elements and looks for directives and creates data bindings. This means all Vue.js templates are parsable HTML that can be converted into actual DOM elements by the browser. Vue.js converts string templates into DOM fragments so they can be cloned when creating more ViewModel instances. If you want your templates to be valid HTML, you can configure the directive prefix to start with `data-`.</p>

### replace

Expand Down Expand Up @@ -217,7 +217,7 @@ These are private assets that will be available only to this ViewModel and its c

- **Type:** `Object`

An hash of directives to be made available to the ViewModel. For details on how to write a custom directive, see [Writing Custom Directives](/guide/directives.html#Writing_a_Custom_Directive).
A hash of directives to be made available to the ViewModel. For details on how to write a custom directive, see [Writing Custom Directives](/guide/directives.html#Writing_a_Custom_Directive).

### filters

Expand Down Expand Up @@ -263,6 +263,6 @@ This option is useful when you need to manually manage the lifecycle of nested V
- **Type:** `Boolean`
- **Default:** `false`

Whether to trigger `v-model` updates only on `change` event (hit enter or lose focus) or on every `input` event (on every keystroke).
Whether to trigger `v-model` updates only on `change` events (hit enter or lose focus) or on every `input` event (on every keystroke).

**Note:** since 0.10.5 child ViewModels will inherit their parents' `lazy` option if they don't have the option set on themselves.
6 changes: 3 additions & 3 deletions source/guide/application.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Alternatively, [Browserify](http://browserify.org/) is another excellent CommonJ

## Modularization

Component as a built tool not only deals with JavaScript; it can also build CSS, templates and other assets. With builder hooks it can also pre-process files written in non-native formats, e.g. CoffeeScript, SASS and Stylus. Therefore it is possible to deliver highly self-contained components that encapsulates template structure, JavaScript logic and CSS presentation at the same time. A simple example can be found [here](https://github.com/vuejs/vue-component-example/tree/master/src/components/a).
Component as a build tool not only deals with JavaScript; it can also build CSS, templates and other assets. With builder hooks it can also pre-process files written in non-native formats, e.g. CoffeeScript, SASS and Stylus. Therefore it is possible to deliver highly self-contained components that encapsulate template structure, JavaScript logic and CSS presentation at the same time. A simple example can be found [here](https://github.com/vuejs/vue-component-example/tree/master/src/components/a).

Similar modularization can be achieved in Browserify too, with transform plugins such as [partialify](https://github.com/bclinkinbeard/partialify). A simple setup example can be found [here](https://github.com/vuejs/vue-browserify-example).

Expand Down Expand Up @@ -47,11 +47,11 @@ The `home` component will be rendered in place of `v-view`. When `currentView`'s

<p class="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>

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.
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 a plan to provide a vue-router component that integrates with Vue.js for easier routing and deep linking.

## Communication with Server

All Vue.js ViewModels can have their raw `$data` directly serialized with `JSON.stringify()` with no additional effort. You can use any Ajax component you like, for example [SuperAgent](https://github.com/visionmedia/superagent). It also plays nicely with no-backend services such as Firebase. In addition there is plan to provide a vue-resource component that resembles Angular's `$resource`, to make interfacing with a REST API easier.
All Vue.js ViewModels can have their raw `$data` directly serialized with `JSON.stringify()` with no additional effort. You can use any Ajax component you like, for example [SuperAgent](https://github.com/visionmedia/superagent). It also plays nicely with no-backend services such as Firebase. In addition there is a plan to provide a vue-resource component that resembles Angular's `$resource`, to make interfacing with a REST API easier.

## Unit Testing

Expand Down
8 changes: 4 additions & 4 deletions source/guide/composition.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ order: 10

## Registering a Component

Vue.js allows you to treat registered ViewModel constructors as reusable components that is conceptually similar to [Web Components](http://www.w3.org/TR/components-intro/), without requiring any polyfills. To register a component, first create a subclass constructor of Vue using `Vue.extend()`, then use the global `Vue.component()` method to register that constructor:
Vue.js allows you to treat registered ViewModel constructors as reusable components that are conceptually similar to [Web Components](http://www.w3.org/TR/components-intro/), without requiring any polyfills. To register a component, first create a subclass constructor of Vue using `Vue.extend()`, then use the global `Vue.component()` method to register that constructor:

``` js
// Extend Vue to get a reusable constructor
Expand Down Expand Up @@ -44,7 +44,7 @@ If you prefer, components can also be used in the form of a custom element tag:

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.

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.
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. Each is useful in its own right and Vue.js tries to provide both for maximum flexibility.

## Data Inheritance

Expand Down Expand Up @@ -280,7 +280,7 @@ var MyComponent = Vue.extend({
})
```

Alternatively, you can add private assets to an existing Component constructor using a chaining API similar to the global asset registeration methods:
Alternatively, you can add private assets to an existing Component constructor using a chaining API similar to the global asset registration methods:

``` js
MyComponent
Expand All @@ -294,7 +294,7 @@ MyComponent

### Single insertion point

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:
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 is considered **fallback content**. Fallback content will only be displayed if the hosting element is empty and has no content to be inserted. For example:

Template for `my-component`:

Expand Down
Loading