나는 이전, JQuery+Bootstrap, 복잡한 DOM 작업 및 번거로운 업데이트 바인딩 전에 원래 프론트 엔드 모델과 접촉했습니다. VUE에 참여한 후 프론트 엔드 MVVM 프레임 워크에 대한 새로운 이해가 있습니다. 이 기사는 WebPack+Vue를 기반으로합니다. 이전 작업은 주로 Java 서버 개발을 기반으로했기 때문에 프론트 엔드 프레임 워크 및 구성 요소에 대한 이해는 충분히 심도 있지 않았으므로 프론트 엔드 프레임 워크 사용 및 구성의 모든 비트를 기록하는 데 사용됩니다.
이 페이징 구성 요소는 부트 스트랩 감염 가능의 하단 페이지를 기반으로 개발되며 맞춤형 기능은 관련 매개 변수에 추가됩니다.
최종 사용 렌더링은 다음과 같습니다. 데이터는 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 v-on : change in int in int in v-model = "v-model ="v-model = "v-model =" 메뉴 "v-bind : value ="item "> {{item}} </옵션> </select> record/page, {{start}}에 {{end}} 항목 레코드를 표시하고, 총 {{totalsize}} 항목 </div> </div> <li> <ul> <li> <a v-on :"first Class () "v-b-b-b-b-b-b-b-b-inder. == 1} "> home </a> </a> </li> <li> <a v-on : click ="preclick () ""preplick () ""v-bind : class = "{ 'disabled': cur == 1}"> 이전 페이지 </a> </li> <li> <a v-on : "nextClick ()"v-bind : "class ="{disabled ' v-for = "per per in pages"v-bind : class = "{ 'active': cur == per}"> <a v-on : click = "pageclick (per)"> {{{per}} </a> </a> </li> <li> <a v-on : "nextClick ()"v-bind : "class ="{disabled '> <li> <a v-on : "click ="lastclick () "v-bind : class ="{ 'disabled': cur == totalpage} "> 마지막 페이지 </a> </li> <li> <a> total <i> {{totalpage}} </i> pages </a> </li> </ull> </div> </div> </템플릿> </템플릿> '../ajax'Export Default {props : [ 'page-model'], data () {return {// 초기 페이지 cur : 1, // 요청 주소 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 resize : this.pagemodel.persize? this.pagemodel.persize : 5, // 페이지 당 드롭 다운 옵션 옵션 메뉴 : this.pagemodel.menu? this.pagemodel.menu : [5, 10, 50], // Pagination 매개 변수의 사용자 정의 이름 pageparamname : this.pagemodel.pageparamname? this.pagemodel.pageparamname : [ 'page', 'limit'], // 현재 목록에 레코드 시작을 표시합니다 : 0, // 현재 목록에는 레코드 종료가 표시됩니다 : 0, Total Pages totalpage : 0, // 총 레코드 총체 : 0, // 페이지 요청 : []}, ready (this.getData); }, methods : {// 홈페이지 첫 번째 클릭 : function () {if (this.cur> 1) {this.cur = 1; this.getData (); }}, // 마지막 페이지 last Click : function () {if (this.cur <this.totalpage) {this.cur = this.totalPage; this.getData (); }}, // 이전 페이지 preclick : function () {if (this.cur> 1) {this.cur-; this.getData (); }}, // 다음 페이지 다음 페이지 다음 페이지 : function () {if (this.cur <this.totalpage) {this.cur ++; this.getData (); }}, // 페이지 번호 pageclick : function (data) {if (data! = this.cur) {this.cur = data; this.getData (); }}, // 레코드의 수를 새로 고침으로 새로 고칩니다. Comphriefpagecon : 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; }}, // Pagination 요청 getData : function () {let _this = this; this.param [this.pageparamname [0]] = this.cur; this.param [this.pageparamname [1]] = this.limit; ajax ({url : _this.url, method : _this.method, data : _this.param, callback : function (res) {// 결과 데이터 세트를 반환 this.datalist = res.data; // 레코드의 총 수를 반환 _this.totalsize = 25; _this.ceil (_this.ceil) _this.limit) _this.refreshpagecon (); }, // 페이지 당 녹음 표시 메뉴는 다음을 표시합니다. menuchchange : function () {this.getData (); }, getPage : function (Curpage, TotalPage, PagEnum) {var leftpage, RightPage; CUPAGE = CUPAGE> 1? 저주 : 1; CUPAGE = CURPAGE> TOTALPAGE? TotalPage : 저작물; TotalPage = Curpage> TotalPage? CUPAGE : TotalPage; // LeftPage = CURPAGE -MATH.FLOOR (Pagenum / 2); LeftPage = LeftPage> 1? 왼편 : 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? 왼편 : 1; Curpagenum = RightPage -LeftPage + 1; } // if (curpagenum <pagenum && rightPage <TotalPage) {RightPage = RightPage + (pagenum -curpagenum); RightPage = RightPage> TotalPage? TotalPage : RightPage; } var arr = []; for (var i = 왼편; i <= RightPage; i ++) {arr.push (i); } rack arr; }}, 계산 : {pages : function () {return this.getPage (this.cur, this.totalpage, this.persize); }}}}} </script> <style> ul, li {마진 : 0px; 패딩 : 0px; } li {목록 스타일 : 없음; 디스플레이 : 인라인; } .page-bar li : First-Child> a {margin-left : 0px} .page-bar a {border : 1px solid #ddd; 텍스트 결정 : 없음; 위치 : 상대; 플로트 : 왼쪽; 패딩 : 6px 12px; 마진 왼쪽 : -1px; 라인 높이 : 1.42857143; 색상 : #337AB7; 커서 : 포인터; } .Page-Bar A : 호버 {배경색 : #eee; } .page-bar .active a {color : #fff; 커서 : 기본값; 배경색 : #337AB7; 국경 색상 : #337AB7; } .page-bar i {font 스타일 : 정상; 색상 : #D44950; 마진 : 0px 4px; 글꼴 크기 : 12px; } .page-bar .page-con, .page-size {너비 : 50%; 디스플레이 : 블록; 높이 : 30px; 플로트 : 왼쪽; 라인 높이 : 30px; } .page-bar .page-con ul {float : 오른쪽; 왼쪽 패딩 : 15px; 패딩-오른쪽 : 15px; 디스플레이 : 인라인 블록; 왼쪽 패딩 : 0; } .page-bar .page-size div {Padding-left : 15px; 패딩-오른쪽 : 15px; 글꼴 크기 : 14px; } a.disabled {색상 : #777; 배경색 : #fff; 국경 색 : #ddd; 커서 : 말도 안됩니다. } a.disabled : 호버 {배경색 : #fff; }. Clear-Both {Clear : 둘 다; } select {border : solid 1px #ddd; 외관 : 없음; -Moz-appearance : 없음; -WebKit-Appearance : 없음; 배경 : URL ( "../ 자산/이미지/Arrow.png") No-Repeat 스크롤 오른쪽 센터 투명; 패딩-오른쪽 : 15px; 왼쪽 패딩 : 15px; 패딩 탑 : 2px; 패딩 바닥 : 2px; } select :: -s-expand {display : none; } </style>모듈 사용,
<template> <navbar> </navbar> <div> <table> <tread> <tr> <th> title </th> <th> 출판 시간 </th> <th> 저자 수 </th> <th> 답변 수 </th> <th> 방문 수 </th> </tr> </ttowow = "v-for"v-for ""it in datalist "" <td> {{item.title}} </td> <td> {{item.create_at}} </td> <td> {{item.author.loginname}} </td> {item.reply_count}} </td> <td> {{item.visit_count}} </td> </tr> <tr> v-show = "tabelempty"> <td colspan = "5"> 일치 기록 </td> </tr> </tbody> </table> </div> <pagebar : page-model> </pagebar> </pagebar> </pagebar> '../components/navbar.vue'import pagebar from '. 'https://cnodejs.org/api/v1/topics', 메뉴 : [5, 10, 20]},}}, 계산 : {tabelempty : function () {if (this.datalist) {return false; } else {return true; }}}, 이벤트 : {새로 고침 : 함수 (e) {this.datalist = e; }}}}} </script> <style> body, 표 {font-size : 12px; } 테이블 {테이블 레이어 : 고정; 빈 셀 : 쇼; 국경-콜라스 : 붕괴; 너비 : 100%; 여백 : 10px 0; } td {높이 : 30px; } div.row {margin-left : 15px; 마진 오른쪽 : 15px; } H1, H2, H3 {font-size : 12px; 여백 : 0; 패딩 : 0; } .table {테두리 : 1px solid #ddd; 배경 : #fff; } .table thead tr {배경 : #eee; } .table th {background-repeat : repeat-x; 높이 : 30px; 텍스트 정렬 : 왼쪽; 수직 정상 : 중간; } .table tr.Empty {Text-Align : Center; } .table td, .table th {border : 1px solid #ddd; 패딩 : 0 1em 0; } .table tr : nth-Child (홀수) td {배경색 : #f5f5f5; } </style>이 기사는 "vue.js 프론트 엔드 구성 요소 학습 튜토리얼"으로 편집되었으며 모두가 배우고 읽을 수 있습니다.
vue.js 구성 요소에 대한 튜토리얼은 특수 주제 vue.js 구성 요소 학습 자습서를 클릭하여 학습하십시오.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.