update api overview

yyx990803 · yyx990803 · commit 52af374da9de · 2015-05-23T16:22:45.000-04:00
diff --git a/source/api/index.md b/source/api/index.md
@@ -1,24 +1,34 @@
-title: "The Vue Constructor"
+title: Overview
 type: api
 order: 1
 ---
 
+## The Vue Constructor
+
 The `Vue` constructor is the core of Vue.js. It is a constructor function that allows you to create Vue instances. Creating a Vue instance is straightforward:
 
 ``` js
 var vm = new Vue({ /* options */ })
 ```
 
-When you instantiate a Vue instance, you need to pass in an option object which can include information about the DOM element, data object, mixin methods, lifecycle callbacks and more. See the full list of [Instantiation Options](/api/options.html).
+When you instantiate a Vue instance, you need to pass in an option object which can include information about the DOM element, data object, mixin methods, lifecycle callbacks and more. See the full list of [Component Options](/api/options.html).
+
+Each Vue instance is essentially a ViewModel (hence the variable name `vm` you will see throughout the docs). It has an associated DOM element `$el`, which is roughly the V in MVVM. It also has an associated JavaScript object `$data`, which corresponds to the M in MVVM. Changing the M results in updates in the V. For two-way bindings, user inputs triggered in the V results in changes in the M. For more details on what properties are available on a Vue instance, check out [Instance Properties](/api/instance-properties.html).
+
+Each Vue instance also has a number of [Instance Methods](/api/instance-methods.html) which cover data observation, event communication and DOM manipulation.
 
-Each Vue instance is essentially a ViewModel (hence the variable name `vm` you will see throughout the docs). It has an associated DOM element `$el`, which is roughly the V in MVVM. It also has an associated JavaScript object `$data`, which corresponds to the M in MVVM. Changing the M results in updates in the V. For two-way bindings, user inputs triggered in the V results in changes in the M. For more details check out [Instance Properties](/api/instance-properties.html).
+The `Vue` constructor itself also exposes the [Global API](/api/global-api.html), which allow you to extend the `Vue` class, configure global settings and register global custom assets such as components, directives, filters and more.
+
+## Initialization
 
 If you provided the `el` option at instantiation, the Vue instance will immediately enter the compilation phase. Otherwise, it will wait until `vm.$mount()` is called before it starts compilation. During the compilation phase, Vue walks through the DOM and collects the directives it runs into, and "links" the data and the DOM with these directives. Once linked, these DOM nodes are now said to be managed by the Vue instance. A DOM node can only be managed by one Vue instance, and should not be compiled more than once.
 
+## Data Proxying
+
 Vue 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 Vue instances as data.
 
 It's also worth noting that data objects do not necessarily belong to a single Vue instance - 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 Vue instance also has a number of [Instance Methods](/api/instance-methods.html) which cover data observation, event communication and DOM manipulation.
+## Components
 
-Finally, the `Vue` constructor itself also exposes the [Global API](/api/global-api.html), which allow you to extend the `Vue` class, configure global settings and register global custom assets such as components, directives, filters and more.
+When building complex UI, we often need to structure our app as a tree of components. Vue.js' component system allows you to do exactly that. The Vue constructor can be extended to define components that encapsulate its own template and data logic, and Vue provides a Web Component like syntax for you to compose your components in the template. For more details, read the [Component System](/guide/components.html) section of the guide.
diff --git a/source/api/options.md b/source/api/options.md
@@ -1,4 +1,4 @@
-title: Options
+title: Component Options
 type: api
 order: 2
 ---

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-title: Options`
	`1`	`+title: Component Options`
`2`	`2`	`type: api`
`3`	`3`	`order: 2`
`4`	`4`	`---`