He estado en contacto con el modelo de front-end original antes, jQuery+bootstrap, operaciones DOM complicadas y vinculación de actualización engorrosa. Después de involucrarme en VUE, tengo una nueva comprensión del marco MVVM front-end. Este artículo se basa en Webpack+Vue. Dado que el trabajo anterior se basó principalmente en el desarrollo del servidor Java, la comprensión de los marcos y componentes frontales no fue lo suficientemente profundo, por lo que se utiliza para registrar cada parte del uso y construcción del marco front-end.
Este componente de paginación se desarrolla en función de la página inferior de la bootstrap-Datable, y se agregan funciones personalizadas a los parámetros relevantes.
La representación de uso final es el siguiente, los datos provienen de CNodeJS [https://cnodejs.org/]
El componente de la página inferior se compone principalmente de dos partes: el número de elemento de datos actual se muestra en la izquierda y el número de página de paginación a la derecha. El código de componente es el siguiente:
<Template xmlns: v-on = "http://www.w3.org/1999/xhtml" xmlns: v-bind = "http://www.w3.org/1999/xhtml"> <div> <div> <div> <div> <select v-on: cambie v-For = "Elemento en el menú" v-bind: value = "elemento"> {{elemento}} </opción> </select> registro/página, mostrando los registros {{inicio}}} a {{end}}} de elementos, totalizando {{totalSize}} elementos </div> </div> <div> <li> <li> <li> <a V-on: click = ")") ")") ")") ")") ")") v- bind: class = "{{'discapaced': cur == 1}"> home </a> </li> <li> <a v-on: click = "preclick ()" v-bind: class = "{'Disabled': cur == 1}"> Página anterior </a> </li> <li> <a v-on: click = "nextClick () 1} "> Página anterior </a> </li> <li vfor =" per en las páginas "v-bind: class =" {'activo': cur == per} "> <a v-on: click =" pageClick (per) "> {{per}}} </a> </li> <l> <a v-on: click =" next ccLick () "v bind: class =" 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 desde '../ajax' exportar predeterminado {props: ['page-model'], data () {return {// página inicial cur: 1, // Url de dirección de solicitud: this.pagemodel.url? this.pagemodel.url: "", // Solicitar parámetros Param: this.pagemodel.param? this.pagemodel.param: {}, // El método de solicitud predeterminado para obtener el método de solicitud: this.pagemodel.method? this.pagemodel.method: 'get', // El número de pantallas por página se muestra por defecto 10 piezas por límite de página: this.pagemodel.menu? this.pagemodel.Menu [0]: 10, // La base de la página base predeterminada a 5 Persize: this.pagemodel.persize? this.pagemodel.persize: 5, // Número de visualización por página Opciones desplegables Menú: this.pagemodel.menu? this.pageModel.Menu: [5, 10, 50], // Nombre personalizado de los parámetros de paginación PageParamName: this.pagemodel.pageParamName? this.pagemodel.pageParamName: ['Page', 'Limit'], // La lista actual muestra registro de inicio: 0, // La lista actual muestra el registro final: 0, // Total Páginas TotalPage: 0, // Total Records TotalSize: 0, // La solicitud de página Devuelve DataList: []}}, Ready () {this.getData (); }, Métodos: {// Página de inicio FirstClick: function () {if (this.cur> 1) {this.cur = 1; this.getData (); }}, // última página lastClick: function () {if (this.cur <this.totalPage) {this.cur = this.totalPage; this.getData (); }}, // Página anterior preclick: function () {if (this.cur> 1) {this.cur--; this.getData (); }}, // página siguiente NextClick: function () {if (this.cur <this.totalPage) {this.cur ++; this.getData (); }}, // número de página pageClick: function (data) {if (data! = This.cur) {this.cur = data; this.getData (); }}, // Actualizar el número de registros que se muestran 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; }}, // solicitud de paginación getData: function () {let _this = this; this.param [this.pageParamName [0]] = this.cur; this.param [this.pageParamName [1]] = this.limit; Ajax ({Url: _this.url, método: _this.method, data: _this.param, llamado: function (res) {// devuelve los datos de resultados _This.limit); }, // Mostrar registros por página desplegable 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? Page de la izquierda: 1; // RightPage = curpage + math.floor (pageno / 2); Right Page = RightPage> ¿TotalPage? TotalPage: página derecha; var curpagenum = Página derecha - Page izquierda + 1; // LeftPage if (Curpagenum <Pagenum && LeftPage> 1) {LeftPage = LeftPage - (PageNum - Curpagenum); LeftPage = LeftPage> 1? Page de la izquierda: 1; curpagenum = Página derecha - Página izquierda + 1; } // Ajuste el lado derecho if (curpagenum <pagenum && rightpage <totalpage) {rightpage = rightpage + (pagenum - curpagenum); Right Page = RightPage> ¿TotalPage? TotalPage: página derecha; } var arr = []; for (var i = LeftPage; i <= RightPage; i ++) {arr.push (i); } return arr; }}, calculado: {páginas: function () {return this.getPage (this.cur, this.totalPage, this.persize); }}}} </script> <style> ul, li {margen: 0px; relleno: 0px; } li {list-style: none; Pantalla: en línea; } .page-bar li: First-Child> a {margen-izquierda: 0px} .page-bar a {border: 1px solid #ddd; Decoración de texto: ninguna; Posición: relativo; flotante: izquierda; relleno: 6px 12px; margen -izquierda: -1px; Línea de altura: 1.42857143; Color: #337AB7; cursor: puntero; } .page-bar a: hover {background-color: #eee; } .page-bar .active a {color: #fff; cursor: predeterminado; Color de fondo: #337AB7; Color de la frontera: #337AB7; } .page-bar i {Font-Style: Normal; Color: #D44950; margen: 0px 4px; tamaño de fuente: 12px; } .page-bar .page-co, .page-size {ancho: 50%; Pantalla: bloque; Altura: 30px; flotante: izquierda; Línea de altura: 30px; } .page-bar .page-con ul {float: right; ROLED-LEFUNDA: 15px; Right de relleno: 15px; Pantalla: bloque en línea; ROLED-LAFUERA: 0; } .page-bar .page-size div {padding-izquierda: 15px; Right de relleno: 15px; tamaño de fuente: 14px; } a.disable {color: #777; Color de fondo: #fff; Color de la frontera: #DDD; cursor: no permitido; } a.disable: hover {background-color: #fff; } .clar-both {clare: ambos; } select {border: sólido 1px #ddd; Apariencia: ninguno; -Moz-apariencia: ninguna; -Webkit-apariencia: ninguna; Antecedentes: URL ("../ Assets/Images/Arrow.png") sin repetición de desplazamiento a la derecha Centro transparente; Right de relleno: 15px; ROLED-LEFUNDA: 15px; Top-top: 2px; Botón de relleno: 2px; } Seleccionar ::-MS-Expand {Display: None; } </style>Usar módulos,
<template> <Al Navbar> </ambar> <div> <table> <-stamp> <tr> <th> title </th> <th> publicar tiempo </th> <th> autor </th> <th> número de respuestas </th> <th> número de visitas </th> </tr> </ttr v-show = "! <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"> sin registro de coincidencia </td> </tr> </tbody> </table> </div> <pagebar: page-model = "pageModel"> </pagebar> </TETMATATATATET '../Components/navbar.vue' Importar PageBar de '../Components/table-pagebar.vue' Exportar predeterminado {// Este es el método de escritura oficial, la exportación predeterminada, ES6 Components: {Navbar, Pagebar}, data () {return {AllArticle: "", Datalist: [], pagemodel: {url: {url: 'https://cnodejs.org/api/v1/topics', menú: [5, 10, 20]},}}, calculado: {tabeLempty: function () {if (this.datalist) {return false; } else {return true; }}}, eventos: {refresh: function (e) {this.datalist = e; }}}} </script> <style> cuerpo, tabla {font-size: 12px; } tabla {table-layout: fijo; Células vacías: espectáculo; Colapso de borde: colapso; Ancho: 100%; margen: 10px 0; } td {altura: 30px; } div.row {margen-izquierda: 15px; margen-derecha: 15px; } H1, H2, H3 {Font-Size: 12px; margen: 0; relleno: 0; } .table {borde: 1px sólido #ddd; Antecedentes: #fff; } .table thead tr {fondo: #eee; } .table th {background-repeat: repetir-x; Altura: 30px; text-align: izquierda; Align vertical: medio; } .table tr.empty {text-align: center; } .table td, .table th {border: 1px solid #ddd; relleno: 0 1em 0; } .table tr: nth-child (impar) td {de fondo de fondo: #f5f5f5; } </style>Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.
Para obtener tutoriales en los componentes Vue.js, haga clic en el tema especial Vue.js Component Learning Tutorial para aprender.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.