docs: improve basic and filter Hacker News example and preview

PeachScript · PeachScript · commit 90b8fb9bfbd4 · 2018-10-25T18:02:30.000+08:00
diff --git a/docs/README.md b/docs/README.md
@@ -10,5 +10,5 @@ features:
   details: Support top and bottom directions currently, adapt to more different scenes
 - title: Result display
   details: Configurable load result display, for example no more data, no results and etc
-previewLink: //jsfiddle.net/PeachScript/zqb73oLv/embedded/result/
+previewLink: //jsfiddle.net/PeachScript/a4Lxbf9w/embedded/result/
 ---
diff --git a/docs/guide/README.md b/docs/guide/README.md
@@ -1,13 +1,13 @@
 ---
-previewLink: //jsfiddle.net/PeachScript/zqb73oLv/embedded/result/
+previewLink: //jsfiddle.net/PeachScript/a4Lxbf9w/embedded/result/
 ---
 # Guide
 
 ## Installation
 
 ### NPM
 
-If you are building big application now, recommend you use the way.
+If you are building large application now, recommend you use the way.
 
 ``` bash
 npm install vue-infinite-loading -S
@@ -22,7 +22,7 @@ After you imported this plugin through `script` tag, it will register `InfiniteL
 You can import this plugin from [unpkg](https://unpkg.com):
 
 ``` html
-<script src="https://unpkg.com/vue-infinite-loading@2.3.5/dist/vue-infinite-loading.js"></script>
+<script src="https://unpkg.com/vue-infinite-loading@^2/dist/vue-infinite-loading.js"></script>
 ```
 
 #### Manual
diff --git a/docs/guide/start-with-hn.md b/docs/guide/start-with-hn.md
@@ -1,5 +1,5 @@
 ---
-previewLink: //jsfiddle.net/PeachScript/zqb73oLv/embedded/result/
+previewLink: //jsfiddle.net/PeachScript/a4Lxbf9w/embedded/result/
 ---
 
 # Start With Hacker News
@@ -8,12 +8,12 @@ As the first step in learning this plugin, we will create a infinite scroll vers
 
 Firstly, we need to write template, it similar to this (ommited unimportant code):
 
-``` html
+``` html {9}
 <header>
   <!-- Hacker News header -->
 </header>
 
-<div v-for="(item, key) in list">
+<div v-for="(item, $index) in list" :key="$index">
   <!-- Hacker News item loop -->
 </div>
 
@@ -45,7 +45,7 @@ export default {
       }).then(({ data }) => {
         if (data.hits.length) {
           this.page += 1;
-          this.list = this.list.concat(data.hits);
+          this.list.push(...data.hits);
           $state.loaded();
         } else {
           $state.complete();
diff --git a/docs/guide/use-with-filter-or-tabs.md b/docs/guide/use-with-filter-or-tabs.md
@@ -1,20 +1,20 @@
 ---
-previewLink: //jsfiddle.net/PeachScript/bv9Lgj2k/embedded/result/
+previewLink: //jsfiddle.net/PeachScript/w197rfy0/embedded/result/
 ---
 
 # Use With Filter/Tabs
 
-The loading process is exactly same as the previous example, the key point is how to reset the component when we changing filter or tabs. The component will reset itself whenever the `identifier` is changed, sounds ease, let's do it!
+The loading process is exactly same as the previous example, the key point is how to reset the component when we changing filter or tabs. In fact, this component will reset itself whenever the `identifier` is changed, sounds ease, let's do it!
 
-``` html
+``` html {12}
 <header>
   <!-- Hacker News header -->
   <select v-model="newsType" @change="changeType">
     <!-- Type options -->
   </select>
 </header>
 
-<div v-for="(item, key) in list">
+<div v-for="(item, $index) in list" :key="$index">
   <!-- Hacker News item loop -->
 </div>
 
@@ -23,10 +23,10 @@ The loading process is exactly same as the previous example, the key point is ho
 
 In the template, we add a `select` element and listen it's `change` event, for `InfiniteLoading` component, we add an `identifier` property.
 
-``` js
+``` js {10,11,19,31,32,33,34,35}
 import axios from 'axios';
 
-const api = '//hn.algolia.com/api/v1/search_by_date?tags=story';
+const api = '//hn.algolia.com/api/v1/search_by_date';
 
 export default {
   data() {
@@ -47,7 +47,7 @@ export default {
       }).then(({ data }) => {
         if (data.hits.length) {
           this.page += 1;
-          this.list = this.list.concat(data.hits);
+          this.list.push(...data.hits);
           $state.loaded();
         } else {
           $state.complete();
diff --git a/docs/zh/README.md b/docs/zh/README.md
@@ -10,5 +10,5 @@ features:
   details: 目前支持向上和向下两种加载方式，可适应于更多的应用场景
 - title: 结果展示
   details: 可配置的加载结果展示，比如没有更多数据、没有任何数据等等
-previewLink: //jsfiddle.net/PeachScript/zqb73oLv/embedded/result/
+previewLink: //jsfiddle.net/PeachScript/a4Lxbf9w/embedded/result/
 ---
diff --git a/docs/zh/guide/README.md b/docs/zh/guide/README.md
@@ -1,5 +1,5 @@
 ---
-previewLink: //jsfiddle.net/PeachScript/zqb73oLv/embedded/result/
+previewLink: //jsfiddle.net/PeachScript/a4Lxbf9w/embedded/result/
 ---
 # 指南
 
@@ -22,7 +22,7 @@ npm install vue-infinite-loading -S
 你可以借助 [unpkg](https://unpkg.com) 引入此插件：
 
 ``` html
-<script src="https://unpkg.com/vue-infinite-loading@2.3.5/dist/vue-infinite-loading.js"></script>
+<script src="https://unpkg.com/vue-infinite-loading@^2/dist/vue-infinite-loading.js"></script>
 ```
 
 #### 手动引入
diff --git a/docs/zh/guide/start-with-hn.md b/docs/zh/guide/start-with-hn.md
@@ -1,5 +1,5 @@
 ---
-previewLink: //jsfiddle.net/PeachScript/zqb73oLv/embedded/result/
+previewLink: //jsfiddle.net/PeachScript/a4Lxbf9w/embedded/result/
 ---
 
 # 从 Hacker News 开始
@@ -8,12 +8,12 @@ previewLink: //jsfiddle.net/PeachScript/zqb73oLv/embedded/result/
 
 首先，我们需要编写模板，内容大概如下（已省略不重要的代码）：
 
-``` html
+``` html {9}
 <header>
   <!-- Hacker News header -->
 </header>
 
-<div v-for="(item, key) in list">
+<div v-for="(item, $index) in list" :key="$index">
   <!-- Hacker News item loop -->
 </div>
 
@@ -45,7 +45,7 @@ export default {
       }).then(({ data }) => {
         if (data.hits.length) {
           this.page += 1;
-          this.list = this.list.concat(data.hits);
+          this.list.push(...data.hits);
           $state.loaded();
         } else {
           $state.complete();
diff --git a/docs/zh/guide/use-with-filter-or-tabs.md b/docs/zh/guide/use-with-filter-or-tabs.md
@@ -1,20 +1,20 @@
 ---
-previewLink: //jsfiddle.net/PeachScript/bv9Lgj2k/embedded/result/
+previewLink: //jsfiddle.net/PeachScript/w197rfy0/embedded/result/
 ---
 
 # 与过滤器和选项卡一起使用
 
-加载数据的过程与上一个案例完全一致，关键在于当我们改变过滤器选项或者切换选项卡的时候应该如何重设组件。每当 `identifier` 属性发生变化的时候，该组件就会自行重设，所以一切看起来都很容易，我们开始吧！
+加载数据的过程与上一个案例完全一致，关键在于当我们改变过滤器选项或者切换选项卡的时候应该如何重设组件。实际上，每当 `identifier` 属性发生变化的时候，该组件就会自行重设，所以一切看起来都很容易，我们开始吧！
 
-``` html
+``` html {12}
 <header>
   <!-- Hacker News header -->
   <select v-model="newsType" @change="changeType">
     <!-- Type options -->
   </select>
 </header>
 
-<div v-for="(item, key) in list">
+<div v-for="(item, $index) in list" :key="$index">
   <!-- Hacker News item loop -->
 </div>
 
@@ -23,10 +23,10 @@ previewLink: //jsfiddle.net/PeachScript/bv9Lgj2k/embedded/result/
 
 在模板中，我们添加了一个 `select` 元素并监听它的 `change` 事件，我们还为 `InfiniteLoading` 组件添加了一个 `identifier` 属性。
 
-``` js
+``` js {10,11,19,31,32,33,34,35}
 import axios from 'axios';
 
-const api = '//hn.algolia.com/api/v1/search_by_date?tags=story';
+const api = '//hn.algolia.com/api/v1/search_by_date';
 
 export default {
   data() {
@@ -47,7 +47,7 @@ export default {
       }).then(({ data }) => {
         if (data.hits.length) {
           this.page += 1;
-          this.list = this.list.concat(data.hits);
+          this.list.push(...data.hits);
           $state.loaded();
         } else {
           $state.complete();
@@ -65,4 +65,4 @@ export default {
 
 在这段脚本中，我们为 `select` 和 `identifier` 属性设定了默认值，然后在 API 请求逻辑中添加了类型参数。我们还创建了一个 `changeType` 方法用于重设列表数据和加载组件，请注意，我们必须在清空列表之后再改变 `identifier` 属性，否则组件将可能无法在重设之后立即触发 `infinite` 事件。
 
-就这样，你已经搞定啦！
+恭喜，你已经搞定了！
