Vue는 Pagination 구성 요소 Vue-Paginaiton을 구현합니다
나는 더 이상 DOM을 직접 운영하고 싶지 않다고 Vue를 한동안 사용했다고 생각합니다. 데이터 바운드 프로그래밍 경험은 정말 좋습니다. 페이징 구성 요소의 구현.
여기의 CSS는 출시되지 않습니다. 당신은 그것을 읽고 github : vue-pagination에서 직접 다운로드 할 수 있습니다.
먼저 예제 사진을 찍어 봅시다
원판
<div> <ul> <li v-if = "showfirsttext"> <a v-on : click = "cur-"> previous page </a> </li> <li v-for = "index in pagenums"> <a v-on : "pagechange (index)"> {{index}} </a> <li v-if = "<a inxt"> V-ON : 클릭 = "cur ++"> 다음 페이지 </a> </li> <li> <a> total <i> {{all}} </i> </a> </li> </ul> </div>JS가 도입되기 전에 페이지 표시 및 분석을 직접 출력 할 수 있습니다. {{index}}은 페이지 번호이며 동적 렌더링이 필요합니다.
var app = new vue ({el : '#app', data : {currentpage : 1, totlepage : 28, visiblepage : 10, msg : ''},})New Vue ({parameter})를 호출하는 것은 기본 구성 요소를 만들고 변수 앱에 할당하는 것입니다 .EL은 요소의 약어이며 템플릿의 위치를 배치합니다 .Data는 데이터입니다. 총 페이지 수를 알고 있지만 페이지 번호를 표시하려면 여전히 계산해야하므로 페이지 번호를 표시하는 것은 계산 속성입니다. 따라서 Compute를 사용해야합니다
계산 : {// 컴퓨팅 된 속성 : 페이지 번호 배열로 돌아 가면 $ watch ()없이 더티 점검이 여기에서 자동으로 수행됩니다. pagenums : function () {// 초기화 전후의 Page 경계 var wowpage = 1; var highpage = this.totlepage; var pagearr = []; if (this.totlepage> this.visiblepage) {// 총 페이지 수가 보이는 페이지 수를 초과하면 추가 처리가 수행됩니다. var subvisiblepage = math.ceil (this.visiblepage/2); if (this.currentPage> subvisiblePage && this.currentPage <this.totlepage -subvisiblePage +1) {// 일반 페이지 로우 페이지 로우 페이지 = this.currentPage -SubvisiblePage; HighPage = this.currentPage + subvisible 페이지 -1; } else if (this.currentPage <= subvisiblePage) {// 이전 몇 페이지의 논리적 저지대 처리 = 1; HighPage = this.VisiblePage; } else {// 마지막 몇 페이지에 대한 논리적 저지대를 처리합니다. Highpage = this.totlepage; }} // 상단 및 하단 페이지 경계를 결정한 후 배열로 눌러야하고 (LowPage <= HighPage) {pagearr.push (lowpage); 로우 페이지 ++; } return pagearr; }},HTML 템플릿을 볼 때 V-IF 지침을 찾았습니다. 컨텐츠가 참일 때는 출력되며 그렇지 않은 경우 분명합니다.
집중 하십시오
<li v-for = "pagenums in pagenums"v-bind : class = "{active : currentpage == index}"> <a v-on : "pagechange (index)"> {{index}} </a> </li>V-For는 루프 렌더링 출력 계산 속성 Pagenums입니다. 각 루프 하위 요소는 index v-bind : class to bind class에 할당됩니다. 현재 각도 마크를 렌더링 할 때 클래스 V- 온을 추가하십시오 : 클릭하여 이벤트를 바인딩하십시오. 인덱스를 매개 변수로 전달하고 나중에 판단하고 기본적으로 이벤트 이벤트를 통과합니다.
그런 다음 메소드 필드를 VUE 옵션에 추가합니다.
방법 : {pagechange : function (page) {if (this.currentPage! = page) {this.currentPage = page; 이. $ dispatch ( 'page-change', page); // 부모와 자식 구성 요소 간의 커뮤니케이션 : ==> 자식 구성 요소는 $ dipatch ()를 통해 이벤트를 배포하고 부모 구성 요소 기포는 V-On : Page-Change를 통해 해당 이벤트에 청취합니다. }; }}구성 요소 상호 작용
구성 요소가 쓰기가 완료되었으며 문제는 사용자가 페이지를 클릭하여 변경한다는 것입니다. 다른 구성 요소에 해당 변경을 수행하도록 어떻게 알 수 있습니까? 페이지 코너가 변경되는 함수 아래에서 문을 삽입 할 수 있습니다. 그러나이 방법은 매우 열악한 접근법입니다. 사용 가능
시청 : {currentPage : function (OldValue, NewValue) {console.log (arguments)}}값이 전후에 변경되면 현재 페이지 데이터가 변경되면 값을 얻을 수 있습니다. 그런 다음 다른 구성 요소에 알립니다.
전체 코드는 Github : Vue-Pagination에서 찾을 수 있습니다
이 기사는 "vue.js 프론트 엔드 구성 요소 학습 자습서"로 편집되었으며 모두가 배우고 읽을 수 있습니다.
vue.js 구성 요소에 대한 튜토리얼은 특수 주제 vue.js 구성 요소 학습 자습서를 클릭하여 학습하십시오.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.