私は以前に元のフロントエンドモデル、JQuery+Bootstrap、複雑なDOM操作、面倒なアップデートバインディングと連絡を取り合っていました。 VUEに参加した後、フロントエンドMVVMフレームワークを新しい理解しています。この記事は、Webpack+Vueに基づいて構築されています。以前の作業は主にJavaサーバーの開発に基づいていたため、フロントエンドのフレームワークとコンポーネントの理解は十分に詳細ではなかったため、フロントエンドのフレームワークの使用と構造のすべてのビットを記録するために使用されます。
このページングコンポーネントは、Bootstrap DaTatableのボトムページに基づいて開発され、関連するパラメーターにカスタム関数が追加されます。
最終使用レンダリングは次のとおりです。データはcnodejs [https://cnodejs.org/]からのものです。
ボトムページのコンポーネントは、主に2つの部分で構成されています。左側の現在のデータアイテム番号表示と右側のページングページ番号。コンポーネントコードは次のとおりです。
<テンプレートxmlns：v-on = "http://www.w3.org/1999/xhtml" xmlns：v-bind = "http://www.w3.org/1999/xhtml" v-for = "item in menu" v-bind：value = "item"> {{item}} </option> </select>レコード/ページ、{{start}}から{{end}}}アイテムの記録を表示し、合計{{totalsize}}アイテム</div> </div> <> <ur < v-bind：class = "{'disabled'：cur == 1}"> home </a> </li> <li> <a v-on：click = "preclick（）" v-bind：class = "{'disabled'：cur == 1}" 1} ">前のページ</a> </li> <li v-for =" per in pages "v-bind =" {'active'：cur == per} "> <a v-on：click =" pageclick（per） "> {{per}} </a> </li> <li> <a disabled =" "v-bind =" TotalPage} ">次のページ</a> </li> <li> <a v-on：click =" lastclick（） "v-bind：class =" {'disabled'：cur == totalpage} ">最終ページ</li> <li> <a> total <ion </div> </template> <script> '../ajax' export default {props：['page-model']、data（）{return {//初期ページcur：1、// requestアドレスurl：this.pagemodel.url？ this.pagemodel.url： ""、// parameters param：this.pagemodel.param？ this.pagemodel.param：{}、//リクエストメソッドはデフォルトでリクエストメソッドを取得します：this.pagemodel.method？ this.pagemodel.method： 'get'、//ページごとのディスプレイ数は、デフォルトで表示されます。 this.pagemodel.menu [0]：10、//ベースページベースはデフォルトで5 ersize：this.pagemodel.persize？ this.pagemodel.persize：5、//ページごとの表示数ドロップダウンオプションメニュー：this.pagemodel.menu？ this.pagemodel.menu：[5、10、50]、//ページネーションパラメーターのカスタム名pageparamname：this.pagemodel.pageparamname？ this.pageModel.PageParamName：['page'、 'limit']、//現在のリストはレコードを表示します。 }、メソッド：{//ホームページfirstclick：function（）{if（this.cur> 1）{this.cur = 1; this.getData（）; }}、// lastページlastclick：function（）{if（this.cur <this.totalpage）{this.cur = this.totalpage; this.getData（）; }}、//前のページpreclick：function（）{if（this.cur> 1）{this.cur--; this.getData（）; }}、//次のページNextClick：function（）{if（this.cur <this.totalpage）{this.cur ++; this.getData（）; }}、//ページ番号pageclick：function（data）{if（data！= this.cur）{this.cur = data; this.getData（）; }}、//表示されているレコードの数を更新しますpageCon：function（）{this.start =（this.cur -1） * this.limit + 1; if（this.totalsize> = this.limit * this.cur）{this.end = this.limit * this.cur; } else {this.end = this.totalsize; }}、// pagination request getData：function（）{let _this = this; this.param [this.pageparamname [0]] = this.cur; this.param [this.pageparamname [1]] = this.limit; ajax（{url：_this.url、method：_this.method、data：_this.param、callback：function（res）{//結果データセットthis.datalist = res.data; // Records _this.totalsize = 25; _this.totalpage = mathals（_totals）を返す_this.limit）; }、//ページごとのレコードを表示します。 }、getPage：function（curpage、totalpage、pagenum）{var leftpage、rightpage; curpage = curpage> 1？呪い：1; curpage = curpage> totalpage？ TotalPage：curpage; TotalPage = Curpage> TotalPage？呪い：TotalPage; // leftpage = curpage -math.floor（pagenum / 2）; leftpage = leftpage> 1？ leftpage：1; // rightpage = curpage + math.floor（pagenum / 2）; rightpage = rightpage> totalpage？ TotalPage：RightPage; var curpagenum = rightpage -leftpage + 1; // leftpage if（curpagenum <pagenum && leftpage> 1）{leftpage = leftpage-（pagenum -curpagenum）; leftpage = leftpage> 1？ leftpage：1; curpagenum = rightpage -leftpage + 1; } //右側を調整する場合（curpagenum <pagenum && rightpage <totalpage）{rightpage = rightpage +（pagenum -curpagenum）; rightpage = rightpage> totalpage？ TotalPage：RightPage; } var arr = []; for（var i = leftpage; i <= rightpage; i ++）{arr.push（i）; } return arr; }}、Computed：{pages：function（）{return this.getPage（this.cur、this.totalpage、this.persize）; }}}}} </script> <style> ul、li {margin：0px;パディング：0px; } li {list-style：none;表示：インライン; } .page-bar li：first-child> a {margin-left：0px} .page-bar a {border：1px solid #ddd;テキスト装置：なし;位置：相対;フロート：左;パディング：6px 12px;マージン左：-1px;ラインハイト：1.42857143;色：＃337AB7;カーソル：ポインター; } .page-bar a：hover {background-color：#eee; } .page-bar .active a {color：#fff;カーソル：デフォルト;バックグラウンドカラー：＃337AB7;境界線：＃337AB7; } .page-bar i {font-style：normal;色：＃D44950;マージン：0px 4px;フォントサイズ：12px; } .page-bar .page-con、.page-size {width：50％;表示：ブロック;高さ：30px;フロート：左; Line-Height：30px; } .page-bar .page-con ul {float：right;パディング左：15px;パディング右：15px;ディスプレイ：インラインブロック。パディング左：0; } .page-bar .page-size div {padding-left：15px;パディング右：15px;フォントサイズ：14px; } a.disabled {color：＃777;バックグラウンドカラー：#fff;境界線：#ddd;カーソル：禁止されていません。 } a.disabled：hover {background-color：#fff; } .clear-both {clear：blote; } select {border：solid 1px #ddd;外観：なし; -moz-acpearance：none; -webkit-acpearance：none;背景：url（ "../ Assets/Images/Arrow.png"）繰り返しのスクロール右センター透過;パディング右：15px;パディング左：15px;パディングトップ：2px;パディングボトム：2px; } select :: -ms-expand {display：none; } </style>モジュールを使用して、
<テンプレート> navbar> </navbar> <div> <table> <tread> <tr> <th>タイトル</th> <th>著者</th> <th>返信数</th> <th>訪問数</th> <th>訪問数</th> </tr> </tbody> <td> {{item.title}} </td> <td> {{item.create_at}} </td> <td> {{item.author.loginname}} </td> <td> {{item.reply_count}}} </td> <td> {{item.visit_count}} </td> </tr> <tr> v-show = "tabelempty"> <td colspan = "5">マッチングレコードなし</td> </tr </tbody> </table> </table> </div> <pagebar = "pagemodel"> </pagebar> '../components/navbar.vue' pagebarから 'から' Import from '../components/table-pagebar.vue' export default {//これは公式の執筆方法であり、デフォルトのエクスポート、es6コンポーネント：{navbar、pagebar}、data（）{return {allarticle： ""、fagemodel：[]、pararticle： "、fagemodel： 'https://cnodejs.org/api/v1/topics'、メニュー：[5、10、20]}、}}、culted：{tabelEmpty：function（）{if（this.datalist）{return false; } else {return true; }}}、events：{refresh：function（e）{this.datalist = e; }}}} </script> <style>ボディ、テーブル{font-size：12px; } table {table-layout：修正;空セル：show;国境崩壊：崩壊;幅：100％;マージン：10px 0; } td {height：30px; } div.row {マージン左：15px;マージン右：15px; } h1、h2、h3 {font-size：12px;マージン：0;パディング：0; } .table {border：1px solid #ddd;背景：#fff; } .table thead tr {background：#eee; } .table th {background-repeat：Repreat-x;高さ：30px;テキストアライグ：左;垂直アライイン：中央; } .table tr.empty {text-align：center; } .table td、.table th {border：1px solid #ddd;パディング：0 1EM 0; } .table tr：nth-child（odd）td {background-color：＃f5f5f5; } </style>この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
Vue.jsコンポーネントのチュートリアルについては、特別なトピックVue.jsコンポーネント学習チュートリアルをクリックして学習してください。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。