Vue implementa un componente de paginación Vue-Paginaiton
Siento que he usado Vue por un tiempo, que ya no quiero operar el DOM directamente. La experiencia de programación de los datos es realmente buena. Una implementación de un componente de paginación.
El CSS aquí no se lanzará. Puede leerlo y descargarlo directamente en GitHub: Vue-Pagination
Tomemos una foto del ejemplo primero
plantilla
<div> <ul> <li v-if = "showFirstText"> <a v-on: click = "cur-"> página anterior </a> </li> <li v-For = "índice en pagenums"> <a v-on: click = "pagechange (index)"> {{índice}}} </a> </li> <li v-if = "se muestra"> <axt "> <axt" v-on: click = "cur ++"> página siguiente </a> </li> <li> <a> total <i> {{all}} </i> </a> </li> </ul> </div>Antes de introducir JS, la pantalla y el análisis de la página se pueden salir simplemente directamente. {{index}} es el número de página, que requiere alguna representación dinámica.
var app = new Vue ({el: '#App', Data: {currentPage: 1, totlePage: 28, visiblePage: 10, msg: ''},})Llamar a nuevo Vue ({parámetro}) es crear un componente básico, asignarlo a la variable App.el es la abreviatura del elemento, posicionando la posición de la plantilla.data son los datos. Conozco el número total de páginas, pero para mostrar el número de página, aún debe calcularse, por lo que mostrar el número de página es el atributo de cálculo. Entonces necesitamos usar Compute
Calculado: {// Atributos calculados: regresar a la matriz de números de página, Dirty Check se realizará automáticamente aquí, sin $ watch (); pagenums: function () {// límite de página antes y después de la inicialización var LowPage = 1; var highpage = this.totlePage; var pagearr = []; if (this.totlepage> this.VisiblePage) {// Si el número total de páginas excede el número de páginas visibles, se realizará un procesamiento adicional; var subvisiblePage = math.ceil (this.VisiblePage/2); if (this.CurrentPage> SubvisiblePage && this.CurrentPage <this.totlePage - SubvisiblePage +1) {// Processing Página normal LowPage LowPage = this.CurrentPage - SubvisiblePage; HighPage = this.CurrentPage + SubvisiblePage -1; } else if (this.CurrentPage <= SubvisiblePage) {// Processing Logical LowPage para las pocas páginas anteriores = 1; HighPage = this.VisiblePage; } else {// Processing lógico Lowpage para las últimas páginas = this.totlePage - this.VisiblePage + 1; HighPage = this.totlePage; }} // Después de determinar los límites de la página superior e inferior, debe prepararse para presionar en la matriz y ser mientras (LowPage <= HighPage) {pagearr.push (LowPage); bajo PAGE ++; } return pagearr; }},Al ver la plantilla HTML, encontré la directiva V-IF. Es obvio que cuando el contenido es verdadero, se emitirá, y si no lo es.
Concentrarse en
<li v-For = "índice en pagenums" v-bind: class = "{activo: currentPage == index}"> <a v-on: click = "pagechange (index)"> {{index}} </a> </li>V-FOR es el atributo de cálculo de salida de renderizado de bucle pagenums. Cada elemento infantil de bucle se asigna a la clase índice v-bind: clase para vincular la clase. Al renderizar a la marca de ángulo actual, agregue Clase V-ON: haga clic para vincular el evento. Pase el índice como parámetro en y hago un juicio más tarde, y paso el evento de evento por defecto.
Luego agregamos el campo Métodos a la opción VUE
Métodos: {PageChange: function (Page) {if (this.CurrentPage! = Page) {this.CurrentPage = Page; this. $ Dispatch ('Page-Change', página); // Comunicación entre los componentes parentales e infantiles: ==> Los componentes infantiles distribuyen eventos a través de $ dipatch (), y los componentes principales burbujas y escuchan los eventos correspondientes a través de V-ON: Page-Change; }; }}Interacción componente
El componente ha terminado de escribir, y el problema es que el usuario hace clic en la página para cambiar. ¿Cómo notifica a otros componentes que realicen cambios correspondientes? Puede insertar una declaración en la función donde cambia la esquina de la página. Pero este método es un enfoque muy pobre. Disponible
reloj: {CurrentPage: function (OldValue, NewValue) {console.log (argumentos)}}Observe los datos de CurrentPage cuando cambie, se pueden obtener valores antes y después. Luego notifique a otros componentes.
El código completo se puede encontrar en GitHub: Vue-Pagination
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.