Merge branch 'master' into 2.0-cn

* master:
  fix typos in guide introduction
  update version select
  update deploy URL and CNAME
  update example fiddles
  add vue-router migration guide
  improve Vue.extend API docs (vuejs#422)
  tweak index

# Conflicts:
#	_config.yml
#	src/CNAME
#	src/guide/custom-directive.md
#	src/guide/migration.md
#	themes/vue/layout/index.ejs
#	themes/vue/layout/partials/sidebar.ejs

Author: dingyiming

src/api/index.md

@@ -102,27 +102,26 @@ type: api
 
   Create a "subclass" of the base Vue constructor. The argument should be an object containing component options.
 
-  The special cases to note here are `el` and `data` options - they must be functions when used with `Vue.extend()`.
+  The special case to note here is the `data` option - it must be a function when used with `Vue.extend()`.
 
   ``` html
   <div id="mount-point"></div>
   ```
 
   ``` js
-  // create reusable constructor
+  // create constructor
   var Profile = Vue.extend({
-    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>'
-  })
-  // create an instance of Profile
-  var profile = new Profile({
-    data: {
-      firstName: 'Walter',
-      lastName: 'White',
-      alias: 'Heisenberg'
+    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
+    data: function () {
+      return {
+        firstName: 'Walter',
+        lastName: 'White',
+        alias: 'Heisenberg'
+      }
     }
   })
-  // mount it on an element
-  profile.$mount('#mount-point')
+  // create an instance of Profile and mount it on an element
+  new Profile().$mount('#mount-point')
   ```
 
   Will result in:

src/examples/commits.md

@@ -6,4 +6,4 @@ order: 1
 
 > This example fetches latest Vue.js commits data from GitHub's API and displays them as a list. You can switch between the master and dev branches.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/bqhxz70a/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/cLvadprL/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/examples/elastic-header.md

@@ -4,4 +4,4 @@ type: examples
 order: 7
 ---
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/9j3e7503/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/5hfsajjr/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/examples/firebase.md

@@ -6,4 +6,4 @@ order: 2
 
 > This example uses [Firebase](https://www.firebase.com/) as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using computed properties and triggers CSS transitions when adding/removing items.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/tggfeL33/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/7vLv44kh/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/examples/grid-component.md

@@ -6,4 +6,4 @@ order: 3
 
 > This is an example of creating a reusable grid component and using it with external data.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/b4mx7gd8/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/23qze30k/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/examples/index.md

@@ -6,4 +6,4 @@ order: 0
 
 > Dead simple Markdown editor.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/a4kx9ark/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/v368d4g3/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/examples/modal.md

@@ -6,4 +6,4 @@ order: 6
 
 > Features used: component, prop passing, content insertion, transitions.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/qx3hzgkt/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/70yyx8z2/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/examples/select2.md

@@ -1,9 +1,9 @@
 ---
-title: Custom Directive
+title: Wrapper Component
 type: examples
 order: 8
 ---
 
-> In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom directive.
+> In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/0k1akjq1/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/j17w6kjh/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/examples/svg.md

@@ -6,4 +6,4 @@ order: 5
 
 > This example showcases a combination of custom component, computed property, two-way binding and SVG support.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/g6ehtyLr/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/8rj70kh1/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/examples/todomvc.md

@@ -6,4 +6,4 @@ order: 9
 
 > This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines).
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/uvmgxff1/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/aump8a25/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/examples/tree-view.md

@@ -6,4 +6,4 @@ order: 4
 
 > Example of a simple tree view implementation showcasing recursive usage of components.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/rp2dn0uh/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/5oyu4c4u/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/guide/comparison.md

@@ -1,7 +1,7 @@
 ---
 title: 对比其他框架
 type: guide
-order: 25
+order: 26
 ---
 
 This is definitely the most difficult page in the guide to write, but we do feel it's important. Odds are, you've had problems you tried to solve and you've used another library to solve them. You're here because you want to know if Vue can solve your specific problems better. That's what we hope to answer for you.

src/guide/custom-directive.md

@@ -81,8 +81,8 @@ directives: {
   - **oldValue**: 指令绑定的前一个值, 仅在 `update` 和 `componentUpdated` 钩子中可用。无论值是否改变都可用。
   - **expression**: 绑定值的字符串形式。 例如 `v-my-directive="1 + 1"` ， expression 的值是 `"1 + 1"`。
   - **arg**: 传给指令的参数。例如 `v-my-directive:foo`， arg 的值是 `"foo"`。
-  - **modifiers**: 一个包含编辑器的对象。 例如： `v-my-directive.foo.bar`, 编辑器对象 modifiers的值是 `{ foo: true, bar: true }`.
-- **vnode**: Vue 生成的虚拟节点<!--参考 [VNode API]([!!TODO: Add link to the VNode API doc when it exists]) for full details.-->
+  - **modifiers**: 一个包含编辑器的对象。 例如： `v-my-directive.foo.bar`, 编辑器对象 modifiers的值是 `{ foo: true, bar: true }`。
+- **vnode**: Vue 编译生成的虚拟节点, 参考 [VNode API](/api/#VNode-Interface) 详情。
 - **oldVnode**: 上一个虚拟节点, 仅在 `update` 和 `componentUpdated` 钩子中可用。
 
 <p class="tip">除了 `el` 之外, 其它参数都应该是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 [dataset] 来进行。(https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset).</p>

src/guide/index.md

@@ -298,7 +298,7 @@ Vue.component('todo', {
 var app7 = new Vue({
   el: '#app-7',
   data: {
-  todos: [{ /* ... */}]
+    todos: [/* ... */]
   }
 })
 ```

src/guide/join.md

@@ -1,7 +1,7 @@
 ---
 title: 加入Vue.js社区
 type: guide
-order: 26
+order: 27
 ---
 
 Vue's community is growing incredibly fast and if you're reading this, there's a good chance you're ready to join it. So... welcome!