序文
前の2つの章の作業では、ホームページのレンダリングを正常に実装しましたが、データの1ページをレンダリングするだけでした。より多くのデータをレンダリングする必要があるかもしれないので、現時点では、ページングを検討する必要があります。
非同期負荷など、ページングには多くの方法があります。ただし、フロントエンドテンプレートフレームワークを使用していない友人の場合、開始するとすぐにこの方法を使用することは少し難しいかもしれません。したがって、章のページングの実装は、通常のリンクページングに基づいています。
フロントエンドフレームワークを使用した経験が増えた後、より豊富なページネーション方法を使用できます。
実際、私たちが自分でページングコンポーネントを構築することは不可能ではありません。モバイル側では、自分のコードで実装しています。ただし、ここでお勧めしたいのは、レイアウトページプラグインを使用することです。公式Webサイトは（http://laypage.layui.com/）です。
ページングルール開発
まず、インターフェイスの説明を見てみましょう
これがGETインターフェイスです。したがって、上の図に示すように、要求する正しい方法は、インターフェイスのURL後にパラメーターを直接追加することです。
http://cnodejs.org/api/v1/topics?page=11
OK、URLアドレスは//xxx/index.shtml？1にすることができます。他のパラメーターを使用する予定はないため、ページネーションを完了するだけです。したがって、その後、ページネーションIDを直接追加してから、関数を介してURL内のIDを取得してインターフェイスに追加して、ニーズを実現できるようにできます。
実装するコードを作成してください！
URLでIDを取得します
上で考えたように、URLアドレスに追加するIDを正しく取得できる関数が必要です。
関数geturlid（）{var host = window.location.href; var id = host.substring（host.indexof（ "？"）+1、host.length）; IDを返す;}上記のコードに示されているように、この関数メソッドを介して、URLの後に追加したIDを取得してテストできます。
$（function（）{var id = geturlid（）; console.log（id）; var url = "http://cnodejs.org/api/v1/topics"; getjson（url、pushdom）;}）;下の図に示すように：
IDを介して異なるデータを取得します
$（function（）{var id = geturlid（）; var url = "http://cnodejs.org/api/v1/topics?page="+ d; getjson（url、pushdom）;}）;上記のように、異なるURLに従って異なるデータを取得できます。
レイアウトを使用してページネーションを実装します
まず第一に、もちろん、ファイルを参照することです。
<スクリプトsrc = "res/js/laypage/laypage.js"> </script>
HTMLの適切な部分で、次のようにページングコンポーネントにボックスを追加します。
<div> </div>
次に、公式Webサイトにコードをコピーします。適切に変更すると、コードは次のとおりです
$（function（）{var id = geturlid（）; var url = "http://cnodejs.org/api/v1/topics?page="+"+thed; getjson（url、pushdom）; layout（{cont：$（ "。ページ"）、ページ：100、curr：id、jums（e、first） '？'+e.curr;最終効果を以下の図に示します。
まとめ
この章では、私たちのコンテンツは実際にはVueとはほとんど関係がありません。ただし、どのコンテンツが使用されていても、最終的にはプロジェクトの完了を目的としています。すでに開発されたプラグインを使用すると、効率を大幅に向上させることができます。
付録
VUE公式ウェブサイト
cnodejs APIの詳細
この一連のチュートリアルのソースコードをダウンロードします
VUEJS実践的なチュートリアルの第1章、基本の構築とリストのレンダリング
VUEJS実践チュートリアル第2章、エラーを修正し、時間を美しくする
VUEJS実践チュートリアル第3章、レイアウトプラグインを使用してページネーションを実現
この記事はもともとFungleoによって書かれました
最初のリリースアドレス：http：//blog.csdn.net/fungleo/article/details/51649074
この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。