add pictures!

Author: yyx990803

source/guide/application.md

@@ -15,11 +15,11 @@ Webpack and Browserify are more than just module bundlers, though. They both pro
 
 In a typical Vue.js project we will be breaking up our code into many small components, and it would be nice to have each component encapsulate its CSS styles, template and JavaScript definition in the same place. As mentioned above, when using Webpack or Browserify, with proper source transforms we can write our components like this:
 
-<img src="/images/vueify.png">
+<img src="/images/vue-component.png">
 
 If you are into pre-processors, you can even do this:
 
-<img src="/images/vueify_with_pre.png">
+<img src="/images/vue-component-with-pre-processors.png">
 
 You can build these single-file Vue components with Webpack + [vue-loader](https://github.com/vuejs/vue-loader) or Browserify + [vueify](https://github.com/vuejs/vueify). It is recommended to use the Webpack setup because Webpack's loader API enables better file dependency tracking and caching if you are using pre-processors.
 

source/guide/index.md

@@ -17,6 +17,8 @@ Even if you are already familiar with some of these terms, it is recommended tha
 
 ## Concepts Overview
 
+![MVVM](/images/mvvm.png)
+
 ### ViewModel
 
 An object that syncs the Model and the View. In Vue.js, every Vue instance is a ViewModel. They are instantiated with the `Vue` constructor or its sub-classes:
@@ -47,14 +49,18 @@ A slightly modified plain JavaScript object.
 vm.$data // The Model
 ```
 
-In Vue.js, models are simply plain JavaScript objects, or **data objects**. You can manipulate their properties and Vue instances that are observing them will be notified of the changes. Vue.js achieves transparent reactivity by converting the properties on data objects into ES5 getter/setters. There's no need for dirty checking, nor do you have to explicitly signal Vue to update the View. Whenever the data changes, the View is updated on the next frame.
+In Vue.js, models are simply plain JavaScript objects, or **data objects**. Once an object is used as data inside a Vue instnace, it becomes **reactive**. You can manipulate their properties and Vue instances that are observing them will be notified of the changes. Vue.js achieves transparent reactivity by converting the properties on data objects into ES5 getter/setters. There's no need for dirty checking, nor do you have to explicitly signal Vue to update the View. Whenever the data changes, the View is updated on the next frame.
 
 Vue instances proxy all properties on data objects they observe. So once an object `{ a: 1 }` has been observed, both `vm.$data.a` and `vm.a` will return the same value, and setting `vm.a = 2` will modify `vm.$data`.
 
 The data objects are mutated in place, so modifying it by reference has the same effects as modifying `vm.$data`. This makes it possible for multiple Vue instances to observe the same piece of data. In larger applications it is also recommended to treat Vue instances as pure views, and externalize the data manipulation logic into a more discrete store layer.
 
 One caveat here is that once the observation has been initiated, Vue.js will not be able to detect newly added or deleted properties. To get around that, observed objects are augmented with `$add`, `$set` and `$delete` methods.
 
+Below is a high-level overview of how reactive updates are implemented in Vue.js:
+
+![Data Observation](/images/data.png)
+
 ### Directives
 
 Prefixed HTML attributes that tell Vue.js to do something about a DOM element.
@@ -107,6 +113,8 @@ Now before the div's textContent is updated, the `message` value will first be p
 
 ### Components
 
+![Component Tree](/images/components.png)
+
 In Vue.js, every component is simply a Vue instance. Components form a nested tree-like hierarchy that represents your application interface. They can be instantiated by a custom constructor returned from `Vue.extend`, but a more declarative approach is registering them with `Vue.component(id, constructor)`. Once registered, they can be declaratively nested in other Vue instance's templates in the form of custom elements:
 
 ``` html

themes/vue/source/css/page.styl

@@ -160,6 +160,8 @@ $header-height = 40px
         padding 12px 24px
         display inline-block
         vertical-align middle
+    img
+        max-width 100%
     span.light
         color $light
     span.info