Saya telah melakukan kontak dengan model front-end asli sebelumnya, jQuery+bootstrap, operasi DOM yang rumit, dan ikatan pembaruan yang rumit. Setelah terlibat dalam Vue, saya memiliki pemahaman baru tentang kerangka kerja MVVM front-end. Artikel ini dibangun di webpack+vue. Karena pekerjaan sebelumnya terutama didasarkan pada pengembangan server Java, pemahaman kerangka kerja front-end dan komponen tidak cukup mendalam, sehingga digunakan untuk merekam setiap bit penggunaan dan konstruksi kerangka kerja front-end.
Komponen paging ini dikembangkan berdasarkan halaman bawah bootstrap-datatable, dan fungsi khusus ditambahkan ke parameter yang relevan.
Render penggunaan akhir adalah sebagai berikut, data berasal dari CNodeJS [https://cnodejs.org/]
Komponen halaman bawah terutama terdiri dari dua bagian: Tampilan nomor item data saat ini di sebelah kiri dan nomor halaman paging di sebelah kanan. Kode komponen adalah sebagai berikut:
<template xmlns: v-on = "http://www.w3.org/1999/xhtml" xmlns: v-bind = "http://www.w3.org/199/xhtml"> <v> <Div> <Div> <splies v-on: "vouch =" "vouch"> <v> <Div> <v div> <SELECT v-On v-for = "item di menu" v-bind: value = "item"> {{item}} </pection> </tect> record/halaman, menampilkan catatan {{{{totalsize} {end {end {end {end {{{A end {A end {{A end {{A end {{a {a {a {a {{a. 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} "> Halaman sebelumnya </a> </li> <li v-for =" per halaman "v-bind: class =" {'aktif': cur == per} "> <a v-on: click =" pageclick (per) "> {{per}} </a> </li> <li> <li> <a v-on: click =" per}} </a> </li> <li> <li> <a v-on: click = "per}} </a> </li> <li> <li> <a v-on: click =" next {{per} "v TotalPage} "> Halaman berikutnya </a> </li> <li> <a v-on: click =" lastClick () "v-bind: class =" {'disabled': cur == totalpage} "> halaman terakhir </a> </li> <li> <a> <i> {{totalpage}} </i> <a> <a> <i> <i> {{{totalpage}} </i> <a> <a> <i> <i> {{{{totalpage}} </i> <a> <a> <i> <i> {{totalpage}} </i> <a> <a> <a> <i> {{{{{{{{{totalpage}} </i> <Div> </div> </div> </lemplate> <script> Impor Ajax dari '../Ajax' Ekspor Default {props: ['Page-Model'], data () {return {// Cur halaman awal: 1, // permintaan alamat URL: this.pagemodel.url? this.pagemodel.url: "", // permintaan parameter parameter: this.pagemodel.param? this.pagemodel.param: {}, // metode permintaan default untuk mendapatkan metode permintaan: this.pagemodel.method? this.pagemodel.method: 'get', // Jumlah tampilan per halaman ditampilkan dengan default 10 buah per halaman batas: this.pagemodel.menu? this.pagemodel.menu [0]: 10, // Default Halaman Basis Basis menjadi 5 Persize: this.pagemodel.persize? this.pagemodel.persize: 5, // Jumlah tampilan per halaman opsi tarik-turun: this.pagemodel.menu? this.pagemodel.menu: [5, 10, 50], // Nama khusus parameter pagination pageparamname: this.pagemodel.pageparamname? this.pagemodel.pageparamname: ['page', 'limit'], // Daftar saat ini menampilkan rekaman Mulai: 0, // Daftar saat ini menampilkan akhir catatan: 0, // Total halaman TotalPage: 0, // Total Records. }, Metode: {// Halaman Beranda FirstClick: function () {if (this.cur> 1) {this.cur = 1; this.getData (); }}, // halaman terakhir lastclick: function () {if (this.cur <this.totalpage) {this.cur = this.totalPage; this.getData (); }}, // halaman sebelumnya preclick: function () {if (this.cur> 1) {this.cur--; this.getData (); }}, // halaman berikutnya nextClick: function () {if (this.cur <this.totalpage) {this.cur ++; this.getData (); }}, // Nomor halaman PageClick: function (data) {if (data! = This.cur) {this.cur = data; this.getData (); }}, // Segarkan jumlah catatan yang ditampilkan RefreshPageCon: 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; }}, // permintaan pagination getData: function () {let _this = this; this.param [this.pageParamname [0]] = this.cur; this.param [this.pageParamname [1]] = this.limit; AJAX ({url: _this.url, metode: _this.method, data: _this.param, callback: function (res) {// kembalikan data hasil this.datalist = res.data; // kembalikan jumlah total dari catatan_totals. _THIS.LIMIT); }, // Tampilkan catatan per halaman menukar menuChange: function () {this.getData (); }, getPage: function (Curpage, TotalPage, Pagenum) {var LeftPage, RightPage; Curpage = Curpage> 1? Curpage: 1; Curpage = Curpage> TotalPage? TotalPage: Curpage; TotalPage = Curpage> TotalPage? Curpage: 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; } // Sesuaikan sisi kanan if (curpagenum <pagenum && rightpage <totalpage) {rightPage = rightPage + (pagenum - curpagenum); RightPage = RightPage> TotalPage? TotalPage: RightPage; } var arr = []; untuk (var i = leftpage; i <= rightpage; i ++) {arr.push (i); } return arr; }}, dihitung: {pages: function () {return this.getPage (this.cur, this.totalpage, this.persize); }}}} </script> <tyle> ul, li {margin: 0px; padding: 0px; } li {List-style: none; Tampilan: inline; } .page-bar li: First-Child> a {margin-left: 0px} .page-bar a {border: 1px solid #ddd; Dekorasi Teks: Tidak Ada; Posisi: kerabat; float: kiri; padding: 6px 12px; margin -kiri: -1px; Line-Height: 1.42857143; Warna: #337AB7; kursor: pointer; } .page-bar a: hover {latar belakang-warna: #eee; } .page-bar .active a {color: #fff; kursor: default; Latar Belakang-Color: #337AB7; Border-color: #337AB7; } .page-bar i {font-style: normal; Warna: #D44950; margin: 0px 4px; font-size: 12px; } .page-bar .page-con, .page-size {width: 50%; Tampilan: Blok; Tinggi: 30px; float: kiri; Line-Height: 30px; } .page-bar .page-con ul {float: right; Padding-left: 15px; Padding-Right: 15px; Tampilan: blok inline; Padding-left: 0; } .page-bar .page-size div {padding-left: 15px; Padding-Right: 15px; Ukuran font: 14px; } a.disabled {color: #777; Latar Belakang-Color: #FFF; Border-color: #ddd; kursor: tidak diizinkan; } a.disabled: hover {background-color: #fff; } .clear-baik {clear: keduanya; } SELECT {Border: Solid 1px #DDD; Penampilan: Tidak Ada; -Moz-AMPANANCE: tidak ada; -webkit-kemean: tidak ada; Latar belakang: url ("../ aset/gambar/panah.png") no-repeat scroll right center transparan; Padding-Right: 15px; Padding-left: 15px; Padding-top: 2px; padding-bottom: 2px; } SELECT ::-MS-expand {display: none; } </style>Gunakan modul,
<emplate> <AvBar> </navbar> <div> <ablead> <tread> <tr> <t th> </t> <t th> waktu publish </th> <th> penulis </th> <th> Jumlah balasan </t> <th> Jumlah kunjungan </th "</tr> </tbody> <ttr>"! <td> {{item.title}} </td> <td> {{{item.create_at}} </td> <td> {{{item.author.loginname}} </td> <td> {{{{{{{{{{{{{{{{{{{{{{{{reply}} </td> </td> </td> </td> </td> </td> TD </td> </tr> <tr> v-show = "Tabelempty"> <td colspan = "5"> Tidak ada catatan yang cocok </td> </tr> </tbody> </div> <pagebar: page-page-navel = "PAGLATE </Table” dari PageBar: PageBar: PageBar: PAGLEBAR = "PAGLEBAR> </TABLEBAR> </TABLEBAR> '../Components/navbar.vue' impor pagebar dari '../components/table-pagebar.vue' ekspor default {// Ini adalah metode penulisan resmi, ekspor default, komponen ES6: {navbar, pageBar}, data () {return {allarticle: "", daterbar: pageBar}, data () {return {allarticle: "", datbar: pageBar}, data () {return {allarticle: "" 'https://cnodejs.org/api/v1/topics', menu: [5, 10, 20]},}}, dihitung: {tabelempty: function () {if (this.datalist) {return false; } else {return true; }}}, peristiwa: {refresh: function (e) {this.datalist = e; }}}} </script> <tyle> body, tabel {font-size: 12px; } tabel {tabel-layout: diperbaiki; sel kosong: tunjukkan; Border-Collapse: runtuh; Lebar: 100%; Margin: 10px 0; } td {height: 30px; } div.row {margin-left: 15px; margin-kanan: 15px; } h1, h2, h3 {font-size: 12px; Margin: 0; Padding: 0; } .table {border: 1px solid #ddd; Latar belakang: #FFF; } .table thead tr {latar belakang: #eee; } .table th {latar belakang-repeat: ulangi-x; Tinggi: 30px; Teks-Align: Kiri; Vertikal-Align: tengah; } .table tr.empty {text-align: center; } .table td, .table th {border: 1px solid #ddd; Padding: 0 1em 0; } .table tr: nth-child (ganjil) td {latar belakang-warna: #f5f5f5; } </style>Artikel ini telah dikompilasi ke dalam tutorial pembelajaran komponen front-end vue.js ", dan semua orang dipersilakan untuk belajar dan membaca.
Untuk tutorial tentang komponen vue.js, silakan klik topik khusus tutorial pembelajaran komponen vue.js untuk dipelajari.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.