ฉันได้เรียนรู้ vue.js มาระยะหนึ่งแล้วและใช้เพื่อสร้างวิดเจ็ต 2 ตัวและฝึกฝน
ฉันใช้ WebPack เพื่อจัดทำมันดังนั้นฉันจึงคุ้นเคยกับการใช้งาน
ซอร์สโค้ดถูกวางไว้ในที่อยู่ GitHub ในตอนท้ายของบทความ
อันดับแรกคือ index.html
<! doctype html> <html> <head> <title> หน้า </title> <style type = "text/css"> * {margin: 0; Padding: 0; Font-Family: 'Open Sans', Arial, Sans-Serif; } .Contianer {width: 50%; ความสูง: อัตโนมัติ; มาร์จิ้น: 20px auto; } บทความ {มาร์จิ้น-ด้านล่าง: 50px; } </style> </head> <body> <div class = 'contianer'> <prictes> เนื้อหาบทความ ... </บทความ> <div id = 'main'> <app> </app> </div> </div> <script type = "text/javascript" src = 'bundle.js'> </script>ฉันใส่ส่วนประกอบแอปใน <div id = 'main'> </div>
หลังจากบรรจุภัณฑ์ผ่าน webpack ไฟล์ entry js คือ entry.js ซึ่งใช้เพื่อแนะนำส่วนประกอบ app.vue
entry.js
ให้ vue = ต้องการ ('vue'); นำเข้าแอพจาก './components/app'; app_vue = new Vue ({el:' #main ', ส่วนประกอบ: {แอพ: แอพ: แอป}});ถัดไปลองดูที่องค์ประกอบแอพนี้
<style type = "text/css" scoped> </style> <mermplate> <ความคิดเห็น: curpage-index = "curpageIndex": แต่ละหน้า-ขนาด = "แต่ละหน้า": comment-url = "commenturl": comment-params = "curmentparams" : แต่ละหน้าขนาด = "แต่ละหน้า": page-url = "pageUrl": page-params = "pageparams": page-is-sync = "pageissync"> </page> </template> <script type = "javascript"> นำเข้าความคิดเห็นจาก './comment'; นำเข้าหน้าจาก './page'; การส่งออกค่าเริ่มต้น {data () {return {curpageIndex: 1, แต่ละหน้า: 7,}}, ส่วนประกอบ: {ความคิดเห็น: ความคิดเห็น, หน้า: หน้า},} </script>มันมี 2 องค์ประกอบของเด็กคือความคิดเห็น vue และ page.vue โดยข้อมูลที่มีผลผูกพันแบบไดนามิกมันจะดำเนินการสื่อสารส่วนประกอบของพ่อแม่ลูก ฉันคิดอย่างนั้นสำหรับหน้าเว็บที่ควรส่งผ่านไปยัง app.vue ดังนั้นที่นี่เราใช้การผูกสองทางส่วนที่เหลือเช่น params, url, issync นั่นคือสิ่งที่ร้องขอข้อมูลจากพื้นหลังและว่าจะทำงานแบบซิงโครนัสหรือแบบอะซิงโครนัสหรือไม่
ถัดไปดูที่ความคิดเห็นองค์ประกอบความคิดเห็น
<style type = "text/css" scoped> .comt-mask {ความทึบ: 0.5; } .comt-title {} .comt-line {width: 100%; ความสูง: 2px; พื้นหลังสี: #CCC; มาร์จิ้น: 10px 0; } .comt-wrap {} .comt-user {float: ซ้าย; } .comt-img {width: 34px; ความสูง: 34px; แนวชายแดน: 17px; } .comt-context {มาร์จิ้น: 0 0 0 60px; } .comt-name {color: #2b879e; มาร์จิ้น-ก้น: 10px; ขนาดตัวอักษร: 18px; } </style> <matplate> <div v-if = "hascomment": class = "{'comt-mask': การโหลด}"> <h3 class = 'comt-title'> {{totalcommentcount}} ความคิดเห็น </h3> <div> }} '/> </div> <div> <p> {{comment.name}} </p> <p> {{comment.context}} </p> </div> </div> </div> './getData'; การส่งออกค่าเริ่มต้น {อุปกรณ์ประกอบฉาก: {curpageIndex: {ประเภท: หมายเลข, ค่าเริ่มต้น: 1,}, แต่ละหน้า: {ประเภท: หมายเลข, ค่าเริ่มต้น: 7,}, ความคิดเห็น: {ประเภท: สตริง, ค่าเริ่มต้น: '',}, ความคิดเห็น: {type: {tefault: {reking: {retch -boolean TotalCommentCount: 0, HASCOMMENT: FALSE, การโหลด: true,}}, คำนวณ: {commentarr () {this.loading = true; ให้ res = getCommentData (this.commenturl, this.commentparams, this.commentissync, this.curpageindex, this.eachpagesize); this.loading = false; Ret Res; },}, สร้าง () {let cnt = getToTalCommentCount (this.commenturl, this.commentparams); this.totalcommentCount = CNT; this.hascomment = cnt> 0; }} </script>getData.js ที่นี่จะถูกกล่าวถึงด้านล่างซึ่งเป็นที่ที่เราได้รับข้อมูล
การโหลด: ความหมายดั้งเดิมคือการโหลดหน้ากากโปร่งใส 0.5 สำหรับความคิดเห็นปัจจุบันเมื่อโหลดหมายเลขหน้าและจากนั้น Ajax จะยกเลิกหน้ากากผ่านฟังก์ชั่นการโทรกลับ ตอนนี้ไม่สามารถนำไปใช้งานได้ดังนั้นคุณสามารถเขียนได้โดยใช้กำลังเท่านั้น แต่มันก็ไร้ประโยชน์ ..
HASCOMMENT: เมื่อส่วนประกอบความคิดเห็นถูกโหลดเป็นครั้งแรกเราขอให้ได้รับความยาวข้อมูลทั้งหมด หากไม่มีข้อมูลเนื้อหาเค้าโครงส่วนประกอบความคิดเห็นจะไม่ปรากฏขึ้น
・ CurpageIndex ・: ส่งผ่านแอพส่วนประกอบหลักโดยใช้อุปกรณ์ประกอบฉาก
เราตั้งค่าเริ่มต้นและประเภทของข้อมูลเหล่านี้
page.vue
<style type = "text/css" scoped> .page {text-allign: center; มาร์จิ้น: 30px; } .page-btn {สี: สีเทา; พื้นหลังสี: สีขาว; ชายแดน: สีขาว; ความกว้าง: 30px; ความสูง: 30px; มาร์จิ้น: 5px; ขนาดตัวอักษร: 18px; โครงร่าง: ไม่มี; } .page-btn-link {เคอร์เซอร์: Crosshair; } .page-btn-active {border: 1px Solid Grey; แนวชายแดน: 15px; } </style> <memplate> <div> <button v-for = "PageIndex ของ PageArr" track-by = '$ index': class = "{'page-btn': จริง, 'page-btn-active': this.curpageindex === หน้า }} </button> </div> </template> <script type = "text/javascript"> นำเข้า {getTotalPageCount} จาก './getData'; การส่งออกค่าเริ่มต้น {อุปกรณ์ประกอบฉาก: {TotalPageCount: {ประเภท: หมายเลข, ค่าเริ่มต้น: 0,}, curpageIndex: {ประเภท: หมายเลข, ค่าเริ่มต้น: 1,}, แต่ละหน้า: {ประเภท: หมายเลข, ค่าเริ่มต้น: 7,}, pageajcn: {ประเภท: จำนวน, ค่าเริ่มต้น: 4,}, หน้า: null,}, pageissync: {type: boolean, ค่าเริ่มต้น: true,}}, data () {return {}}, คำนวณ: {pagearr () {ให้ st = 1, end = this.totalpagecount, cur = this.curpageIndex, ajcn = this.pagea = ajcn - ซ้าย; if (end == 0 || cur == 0) {return arr; } else {console.log (st, end, cur, ซ้าย, ขวา, ขวา); arr.push (ST); console.log (st+1, cur-left); if (st + 1 <cur - ซ้าย) {arr.push ('... '); } สำหรับ (ให้ i = math.max (cur - ซ้าย, st +1); i <= cur - 1; ++ i) {arr.push (i); } if (cur! = st) {arr.push (cur); } สำหรับ (ให้ i = cur + 1; i <= cur + ขวา && i <= end - 1; ++ i) {arr.push (i); } if (cur + ขวา <end - 1) {arr.push ('... '); } if (end! = cur) {arr.push (end); } return arr; }}}, เมธอด: {clickPage (curindex) {if (number.isinteger (curindex)) {this.curpageIndex = curindex; }}, checkNum (curindex) {return number.isinteger (curindex); }}, สร้าง () {this.totalPageCount = getToTalPageCount (this.pageUrl, this.pageParams, this.pageissync, this.eachpagesiz); }} </script>ส่วนใหญ่เป็นการใช้เหตุการณ์ส่วนประกอบ = เหตุการณ์การคลิกที่พบบ่อยที่สุดและการเชื่อมโยงระหว่างคลาสและสไตล์ เปรียบเทียบตาม CurpageIndex และ this.pageIndex เพื่อพิจารณาว่าคุณมีคลาสนี้หรือไม่ ใช้คำนวณเพื่อคำนวณแอตทริบิวต์เพื่อรับอาร์เรย์หมายเลขหน้าเนื่องจากจะเปลี่ยนไปตามหน้าปัจจุบันและคำนวณหมายเลขหน้าทั้งหมดเมื่อสร้าง
ไฟล์สุดท้ายคือไฟล์ JS ที่สร้างขึ้นในปัจจุบันซึ่งได้รับข้อมูลคงที่
// ให้ data = {// avatar: '', avatar // ชื่อ: '', ชื่อผู้ใช้ // บริบท: '', เนื้อหาความคิดเห็น //} ให้ dataarr = []; ฟังก์ชั่นสุ่ม (len) {return math.random (). toString (36) .substr (len); "./resources/" + i%7 + ".jpg"; ให้ _name = Randomstr (20); ให้ _context = randomstr (2); dataarr.push ({avatar: _avator, ชื่อ: _name, บริบท: _context}); }} if (! dataarr.length) {initData ();} ฟังก์ชั่นการส่งออก getCommentData (url = '', params = null, issync = true, curpageIndex = 1, แต่ละหน้า = 7) { / * ajax * / let st = ให้ end = st + แต่ละหน้า; ส่งคืน dataarr.slice (st, end);} ฟังก์ชั่นการส่งออก getTotalCommentCount (url = '', params = null, issync = true) { / * ajax * / return dataarr.length;} ฟังก์ชั่นการส่งออก gettotalpagecount (url = '', params = null math.floor ((dataarr.length + aberspagesize -1) / แต่ละหน้า);}แค่นั้นแค่นั้น
ที่อยู่ GitHub