Merge pull request #31 from vuejs/master

2

Author: dingyiming

_config.yml

@@ -97,7 +97,7 @@ markdown:
 ## Docs: http://zespia.tw/hexo/docs/deployment.html
 deploy:
   type: git
-  repository: git@github.com:vuejs/rc.vuejs.org.git
+  repository: git@github.com:vuejs/vuejs.org.git
 
 feed:
   type: atom

src/CNAME

@@ -1 +1 @@
-rc.vuejs.org
+vuejs.org

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: Comparison with Other Frameworks
 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,7 +81,7 @@ Directive hooks are passed these arguments:
   - **expression**: The expression of the binding as a string. For example in `v-my-directive="1 + 1"`, the expression would be `"1 + 1"`.
   - **arg**: The argument passed to the directive, if any. For example in `v-my-directive:foo`, the arg would be `"foo"`.
   - **modifiers**: An object containing modifiers, if any. For example in `v-my-directive.foo.bar`, the modifiers object would be `{ foo: true, bar: true }`.
-- **vnode**: The virtual node produced by Vue's compiler.<!--See the [VNode API]([!!TODO: Add link to the VNode API doc when it exists]) for full details.-->
+- **vnode**: The virtual node produced by Vue's compiler. See the [VNode API](/api/#VNode-Interface) for full details.
 - **oldVnode**: The previous virtual node, only available in the `update` and `componentUpdated` hooks.
 
 <p class="tip">Apart from `el`, you should treat these arguments as read-only and never modify them. If you need to share information across hooks, it is recommended to do so through element's [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset).</p>

src/guide/index.md

@@ -284,7 +284,7 @@ Now we can pass the todo into each repeated component using `v-bind`:
 var app7 = new Vue({
   el: '#app-7',
   data: {
-  todos: [{ /* ... */}]
+    todos: [/* ... */]
   }
 })
 ```

src/guide/join.md

@@ -1,7 +1,7 @@
 ---
 title: Join the Vue.js Community!
 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!