Ich habe zuvor mit dem ursprünglichen Front-End-Modell, JQuery+Bootstrap, komplizierten DOM-Operationen und umständlichen Aktualisierungsbindung in Kontakt. Nachdem ich mich in Vue engagiert habe, habe ich ein neues Verständnis des Front-End-MVVM-Frameworks. Dieser Artikel basiert auf Webpack+Vue. Da die vorherigen Arbeiten hauptsächlich auf der Entwicklung von Java-Server basierten, war das Verständnis von Front-End-Frameworks und -komponenten nicht ausführlich genug, sodass sie jedes Stück der Nutzung und des Konstruktion von Front-End-Framework aufzeichnet.
Diese Paging-Komponente wird basierend auf der unteren Seite des Bootstrap-databablen entwickelt, und die relevanten Parameter werden benutzerdefinierte Funktionen hinzugefügt.
Das Rendering der endgültigen Verwendung ist wie folgt. Die Daten stammen von CNODEJS [https://cnodejs.org/]
Die Komponente der unteren Seite besteht hauptsächlich aus zwei Teilen: die aktuelle Datenelementnummer links und die Paging -Seitennummer rechts. Der Komponentencode lautet wie folgt:
<TEMPLATE XMLNS: v-on = "http://www.w3.org/1999/xhtml" xmlns: v-Bind = "http://www.w3.org/1999/xhtml"> <div> <div> <div> <select v-on: Änderung: Änderung: Änderung = "WENECHANGE ()" V-model ". in menu" v-bind:value="item">{{item}}</option> </select> Record/page, displaying the {{start}} to {{end}} item records, totaling {{totalSize}} items</div> </div> <div> <ul> <li><a v-on:click="firstClick()" v-bind:class="{ 'disabled': cur == 1}">Home</a></li> <li><a v-on:click="preClick()" v-bind:class="{ 'disabled': cur == 1}">Previous page</a></li> <li><a v-on:click="nextClick()" v-bind:class="{ 'disabled': cur == 1}"> Previous page</a></li> <li v-for="per in pages" v-bind:class="{ 'active': cur == per}"> <a v-on:click="pageClick(per)">{{ per }}</a> </li> <li><a v-on:click="nextClick()" v-bind:class="{ 'disabled': cur == totalPage}">Next page</a></li> <li><a v-on:click="lastClick()" v-bind:class="{ 'disabled': cur == totalPage}">Last page</a></li> <li><a>Total<i>{{totalPage}}</i> pages</a></li> </ul> </div> <div></div> </div></template><script> import Ajax from '../ajax' exportieren Sie Standard {Props: ['Page-Model'], data () {return {// Initial Page CUR: 1, // Anforderungsadresse URL: this.pagemodel.url? this.pagemodel.url: "", // Anforderungsparameter Parameter: this.pagemodel.param? this.pagemodel.param: {}, // Die Anforderungsmethode stellt die Anforderungsmethode ab: this.pagemodel.method? this.pagemodel.Method: 'get', // Die Anzahl der Anzeigen pro Seite wird standardmäßig 10 Teile pro Seite Limit angezeigt: this.pagemodel.menu? this.pagemodel.menu [0]: 10, // Die Basis -Basis -Basis standardt 5 verfolgt: this.pagemodel.PerSize? this.pagemodel.PerSize: 5, // Anzahl der Anzeigen pro Seite Dropdown-Optionen Menü: this.pagemodel.menu? this.pagemodel.menu: [5, 10, 50], // benutzerdefinierte Name der Paginationsparameter PageParamName: this.pagemodel.pageParamName? this.pagemodel.pageParamName: ['Seite', 'limit'], // Die aktuelle Liste zeigt den Datensatz an: 0, // Die aktuelle Liste zeigt den Datensatz an: 0, // Gesamtseiten TotalPage: 0, // Gesamtdatensätze TotalSize: 0, // Die Seitenanforderung gibt Daten zurück: []}, Ready () {) {) this.tata (). }, Methoden: {// Homepage FirstClick: function () {if (this.cur> 1) {this.cur = 1; this.getData (); }}, // letzte Seite LastClick: function () {if (this.cur <this.totalPage) {this.cur = this.totalPage; this.getData (); }}, // vorherige Seite preclick: function () {if (this.cur> 1) {this.cur--; this.getData (); }}, // nächste Seite Nextclick: function () {if (this.cur <this.totalPage) {this.cur ++; this.getData (); }}, // Seitenzahl pageClick: function (data) {if (data! = This.cur) {this.cur = data; this.getData (); }}. if (this.totalSize> = this.limit * this.cur) {this.end = this.limit * this.cur; } else {this.end = this.totalSize; }}, // Paginationsanforderung getData: function () {let _this = this; this.param [this.pageParamname [0]] = this.cur; this.param [this.pageParamname [1]] = this.limit; Ajax ({url: _this.url, methode: _this.method, data: _this.param, radback: function (res) {// return the result dataset thatalist = res.data; // die Gesamtzahl der Records_This.totalsize = 25; _this.totalpage = math.totals / this.totalpage = math.ycl (_this.totaS.totalpage _this.limit); }, // Datensätze pro Seite Pulldown Menuchange: function () {this.getData (); }, GetPage: Funktion (Kurpage, Gesamtpage, Pagenum) {var links, rechte Seite; Curpage = Curpage> 1? Kurpage: 1; Curpage = Curpage> TotalPage? Gesamtseite: Kurpage; TotalPage = Curpage> TotalPage? Kurpage: TotalPage; // links = curpage - math.floor (pagenum / 2); Linkspunkt = links> 1? Linkspunkte: 1; // rightPage = curpage + math.floor (pagenum / 2); rightPage = rightPage> TotalPage? TotalPage: RightPage; var curpagenum = rechtePage - linke 4; // linkspage if (curpagenum <pagenum && links> 1) {linkSpage = links - (pagenum - curpagenum); Linkspunkt = links> 1? Linkspunkte: 1; Curpagenum = rechtePage - linke 1 1; } // die rechte Seite anpassen if (curpagenum <pagenum && rightPage <TotalPage) {rightPage = rightPage + (pagenum - curpagenum); rightPage = rightPage> TotalPage? TotalPage: RightPage; } var arr = []; für (var i = links; i <= rightPage; i ++) {arr.push (i); } return arr; }}, berechnet: {Seiten: function () {return this.getPage (this.cur, this.totalPage, this.PerSize); }}}} </script> <style> ul, li {margin: 0px; Polsterung: 0px; } li {Listenstil: Keine; Anzeige: Inline; } .page-bar li: Erstkind> a {margin-links: 0px} .page-bar a {border: 1px solid #ddd; Textdekoration: Keine; Position: Relativ; float: links; Polsterung: 6px 12px; Rand -Links: -1px; Linienhöhe: 1.42857143; Farbe: #337ab7; Cursor: Zeiger; } .page-bar a: hover {Hintergrundfarbe: #eee; } .page-bar .Active A {color: #fff; Cursor: Standard; Hintergrundfarbe: #337AB7; Grenzfarbe: #337ab7; } .page-bar i {font-style: normal; Farbe: #D44950; Rand: 0px 4px; Schriftgröße: 12px; } .PAGE-BAR .PAGE-CON, PAGE-SIZE {Breite: 50%; Anzeige: Block; Höhe: 30px; float: links; Zeilenhöhe: 30px; } .page-bar .PAGE-CON UL {Float: Right; Padding-Links: 15px; Padding-Right: 15px; Anzeige: Inline-Block; Padding-Links: 0; } .PAGE-Bar .PAGE-Größe Div {padding-links: 15px; Padding-Right: 15px; Schriftgröße: 14px; } a.disabled {color: #777; Hintergrundfarbe: #fff; Grenzfarbe: #ddd; Cursor: nicht verurteilt; } a.disabled: hover {Hintergrundfarbe: #fff; } .clear-both {klare: beides; } SELECT {BORED: Solid 1px #ddd; Aussehen: Keine; -moz-apparance: Keine; -Webkit-Appearanz: Keine; Hintergrund: URL ("../ Assets/Images/Arrow.png") No-Repeat Scroll Right Center Transparent; Padding-Right: 15px; Padding-Links: 15px; Padding-Top: 2px; Padding-Bottom: 2px; } select ::-ms-expand {display: keine; } </style>Module verwenden,
<Semplate> <navbar> </navbar> <div> <tabelle> <Tread> <TR> <Th> Title </th> <Th> Zeit veröffentlichen </th> <Th> Autor </th> <Th> Anzahl der Antworten </th> <Th> Anzahl der Besuche </th> </tr> </tbody> </ttr v-show = "! <td>{{item.title}}</td> <td>{{item.create_at}}</td> <td>{{item.author.loginname}}</td> <td>{{item.reply_count}}</td> <td> {{item.vissit_count}} </td> </tr> <tr> v-show = "tabelEmpty"> <td colspan = "5"> no Matching-Datensatz </td> </tr> </tbody> </table> </div> <page-model = "pagemodel" '. 'https://cnodejs.org/api/v1/topics', Menü: [5, 10, 20]},}}, berechnet: {tabelempy: function () {if (thatatalist) {return false; } else {return true; }}}, Ereignisse: {refresh: function (e) {thataTalist = e; }}}} </script> <style> Körper, Tabelle {Schriftgröße: 12px; } table {table-layout: behoben; leere Zellen: Show; Grenzkollapse: Zusammenbruch; Breite: 100%; Rand: 10px 0; } td {Höhe: 30px; } div.row {margin-links: 15px; Rand-Rechts: 15px; } H1, H2, H3 {Schriftgröße: 12px; Rand: 0; Polsterung: 0; } .table {Border: 1px solide #ddd; Hintergrund: #fff; } .Table thead tr {Hintergrund: #eee; } .table th {Hintergrund-Repeat: repep-x; Höhe: 30px; Text-Align: links; vertikaler Align: Mitte; } .table tr.empty {text-align: center; } .table td, .table th {border: 1px solid #ddd; Polsterung: 0 1EM 0; } .table tr: n-Kind (ungerade) td {Hintergrundfarbe: #f5f5f5; } </style>Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.
Für Tutorials zu Vue.js -Komponenten klicken Sie bitte auf das spezielle Thema VUE.JS -Komponenten -Lern -Tutorial zum Erlernen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.