Merge pull request #33 from vuejs/master

2.0 合并

Author: dingyiming

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/cLvadprL/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/c5g8xnar/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/5hfsajjr/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/y91wy85p/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/7vLv44kh/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/hkrxmp0h/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/23qze30k/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/xkkbfL3L/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/v368d4g3/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/pq22eoj5/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/70yyx8z2/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mwLbw11k/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/examples/select2.md

@@ -6,4 +6,4 @@ order: 8
 
 > 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/j17w6kjh/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/fruqrvdL/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/8rj70kh1/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mhrckqgq/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/aump8a25/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/4dr2fLb7/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/5oyu4c4u/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/3p0j5sgy/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/guide/index.md

@@ -115,7 +115,7 @@ var app3 = new Vue({
 
 Go ahead and enter `app3.seen = false` in the console. You should see the message disappear.
 
-This second example demonstrates that we can bind data to not only text and attributes, but also the **structure** of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply [transition effects](transitions.html) when elements are inserted/updated/removed by Vue.
+This example demonstrates that we can bind data to not only text and attributes, but also the **structure** of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply [transition effects](transitions.html) when elements are inserted/updated/removed by Vue.
 
 There are quite a few other directives, each with its own special functionality. For example, the `v-for` directive can be used for displaying a list of items using the data from an Array:
 
@@ -249,7 +249,8 @@ The component system is another important concept in Vue, because it's an abstra
 In Vue, a component is essentially a Vue instance with pre-defined options. Registering a component in Vue is straightforward:
 
 ``` js
-Vue.component('todo', {
+// Define a new component called todo-item
+Vue.component('todo-item', {
   template: '<li>This is a todo</li>'
 })
 ```
@@ -258,14 +259,21 @@ Now you can compose it in another component's template:
 
 ``` html
 <ul>
-  <todo v-for="todo in todos"></todo>
+  <!--
+  Create an instance of the todo-item component
+  for each todo in a todos array
+  -->
+  <todo-item v-for="todo in todos"></todo-item>
 </ul>
 ```
 
 But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components. Let's modify the component definition to make it accept a [prop](/guide/components.html#Props):
 
 ``` js
-Vue.component('todo', {
+Vue.component('todo-item', {
+  // The todo-item component now accepts a
+  // "prop", which is like a custom attribute.
+  // This prop is called todo.
   props: ['todo'],
   template: '<li>{{ todo.text }}</li>'
 })
@@ -276,7 +284,11 @@ Now we can pass the todo into each repeated component using `v-bind`:
 ``` html
 <div id="app-7">
   <ol>
-    <todo v-for="todo in todos" v-bind:todo="todo"></todo>
+    <!--
+    Now we provide each todo-item with the todo object
+    it's representing, so that its content can be dynamic
+    -->
+    <todo-item v-for="todo in todos" v-bind:todo="todo"></todo-item>
   </ol>
 </div>
 ```
@@ -291,11 +303,11 @@ var app7 = new Vue({
 {% raw %}
 <div id="app-7" class="demo">
   <ol>
-    <todo v-for="todo in todos" v-bind:todo="todo"></todo>
+    <todo-item v-for="todo in todos" v-bind:todo="todo"></todo-item>
   </ol>
 </div>
 <script>
-Vue.component('todo', {
+Vue.component('todo-item', {
   props: ['todo'],
   template: '<li>{{ todo.text }}</li>'
 })
@@ -312,7 +324,7 @@ var app7 = new Vue({
 </script>
 {% endraw %}
 
-This is just a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our `<todo>` component with more complex template and logic without affecting the parent app.
+This is just a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our `<todo-item>` component with more complex template and logic without affecting the parent app.
 
 In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components [later in the guide](/guide/components.html), but here's an (imaginary) example of what an app's template might look like with components:
 

src/guide/installation.md

@@ -2,10 +2,10 @@
 title: Installation
 type: guide
 order: 1
-vue_version: 2.0.0-rc.8
-dev_size: "183.80"
-min_size: "61.54"
-gz_size: "22.53"
+vue_version: 2.0.1
+dev_size: "184.49"
+min_size: "61.72"
+gz_size: "22.58"
 ---
 
 ### Compatibility Note
@@ -30,7 +30,7 @@ Simply download and include with a script tag. `Vue` will be registered as a glo
 
 ### CDN
 
-Recommended: [unpkg](https://unpkg.com/vue), which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at [unpkg.com/vue/](https://unpkg.com/vue/).
+Recommended: [unpkg](https://unpkg.com/vue/dist/vue.js), which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at [unpkg.com/vue/](https://unpkg.com/vue/).
 
 Also available on [jsdelivr](//cdn.jsdelivr.net/vue/{{vue_version}}/vue.js) or [cdnjs](//cdnjs.cloudflare.com/ajax/libs/vue/{{vue_version}}/vue.js), but these two services take some time to sync so the latest release may not be available yet.
 
@@ -47,23 +47,23 @@ $ npm install vue
 
 There are two builds available, the standalone build and the runtime-only build.
 
-- The standalone build includes the compiler and supports the `template` option.
+- The standalone build includes the compiler and supports the `template` option. **It also relies on the presence of browser APIs so you cannot use it for server-side rendering.**
 
 - The runtime-only build does not include the template compiler, and does not support the `template` option. You can only use the `render` option when using the runtime-only build, but it works with single-file components, because single-file components' templates are pre-compiled into `render` functions during the build step. The runtime-only build is roughly 30% lighter-weight than the standalone build, weighing only 16kb min+gzip.
 
-By default, the NPM package exports the standalone build. To use the runtime-only build, add the following alias to your webpack config:
+By default, the NPM package exports the **runtime-only** build. To use the standalone build, add the following alias to your webpack config:
 
 ``` js
 resolve: {
   alias: {
-    vue: 'vue/dist/vue.common.js'
+    vue: 'vue/dist/vue.js'
   }
 }
 ```
 
 For Browserify, you can use [aliasify](https://github.com/benbria/aliasify) to achieve the same.
 
-<p class="tip">Do NOT do `import Vue from 'vue/dist/vue.common.js'` - since some tools or 3rd party libraries may import vue as well, this may cause the app to load both the runtime and standalone builds at the same time and lead to errors.</p>
+<p class="tip">Do NOT do `import Vue from 'vue/dist/vue.js'` - since some tools or 3rd party libraries may import vue as well, this may cause the app to load both the runtime and standalone builds at the same time and lead to errors.</p>
 
 ### CSP environments
 

src/guide/migration.md

@@ -990,7 +990,7 @@ function pluralizeKnife (count) {
   if (count === 0) {
     return 'no knives'
   } else if (count === 1) {
-    return count + 'knife'
+    return '1 knife'
   } else {
     return count + 'knives'
   }

src/guide/single-file-components.md

@@ -49,7 +49,7 @@ After you've taken a day to dive into these resources, we recommend checking out
 
 The template uses [Webpack](https://webpack.github.io/), a module bundler that takes a number of "modules" and then bundle them into your final application. To learn more about Webpack itself, [this video](https://www.youtube.com/watch?v=WQue1AN93YU) offers a good intro. Once you get past the basics, you might also want to check out [this advanced Webpack course on Egghead.io](https://egghead.io/courses/using-webpack-for-production-javascript-applications).
 
-In Webpack, each module can be transformed by a "loader" before included into the bundle, and Vue offers the [vue-loader](https://github.com/vuejs/vue-loader) plugin to take care of translating `.vue` single-file components. The [webpack-simple](https://github.com/vuejs-templates/webpack-simple) template has already set up everything for you, but if you'd like to learn more about how `.vue` components work with Webpack, you can read [the docs for vue-loader](vue-loader.vuejs.org).
+In Webpack, each module can be transformed by a "loader" before included into the bundle, and Vue offers the [vue-loader](https://github.com/vuejs/vue-loader) plugin to take care of translating `.vue` single-file components. The [webpack-simple](https://github.com/vuejs-templates/webpack-simple) template has already set up everything for you, but if you'd like to learn more about how `.vue` components work with Webpack, you can read [the docs for vue-loader](https://vue-loader.vuejs.org).
 
 ### For Advanced Users
 
@@ -99,25 +99,3 @@ NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
 ``` bash
 NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o build.css ] -e main.js | uglifyjs -c -m > build.js
 ```
-
-### Use the Runtime-Only Build
-
-There are two builds available, the standalone build and the runtime-only build.
-
-- The standalone build includes the compiler and supports the `template` option.
-
-- The runtime-only build does not include the template compiler, and does not support the `template` option. You can only use the `render` option when using the runtime-only build, but it works with single-file components, because single-file components' templates are pre-compiled into `render` functions during the build step. The runtime-only build is roughly 30% lighter-weight than the standalone build, weighing only 16kb min+gzip.
-
-By default, the NPM package exports the standalone build. To use the runtime-only build, add the following alias to your webpack config:
-
-``` js
-resolve: {
-  alias: {
-    vue: 'vue/dist/vue.common.js'
-  }
-}
-```
-
-For Browserify, you can use [aliasify](https://github.com/benbria/aliasify) to achieve the same.
-
-<p class="tip">Do NOT do `import Vue from 'vue/dist/vue.common.js'` - since some tools or 3rd party libraries may import vue as well, this may cause the app to load both the runtime and standalone builds at the same time and lead to errors.</p>

src/guide/ssr.md

@@ -206,7 +206,7 @@ server.listen(5000, function (error) {
 })
 ```
 
-And that's it! Here's [the full application](https://github.com/chrisvfritz/vue-ssr-demo-simple), in case you'd like to clone it and experiment further. Once you have it running locally, you can confirm that server-side rendering really is working by right-clickig on the page and selecting `View Page Source` (or similar). You should see this in the body:
+And that's it! Here's [the full application](https://github.com/chrisvfritz/vue-ssr-demo-simple), in case you'd like to clone it and experiment further. Once you have it running locally, you can confirm that server-side rendering really is working by right-clicking on the page and selecting `View Page Source` (or similar). You should see this in the body:
 
 ``` html
 <div id="app" server-rendered="true">You have been here for 0 seconds&period;</div>

src/guide/unit-testing.md

@@ -93,7 +93,7 @@ import MyComponent from './MyComponent.vue'
 
 // helper function that mounts and returns the rendered text
 function getRenderedText (Component, propsData) {
-  const Ctor = Vue.extend(MyComponent)
+  const Ctor = Vue.extend(Component)
   const vm = new Ctor({ propsData }).$mount()
   return vm.$el.textContent
 }

themes/vue/_config.yml

@@ -1,3 +1,3 @@
 google_analytics: UA-46852172-1
 root_domain: vuejs.org
-vue_version: 2.0.0-rc.8
+vue_version: 2.0.1

themes/vue/source/css/_sidebar.styl

@@ -58,7 +58,7 @@
         display none
         padding-left 0
 
-@media screen and (max-width: 720px)
+@media screen and (max-width: 900px)
     .sidebar
         position fixed
         z-index 8

themes/vue/source/css/page.styl

@@ -142,7 +142,7 @@
             bottom 12px
             left 140px
 
-@media screen and (max-width: 720px)
+@media screen and (max-width: 900px)
     #ad
         width 100%
     body
@@ -164,7 +164,7 @@
         padding 1.2em 1em
     .content
         &.with-sidebar
-            margin-left 0
+            margin auto
     .footer
         margin-left 0
         text-align center