Я имел в контакте с оригинальной фронтальной моделью раньше, JQUERY+Bootstrap, сложными операциями DOM и обременительным привязкой обновлений. После участия в VUE у меня появилось новое понимание фронтальной структуры MVVM. Эта статья построена на WebPack+Vue. Поскольку предыдущая работа была в основном основана на разработке сервера Java, понимание фронтальных фреймворков и компонентов не было достаточно глубоким, поэтому оно используется для записи каждого бита использования и строительства фронтальных фреймворков.
Этот компонент пейджинга разработан на основе нижней страницы загрузки Bootstrap, а пользовательские функции добавляются к соответствующим параметрам.
Окончательное использование рендеринг заключается в следующем, данные поступают из Cnodejs [https://cnodejs.org/]
Компонент нижней страницы в основном состоит из двух частей: текущий номер элемента данных отображается слева и номер страницы подкачки справа. Код компонента заключается в следующем:
<Шаблон XMLNS: v-on = "http://www.w3.org/1999/xhtml" xmlns: v-bind = "http://www.w3.org/1999/xhtml"> <div> <div> <div> <select von: indome = "menuchange ()" vmodel " v-for = "Item в меню" v-bind: value = "item"> {{item}} </option> </select> record/page, отображая {{start}} to {{end}} записи элемента, общая {{totalsize}} elect </div> </div> <viv> <ul> <li> v-bind: class = "{'disablet': cur == 1}"> home </a> </li> <li> <a v-on: click = "preclick ()" v-bind: class = "{'отключен': cur == 1}"> предыдущая страница </a> </li> <li> <a v-on: click = "nextclic 1} "> предыдущая страница </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 =" uleclick () "v-bind: '' strame = ':' induction '=': 'strably:' strable: '{/nable:' '. 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' export defort {props: ['' page-model '], data () {return {// начальная страница cur: 1, // url url-запрос: this.pagemodel.url? this.pagemodel.url: "", // запрос параметров параметры: this.pagemodel.param? this.pagemodel.param: {}, // метод запроса по умолчанию, чтобы получить метод запроса: this.pagemodel.method? this.pagemodel.method: 'get', // количество отображений на страницу отображается по умолчанию 10 штук на страницу ограничение: this.pagemodel.menu? this.pagemodel.menu [0]: 10, // базовая страница по умолчанию по умолчанию на 5 Persize: this.pagemodel.persize? this.pagemodel.persize: 5, // Меню раскрывающихся параметров отображения на страницу: this.pagemodel.menu? this.pagemodel.menu: [5, 10, 50], // Пользовательское имя параметров страниц PageParamName: this.pageModel.pageParamName? this.pagemodel.pageparamname: ['' page ',' limit '], // текущий список отображает начало записи: 0, // В текущем списке отображается запись Записи: 0, // Общая страница Total Page: 0, // Общее количество записей Totalsize: 0, // Запрос страницы возвращает Datalist: []}}, ready () {this.getData (); }, методы: {// домашняя страница FirstClick: function () {if (this.cur> 1) {this.cur = 1; this.getData (); }}, // последняя страница lastclick: function () {if (this.cur <this.totalpage) {this.cur = this.totalpage; this.getData (); }}, // предыдущая страница preclick: function () {if (this.cur> 1) {this.cur--; this.getData (); }}, // следующая страница nextclick: function () {if (this.cur <this.totalpage) {this.cur ++; this.getData (); }}, // номер страницы pageclick: function (data) {if (data! = This.cur) {this.cur = data; this.getData (); }}, // Обновить количество записей, отображаемых обновлением, 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; }}, // запрос на страницу getData: function () {let _This = this; this.param [this.pageparamname [0]] = this.cur; this.param [this.pageparamname [1]] = this.limit; Ajax ({url: _this.url, метод: _this.method, data: _this.param, обратный вызов: function (res) {// возвращать набор данных результата _this.limit); }, // показать записи на страницу Menuchange: function () {this.getData (); }, getPage: function (curpage, totalPage, pagenum) {var Lewdent, правая страница; curpage = curpage> 1? ПРЕДУПРЕЖДЕНИЕ: 1; curpage = curpage> TotalPage? TotalPage: Cugpage; TotalPage = curpage> TotalPage? ПРЕДУПРЕЖДЕНИЕ: TotalPage; // левая страница = curpage - math.floor (pagenum / 2); левая страница = левая страница> 1? Левая страница: 1; // right -page = curpage + math.floor (pagenum / 2); right -page = right -page> total -page? общая страница: правая страница; var curpagenum = правая страница - левая страница + 1; // левая страница if (curpagenum <pagenum && левая страница> 1) {левая страница = левая страница - (pagenum - curpagenum); левая страница = левая страница> 1? Левая страница: 1; Curpagenum = правая страница - левая страница + 1; } // Отрегулируйте правую сторону if (curpagenum <pagenum && right -page <totalpage) {right -page = right -page + (pagenum - curpagenum); right -page = right -page> total -page? общая страница: правая страница; } var arr = []; for (var i = левая страница; i <= правая страница; i ++) {arr.push (i); } return arr; }}, вычисляется: {pages: function () {return this.getPage (this.cur, this.totalpage, this.persize); }}}} </script> <style> ul, li {margin: 0px; Заполнение: 0px; } li {list-style: none; дисплей: inline; / Текстовое декорация: нет; позиция: относительно; Плавание: осталось; Заполнение: 6px 12px; Мяглевая маржа: -1PX; Линия-высота: 1.42857143; Цвет: #337AB7; курсор: указатель; } .page-bar a: Hover {founal-color: #eee; } .page-bar .active a {color: #fff; Курсор: по умолчанию; фоновый цвет: #337AB7; Пограничный цвет: #337AB7; } .page-bar i {font-style: нормальный; Цвет: #D44950; Покрас: 0px 4px; размер шрифта: 12px; } .page-bar .page-con, .page-size {ширина: 50%; дисплей: блок; Высота: 30px; Плавание: осталось; высота линии: 30px; } .page-bar .page-con ul {float: right; Лебь набивки: 15px; Плава правая: 15px; дисплей: встроенный блок; Лебь набивки: 0; } .page-bar .page-размер div {padding-left: 15px; Плава правая: 15px; размер шрифта: 14px; } a.disabled {color: #777; фоновый цвет: #fff; Пограничный цвет: #DDD; Курсор: не прозвенный; } a.disabled: Hover {founal-color: #fff; } .clear-both {clear: оба; } select {border: solid 1px #ddd; Внешний вид: нет; -moz-appearance: нет; -Webkit-apperance: нет; Фон: url ("../ Assets/Images/rrow.png") без повторного прокрутки правого центра прозрачного; Плава правая: 15px; Лебь набивки: 15px; надоеволок: 2PX; надоеволос: 2px; } select ::-ms-expand {display: none; } </style>Используйте модули,
<template> <vavbar> </navbar> <div> <table> <tread> <tr> <th> title </th> <Th> опубликовать время </th> <Th> Автор </th> <Th> Номер ответов </th> <Th> № fiSts </th> </tr> </tBode> <tttr 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-she-shef = "tabelempty"> <td colspan = "5"> без сопоставления записи </td> </tr> </tbody> </table> </div> <pagebar: page-model = pagemodel " Из '../components/navbar.vue' Import Pagebar из '../components/table-pagebar.vue' export defort {// Это официальный метод письма, экспорт по умолчанию, ES6 Компоненты: {Navbar, Pagebar}, Data () {return {allarticle: ", DataList: [], pagemodel: {urarticle:", DataList: 'https://cnodejs.org/api/v1/topics', menu: [5, 10, 20]},}}, вычислен: {tabelempty: function () {if (this.datalist) {return false; } else {return true; }}}, события: {refresh: function (e) {this.datalist = e; }}}} </script> <style> body, table {font-size: 12px; } таблица {Table-Layout: FIXT; Пустые клены: покажите; пограничный коллапс: коллапс; Ширина: 100%; Полевая: 10px 0; } td {height: 30px; } div.row {margin-left: 15px; Право маржи: 15px; } H1, H2, H3 {font-size: 12px; поля: 0; Заполнение: 0; } .table {border: 1px solid #ddd; Фон: #fff; } .table thead tr {founale: #eee; } .table th {founal-repeat: repeat-x; Высота: 30px; Текст-альбом: слева; Вертикальная атака: средняя; } .table tr.empty {text-align: center; } .table td, .table th {border: 1px solid #ddd; Надо: 0 1EM 0; } .table tr: nth-clild (add) td {fackground-color: #f5f5f5; } </style>Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Для обучения по компонентам Vue.js, пожалуйста, нажмите на учебник по обучению компонентов Special Topic.js.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.