Vue ใช้องค์ประกอบการแบ่งหน้า Vue-Paginaiton
ฉันรู้สึกว่าฉันใช้ Vue มาระยะหนึ่งแล้วว่าฉันไม่ต้องการใช้งาน DOM โดยตรงอีกต่อไป ประสบการณ์การเขียนโปรแกรมที่ถูกผูกมัดข้อมูลนั้นดีจริงๆ การใช้งานส่วนประกอบเพจ
CSS ที่นี่จะไม่ถูกปล่อยออกมา คุณสามารถอ่านและดาวน์โหลดได้โดยตรงบน GitHub: Vue-Pagination
ลองถ่ายรูปตัวอย่างก่อน
ลายฉลุ
<div><ul> <li v-if = "showfirsttext"> <a v-on: click = "cur-"> หน้าก่อนหน้า </a> </li> <li v-for = "ดัชนีใน pagenums"> <a v-on: click = "pagechange (ดัชนี) v-on: click = "cur ++"> หน้าถัดไป </a> </li> <li> <a> ทั้งหมด <i> {{all}} </i> </a> </li> </ul> </div>ก่อนที่จะแนะนำ JS การแสดงหน้าและการวิเคราะห์สามารถส่งออกได้โดยตรง {{index}} เป็นหมายเลขหน้าซึ่งต้องใช้การเรนเดอร์แบบไดนามิก
var app = new vue ({el: '#app', ข้อมูล: {currentPage: 1, totlePage: 28, VisiblePage: 10, msg: ''},})การเรียก Vue ใหม่ ({พารามิเตอร์}) คือการสร้างองค์ประกอบพื้นฐานกำหนดให้กับตัวแปรแอป. el เป็นตัวย่อขององค์ประกอบตำแหน่งตำแหน่งของแม่แบบ. data คือข้อมูล ฉันรู้จำนวนหน้าทั้งหมด แต่เพื่อแสดงหมายเลขหน้ามันยังคงต้องมีการคำนวณดังนั้นการแสดงหมายเลขหน้าคือแอตทริบิวต์การคำนวณ ดังนั้นเราต้องใช้การคำนวณ
คำนวณ: {// แอตทริบิวต์ที่คำนวณได้: กลับไปที่อาร์เรย์หมายเลขหน้าการตรวจสอบสกปรกจะดำเนินการโดยอัตโนมัติที่นี่โดยไม่ต้องดู $ (); pagenums: function () {// ขอบเขตหน้าก่อนและหลังการเริ่มต้น var lowpage = 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) {// การประมวลผลหน้าปกติ lowpage lowpage = this.currentPage - SubvisiblePage; HighPage = this.currentPage + SubvisiblePage -1; } อื่นถ้า (this.currentPage <= subvisiblePage) {// การประมวลผล logical lowpage สำหรับสองสามหน้าก่อนหน้า = 1; HighPage = this.visiblePage; } else {// การประมวลผล logical lowpage สำหรับสองสามหน้าสุดท้าย = this.totlePage - this.visiblePage + 1; HighPage = this.totlePage; }} // หลังจากกำหนดขอบเขตหน้าบนและล่างคุณต้องเตรียมที่จะกดลงในอาร์เรย์และอยู่ในขณะที่ (lowpage <= highpage) {pagearr.push (lowpage); lowpage ++; } return pagearr; -เมื่อดูเทมเพลต HTML ฉันพบคำสั่ง v-if เห็นได้ชัดว่าเมื่อเนื้อหาเป็นจริงมันจะถูกส่งออกและถ้าไม่ใช่
มุ่ง เน้น
<li v-for = "ดัชนีใน pagenums" v-bind: class = "{active: currentPage == ดัชนี}"> <a v-on: click = "pagechange (ดัชนี)"> {{index}} </a> </li>V-for คือแอตทริบิวต์การคำนวณเอาท์พุทการเรนเดอร์แบบวนซ้ำ แต่ละองค์ประกอบวนลูปถูกกำหนดให้กับดัชนี V-bind: คลาสเพื่อผูกคลาส เมื่อเรนเดอร์ไปยังเครื่องหมายมุมปัจจุบันให้เพิ่มคลาส V-on: คลิกเพื่อผูกเหตุการณ์ ฉันส่งดัชนีเป็นพารามิเตอร์ในและตัดสินในภายหลังและส่งเหตุการณ์โดยค่าเริ่มต้น
จากนั้นเราเพิ่มฟิลด์ Methods ไปยังตัวเลือก Vue
วิธีการ: {pageChange: ฟังก์ชั่น (หน้า) {ถ้า (this.currentPage! = หน้า) {this.currentPage = หน้า; สิ่งนี้. $ dispatch ('การเปลี่ยนแปลงหน้า', หน้า); // การสื่อสารระหว่างส่วนประกอบของผู้ปกครองและเด็ก: ==> ส่วนประกอบของเด็กแจกจ่ายเหตุการณ์ผ่าน $ dipatch () และฟองส่วนประกอบหลักและฟังเหตุการณ์ที่เกี่ยวข้องผ่าน V-ON: การเปลี่ยนแปลงหน้า; - -การโต้ตอบส่วนประกอบ
ส่วนประกอบเสร็จสิ้นการเขียนและปัญหาคือผู้ใช้คลิกที่หน้าเพื่อเปลี่ยน คุณจะแจ้งส่วนประกอบอื่น ๆ ให้เปลี่ยนแปลงที่สอดคล้องกันได้อย่างไร? คุณสามารถแทรกคำสั่งภายใต้ฟังก์ชั่นที่มุมหน้าเปลี่ยน แต่วิธีนี้เป็นวิธีที่แย่มาก มีอยู่
ดู: {currentPage: function (oldValue, newValue) {console.log (อาร์กิวเมนต์)}}สังเกตข้อมูล CurrentPage เมื่อมีการเปลี่ยนแปลงก่อนและหลังค่าสามารถรับได้ จากนั้นแจ้งส่วนประกอบอื่น ๆ
รหัสที่สมบูรณ์สามารถพบได้ใน GitHub: Vue-Pagination
บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน
สำหรับการสอนเกี่ยวกับส่วนประกอบ vue.js โปรดคลิกที่หัวข้อพิเศษ vue.js การสอนการเรียนรู้องค์ประกอบเพื่อเรียนรู้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น