Já estive em contato com o modelo de front-end original antes, JQuery+Bootstrap, Operações DOM complicadas e encadernação de atualização complicada. Depois de me envolver no Vue, tenho um novo entendimento da estrutura do MVVM front-end. Este artigo é construído no Webpack+Vue. Como o trabalho anterior foi baseado principalmente no desenvolvimento do servidor Java, o entendimento das estruturas e componentes do front-end não era suficientemente aprofundado, por isso é usado para gravar todo o uso e construção da estrutura front-end.
Esse componente de paginação é desenvolvido com base na página inferior do bootstrap dados e funções personalizadas são adicionadas aos parâmetros relevantes.
A renderização de uso final é a seguinte, os dados vêm de cnodejs [https://cnodejs.org/]
O componente da página inferior é composto principalmente de duas partes: o número de item de dados atual exibe à esquerda e o número da página de paginação à direita. O código do componente é o seguinte:
<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:change="menuChange()" v-model="limit"> <option v-for="item No menu "v-bind: value =" item "> {{item}} </option> </leclect> registre/página, exibindo o {{start}} para {{end}} registros de item, totalizando {{totalsize}} itens </divl> <liv> <ul> <li>> cur == 1} "> home </a> </li> <li> <a v-on: click =" preclick () "v-bind: class =" {'desativado': cur == 1} "> página anterior </a> </li> <li> <a-v-on: click =" nextClick () "v-bind: class =" {{) v-for = "por páginas" v-bind: class = "{'Active': cur == per}"> <a v-on: click = "Pageclick (per)"> {{per}} </a> </li> <li> <a-on: click = "next ()" v-bind: class = "{'> <li> <a v-on: click = "lastClick ()" v-bind: class = "{'desativado': cur == TotalPage}"> última página </a> </li> <li> <a> Total <i> {{totalpage}} </i> de '../ajax' export padrão {props: ['página-model'], data () {return {// página inicial cur: 1, // URL do endereço de solicitação: this.pageModel.url? this.pageModel.url: "", // Parâmetros de solicitação param: this.pageModel.param? this.pageModel.param: {}, // o método de solicitação padroniza o método de solicitação: this.pageModel.method? this.pageModel.method: 'Get', // O número de exibições por página é exibido por padrão 10 peças por página Limite de página: this.pageModel.menu? this.pageModel.menu [0]: 10, // A base base da base padrão é 5 Persize: this.pageModel.persize? this.pageModel.persize: 5, // Número de exibição por página Opções suspensas Menu: this.pageModel.menu? this.pageModel.menu: [5, 10, 50], // Nome personalizado dos parâmetros de paginação PageParamName: this.pageModel.pageParamname? this.pageModel.PageParamName: ['página', 'limite'], // A lista atual exibe o registro Iniciar: 0, // A lista atual exibe o final do registro: 0, // Páginas totais TotalPage: 0, // Total Records Totalsize: 0, // A página Retorna Datalist: []}}, () (). }, Métodos: {// Página inicial 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 (); }}, // Próxima página 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 (); }}, // Atualize o número de registros exibidos 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; }}, // Solicitação de paginação 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, dados: _This.param, retorno de chamada: function (res) {// retorna o conjunto de dados de resultado _This.limit); }, // Mostra registros por página Menuchange pull-down: function () {this.getData (); }, getPage: function (Curpage, TotalPage, Pagenum) {Var LeftPage, Página direita; Curpage = Curpage> 1? Curpagem: 1; Curpage = Curpage> TotalPage? TotalPage: Curpage; TotalPage = Curpage> TotalPage? Curpagem: TotalPage; // LeftPage = Curpage - Math.floor (Pagenum / 2); LeftPage = LeftPage> 1? Página de esquerda: 1; // RightPage = Curpage + Math.Floor (Pagenum / 2); RightPage = RightPage> TotalPage? TotalPage: Página direita; var curpagenum = Página direita - página de esquerda + 1; // LeftPage if (curpagenum <pagenum && leftpage> 1) {leftpage = leftpage - (pagenum - curpagenum); LeftPage = LeftPage> 1? Página de esquerda: 1; Curpagenum = Página direita - página de esquerda + 1; } // Ajuste o lado direito se (curpagenum <pagenum && rightpage <totalpage) {rightpage = rightpage + (pagenum - curpagenum); RightPage = RightPage> TotalPage? TotalPage: Página direita; } var arr = []; for (var i = leftpage; i <= Página direita; i ++) {arr.push (i); } retornar arr; }}, calculado: {páginas: function () {return this.getPage (this.cur, this.totalpage, this.persize); }}}} </script> <yoy> ul, li {margin: 0px; preenchimento: 0px; } li {estilo de lista: nenhum; exibição: embutido; } .Page-Bar Li: Primeiro filho> A {margin-left: 0px} .Page-bar a {borda: 1px sólido #ddd; Decoração de texto: Nenhum; Posição: relativa; flutuar: esquerda; preenchimento: 6px 12px; margem -esquerda: -1px; altura da linha: 1.42857143; Cor: #337AB7; Cursor: Ponteiro; } .Page-Bar A: Hover {Background-Color: #eee; } .Page-Bar .Active a {color: #fff; Cursor: padrão; Background-Color: #337AB7; Border-Color: #337AB7; } .Page-Bar i {estilo de fonte: normal; Cor: #D44950; margem: 0px 4px; tamanho de fonte: 12px; } .Page-Bar .Page-Con, .Página-size {largura: 50%; exibição: bloco; Altura: 30px; flutuar: esquerda; altura de linha: 30px; } .Page-Bar .Page-Con Ul {Float: Direita; preenchimento-esquerda: 15px; Right-right: 15px; Exibição: bloco embutido; preenchimento-esquerda: 0; } .Page-Bar .Página Div {Padding-left: 15px; Right-right: 15px; Size da fonte: 14px; } a.disabled {color: #777; Background-Color: #FFF; Border-Color: #DDD; Cursor: não superado; } a.disabled: hover {background-color: #fff; } .clear-both {clear: ambos; } selecione {borda: sólido 1px #ddd; Aparência: Nenhum; -Moz-Aparence: Nenhum; -Webkit-Aparência: Nenhum; Antecedentes: URL ("../ Assets/Images/Arrow.png") sem repetição de rolagem direita transparente; Right-right: 15px; preenchimento-esquerda: 15px; Top-top: 2px; Botting-Bottom: 2px; } selecione ::-ms-expand {display: Nenhum; } </style>Use módulos,
<Modemplate> <vbar> </avbar> <div> <table> <Tead> <tr> <th> title </th> <th> Publicar hora </th> <th> autor </th> <th> número de respostas </th> <th> número de visitas </th> </tbody) <t-shoept =! <td> {{item.title}} </td> <td> {{item.create_at}} </td> <td> {{item.author.loginname}}} </td> <td> {{item.reply_count} <td> {{item.visit_count}} </td> </tr> <tr> v-show = "tabeLepty"> <td colspan = "5"> sem registro correspondente </td> </tr> </tbody> </tabela> </divageBar: página </td> </tr> '../components/navbar.vue' import Pagebar from '../components/table-pagebar.vue' export default {//This is the official writing method, the default export, ES6 components: { Navbar, Pagebar }, data () { return { allArticle: "", dataList: [], pageModel: { url: 'https://cnodejs.org/api/v1/topics', menu: [5, 10, 20]},}}, computado: {TABELEMPTY: function () {if (this.Datalist) {return false; } else {return true; }}}, eventos: {refresh: function (e) {this.datalist = e; }}}} </script> <yoy> corpo, tabela {font-size: 12px; } tabela {tabela-layout: corrigido; células vazias: mostre; colapso da fronteira: colapso; largura: 100%; margem: 10px 0; } td {altura: 30px; } div.row {margin-left: 15px; Margem-direita: 15px; } h1, h2, h3 {font-size: 12px; margem: 0; preenchimento: 0; } .table {borda: 1px sólido #ddd; Antecedentes: #FFF; } .table tead tr {background: #eee; } .table th {background-repeat: repetição-x; Altura: 30px; Alinhamento de texto: esquerda; Alinhamento vertical: meio; } .Table TR.Empty {Text-align: Center; } .table td, .table th {borda: 1px sólido #ddd; preenchimento: 0 1em 0; } .table tr: nth-child (ímpar) td {background-color: #f5f5f5; } </style>Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.
Para tutoriais nos componentes vue.js, clique no tutorial de aprendizado de componentes do Tópico Especial Vue.js para aprender.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.