Merge pull request volksbright#12 from vuejs/2.0

2.0

Author: dingyiming

src/api/index.md

@@ -251,7 +251,7 @@ type: api
   var MyComponent = Vue.component('my-component')
   ```
 
-- **See also:** [Components](/guide/components.html).
+- **See also:** [Components](/guide/components.html)
 
 <h3 id="Vue-use">Vue.use( plugin )</h3>
 
@@ -262,7 +262,7 @@ type: api
 
   Install a Vue.js plugin. If the plugin is an Object, it must expose an `install` method. If it is a function itself, it will be treated as the install method. The install method will be called with Vue as the argument.
 
-- **See also:** [Plugins](/guide/plugins.html).
+- **See also:** [Plugins](/guide/plugins.html)
 
 <h3 id="Vue-mixin">Vue.mixin( mixin )</h3>
 
@@ -296,7 +296,7 @@ type: api
   })
   ```
 
-- **See also:** [Render Functions](/guide/render-function.html).
+- **See also:** [Render Functions](/guide/render-function.html)
 
 ## Options / Data
 
@@ -338,7 +338,7 @@ type: api
   })
   ```
 
-- **See also:** [Reactivity in Depth](/guide/reactivity.html).
+- **See also:** [Reactivity in Depth](/guide/reactivity.html)
 
 ### props
 
@@ -581,7 +581,7 @@ type: api
 
 - **See also:**
   - [Child-Component-Reference](/guide/components.html#Child-Component-Reference)
-  - !!TODO: [ref](#ref).
+  - [ref](#ref)
 
 ### vm.$isServer
 
@@ -593,8 +593,7 @@ type: api
 
   Whether the current Vue instance is running on the server-side.
 
-- **See also:**
-  - !!TODO: [Server-Side Rendering](/guide/ssr.html).
+- **See also:** [Server-Side Rendering](/guide/ssr.html)
 
 ## Instance Methods / Data
 
@@ -787,7 +786,7 @@ type: api
 
 - **See also:**
   - [Vue.nextTick](#Vue-nextTick)
-  -!!TODO: [Async Update Queue](/guide/reactivity.html#Async-Update-Queue)
+  - [Async Update Queue](/guide/reactivity.html#Async-Update-Queue)
 
 ## Instance Methods / Lifecycle
 
@@ -829,13 +828,13 @@ type: api
 
 - **See also:**
   - [Lifecycle Diagram](/guide/instance.html#Lifecycle-Diagram)
-  - !!TODO: [Server-Side Rendering](/guide/ssr.html)
+  - [Server-Side Rendering](/guide/ssr.html)
 
 <h3 id="vm-forceUpdate">vm.$forceUpdate( )</h3>
 
 - **Usage:**
 
-  The Vue instance will be forced into a “digest cycle”, during which all its watchers are re-evaluated.
+  The Vue instance will be forced the re-render.
 
 <p class="tip">Note: This method have an influence on your application performance degradation. The excessive call is no recommended.</p>
 
@@ -875,7 +874,7 @@ type: api
 
 - **Details:**
 
-  Updates the element's `innerHTML`. The contents are inserted as plain HTML - data bindings are ignored. If you need to reuse template pieces, you should use [functional components](!!TODO).
+  Updates the element's `innerHTML`. The contents are inserted as plain HTML - data bindings are ignored. If you need to reuse template pieces, you should use [functional components](/guide/render-function.html#Functional-Components).
 
   <p class="tip">Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use `v-html` on trusted content and **never** on user-provided content.</p>
 

src/guide/class-and-style.md

@@ -18,7 +18,7 @@ We can pass an object to `v-bind:class` to dynamically toggle classes:
 ``` js
 data: {
   isActive: true,
-  hasEror: false
+  hasError: false
 }
 ```
 

src/guide/comparison.md

@@ -26,23 +26,30 @@ In every real-world scenario that we've tested so far, Vue outperforms React by
 
 #### Render Performance
 
-Here's a simplified way to think about it. In React, let's say the cost of rendering an element is 1 and the cost of an average component is 2. In Vue, the cost of an element would be more like 0.1, but the cost of an average component would be 4, due to the setup required for our reactivity system.
+When rendering UI, manipulating the DOM is typically the most expensive operation and unfortunately, no library can make those raw operations faster. The best we can do is:
 
-In extreme cases, such as using 1 normal component to render each element, Vue will probably be slower. However, both Vue and React offer functional components that would typically be preferred in a situation like this. As of writing, React plans to offer performance improvements for functional components, making them roughly the cost of elements. Vue's functional components already offer that optimization, so that when using functional components, Vue should then perform about 20 times as fast in this scenario, but only 10 times as fast after React optimizes their functional components.
+1. Minimize the number of necessary DOM mutations. Both React and Vue use virtual DOM abstractions to accomplish this and both implementations work about equally well.
+2. Add as little overhead as possible on top of those DOM manipulations. This is an area where Vue and React differ.
+
+In React, let's say the additional overhead of rendering an element is 1 and the overhead of an average component is 2. In Vue, the overhead of an element would be more like 0.1, but the overhead of an average component would be 4, due to the setup required for our reactivity system.
+
+This means that in typical applications, where there are many more elements than components being rendered, Vue will outperform React by a significant margin. To demonstrate this, let's render a list of 10,000 items in a single component. In Chrome 52 on my 2014 Macbook Air, [Vue renders](https://jsfiddle.net/chrisvfritz/859gL422/) in an average of 60ms, while [React renders](https://jsfiddle.net/chrisvfritz/65ojbkab/) in an average of 127ms.
+
+In extreme cases however, such as using 1 normal component to render each element, Vue will usually be slower. When modifying the previous examples accordingly, [Vue renders](https://jsfiddle.net/chrisvfritz/mk8jaqpg/) in ~585ms, while [React renders](https://jsfiddle.net/chrisvfritz/2sx0341o/) in ~157ms! This isn't the end of the story though. Both Vue and React offer functional components, which are preferred in situations like this. Since functional components are closer to the cost of elements, Vue is once again on top, with [~73ms](https://jsfiddle.net/chrisvfritz/413wjqyf/) vs [~144ms](https://jsfiddle.net/chrisvfritz/kss01xg7/) - and this performance boost only required adding a single line for Vue: `functional: true`.
 
 #### Update Performance
 
 In React, you need to implement `shouldComponentUpdate` everywhere and use immutable data structures to achieve fully optimized re-renders. In Vue, a component's dependencies are automatically tracked so that it only updates when one of those dependencies change. The only further optimization that sometimes can be helpful in Vue is adding a `key` attribute to items in long lists.
 
-This means updates in unoptimized Vue will be much faster than unoptimized React and actually, due to the improved render performance in Vue, even optimized React will usually be slower than Vue is out-of-the-box.
+This means updates in unoptimized Vue will be much faster than unoptimized React and actually, due to the improved render performance in Vue, even fully-optimized React will usually be slower than Vue is out-of-the-box.
 
 #### In Development
 
-Obviously, performance in production is the most important and that's what we've been discussing so far. Performance in development still matters though. Both Vue and React remain fast enough in development for most normal applications.
+Obviously, performance in production is the most important and that's what we've been discussing so far. Performance in development still matters though. The good news is that both Vue and React remain fast enough in development for most normal applications.
 
-However, if you're prototyping any high-performance data visualizations or animations, you may find it useful to know that in scenarios where Vue can't handle more than 20 frames per second in development, we've seen React slow down to 2 frames per second.
+However, if you're prototyping any high-performance data visualizations or animations, you may find it useful to know that in scenarios where Vue can't handle more than 10 frames per second in development, we've seen React slow down to about 1 frame per second.
 
-This is due to React's many heavy invariant checks, which help it provide many excellent warnings and error messages. We agree that these are important in Vue, but have also kept an eye on performance while we implement these checks.
+This is due to React's many heavy invariant checks, which help it to provide many excellent warnings and error messages. We agree that these are important in Vue, but have tried to keep a closer eye on performance while we implement these checks.
 
 ### HTML & CSS
 
@@ -140,7 +147,7 @@ For large applications, both Vue and React offer robust routing solutions. The R
 
 Another important difference between these offerings is that Vue's companion libraries for state management and routing (among [other concerns](https://github.com/vuejs)) are all officially supported and kept up-to-date with the core library. React instead chooses to leave these concerns to the community, creating a more fragmented ecosystem.
 
-Finally, Vue offers a [CLI project generator](https://github.com/vuejs/vue-cli) that makes it trivially easy to start a new project using your choice of build system, including [Webpack](github.com/vuejs-templates/webpack), [Browserify](github.com/vuejs-templates/browserify), or even [no build system](https://github.com/vuejs-templates/simple). React is also making strides in this area with [create-react-app](https://github.com/facebookincubator/create-react-app), but it currently has a few limitations:
+Finally, Vue offers a [CLI project generator](https://github.com/vuejs/vue-cli) that makes it trivially easy to start a new project using your choice of build system, including [Webpack](https://github.com/vuejs-templates/webpack), [Browserify](https://github.com/vuejs-templates/browserify), or even [no build system](https://github.com/vuejs-templates/simple). React is also making strides in this area with [create-react-app](https://github.com/facebookincubator/create-react-app), but it currently has a few limitations:
 
 - It does not allow any configuration during project generation, while Vue's project templates allow Yeoman-like customization.
 - It only offers a single template that assumes you're building a single-page application, while Vue offers a wide variety of templates for various purposes and build systems.

src/guide/components.md

@@ -640,7 +640,7 @@ Let's see it in action:
     v-model="message"
   ></my-input>
 </div>
-````
+```
 
 ``` js
 Vue.component('my-input', {
@@ -1103,9 +1103,9 @@ The factory function receives a `resolve` callback, which should be called when
 
 ``` js
 Vue.component('async-webpack-example', function (resolve) {
-  // this special require syntax will instruct webpack to
+  // This special require syntax will instruct Webpack to
   // automatically split your built code into bundles which
-  // are automatically loaded over ajax requests.
+  // are loaded over Ajax requests.
   require(['./my-async-component'], resolve)
 })
 ```

src/guide/forms.md

@@ -8,6 +8,8 @@ order: 10
 
 You can use the `v-model` directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, `v-model` is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.
 
+<p class="tip">`v-model` doesn't care about the initial value provided to an input or a textarea. It will always treat the Vue instance data as the source of truth.</p>
+
 ### Text
 
 ``` html
@@ -55,6 +57,11 @@ new Vue({
 </script>
 {% endraw %}
 
+
+{% raw %}
+<p class="tip">Interpolation on textareas (<code>&lt;textarea&gt;{{text}}&lt;/textarea&gt;</code>) won't work. Use <code>v-model</code> instead.</p>
+{% endraw %}
+
 ### Checkbox
 
 Single checkbox, boolean value:

src/guide/installation.md

@@ -54,9 +54,8 @@ Vue.js provides an [official CLI](https://github.com/vuejs/vue-cli) for quickly
 ``` bash
 # install vue-cli
 $ npm install --global vue-cli
-# create a new project using the "webpack" boilerplate
-# !!TODO: THIS TEMPLATE DOES NOT EXIST YET
-$ vue init webpack-2.0 my-project
+# create a new project using the "webpack" template
+$ vue init webpack my-project
 # install dependencies and go!
 $ cd my-project
 $ npm install