Vue mengimplementasikan komponen pagination vue-paginaiton
Saya merasa bahwa saya telah menggunakan Vue untuk sementara waktu, bahwa saya tidak lagi ingin mengoperasikan DOM secara langsung. Pengalaman pemrograman yang terikat data sangat bagus. Implementasi komponen paging.
CSS di sini tidak akan dirilis. Anda dapat membacanya dan mengunduhnya langsung di GitHub: Vue-Pagination
Mari kita ambil gambar contoh terlebih dahulu
setensilan
<Div> <ul> <li v-if = "showfirsttext"> <a v-on: click = "cur-"> halaman sebelumnya </a> </li> <li v-for = "index in pagenums"> <a v-on: click = "pageChange (index)"> {{index}} </a> </li> <li> vt- "> {{index}} </a> </li> <li> vt-"> {{index}} </a> </li> <li> vt- "> {{index}} </a> </li> <li> vt-"> {{index}} </a> </Li> <li> vt- v-on: click = "cur ++"> halaman berikutnya </a> </li> <li> <a> total <i> {{all}} </i> </a> </li> </ul> </div>Sebelum JS diperkenalkan, tampilan dan analisis halaman dapat dengan mudah output secara langsung. {{index}} adalah nomor halaman, yang membutuhkan beberapa rendering dinamis.
var app = vue baru ({el: '#App', data: {currentPage: 1, totlepage: 28, visiblePage: 10, msg: ''},})Memanggil vue baru ({parameter}) adalah untuk membuat komponen dasar, menetapkannya ke variabel app.el adalah singkatan dari elemen, memposisikan posisi template.data adalah data. Saya tahu jumlah total halaman, tetapi untuk menampilkan nomor halaman, masih perlu dihitung, jadi menampilkan nomor halaman adalah atribut perhitungan. Jadi kita perlu menggunakan komputasi
Dihitung: {// Atribut yang dihitung: Kembali ke array nomor halaman, cek kotor akan dilakukan secara otomatis di sini, tanpa $ watch (); pagenums: function () {// Batas halaman sebelum dan sesudah inisialisasi var lowpage = 1; var highpage = this.totlepage; var pageArr = []; if (this.totlepage> this.visiblePage) {// Jika jumlah total halaman melebihi jumlah halaman yang terlihat, pemrosesan lebih lanjut akan dilakukan; var subvisiblePage = math.ceil (this.visiblePage/2); if (this.currentpage> subvisiblePage && this.currentpage <this.totlepage - subvisiblePage +1) {// memproses halaman normal lowpage lowpage = this.currentpage - subvisiblePage; highpage = this.currentpage + subvisiblePage -1; } lain jika (this.currentpage <= subvisiblePage) {// memproses halaman rendah logis untuk beberapa halaman sebelumnya = 1; highpage = this.visiblePage; } else {// memproses halaman rendah logis untuk beberapa halaman terakhir = this.totlepage - this.visiblePage + 1; highpage = this.totlepage; }} // Setelah menentukan batas halaman atas dan bawah, Anda harus bersiap untuk menekan ke dalam array dan menjadi sementara (lowpage <= highpage) {pagearr.push (lowpage); lowpage ++; } return pageArr; }},Saat menonton template HTML, saya menemukan arahan V-jika. Jelas bahwa ketika konten itu benar, itu akan menjadi output, dan jika tidak.
Fokus pada
<li v-for = "index in pagenums" v-bind: class = "{Active: currentPage == index}"> <a v-on: click = "pagechange (index)"> {{index}} </a> </li>V-FOR adalah loop rendering output Atribut Pagenums. Setiap elemen anak loop ditugaskan untuk mengindeks v-bind: kelas untuk mengikat kelas. Saat rendering ke tanda sudut saat ini, tambahkan kelas V-on: Klik untuk mengikat acara. Saya meneruskan indeks sebagai parameter, dan membuat penilaian nanti, dan lulus acara acara secara default.
Kemudian kami menambahkan bidang metode ke opsi VUE
Metode: {pagechange: function (halaman) {if (this.currentpage! = page) {this.currentpage = page; ini. $ dispatch ('page-change', halaman); // Komunikasi antara komponen orang tua dan anak: ==> Komponen anak mendistribusikan acara melalui $ dipatch (), dan komponen induk gelembung dan mendengarkan acara yang sesuai melalui v-on: page-change; }; }}Interaksi komponen
Komponen sudah selesai menulis, dan masalahnya adalah bahwa pengguna mengklik halaman untuk berubah. Bagaimana Anda memberi tahu komponen lain untuk membuat perubahan yang sesuai? Anda dapat memasukkan pernyataan di bawah fungsi di mana sudut halaman berubah. Tetapi metode ini adalah pendekatan yang sangat buruk. Tersedia
watch: {currentPage: function (oldvalue, newValue) {console.log (argumen)}}Amati data CurrentPage saat berubah, sebelum dan sesudah nilai dapat diperoleh. Kemudian beri tahu komponen lain.
Kode lengkap dapat ditemukan di GitHub: Vue-Pagination
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.