Ich habe Vue.js schon eine Weile gelernt und es benutzt, um 2 Widgets zu machen und es zu üben.
Ich benutze WebPack, um es zu verpacken, damit ich mit seiner Verwendung vertraut bin.
Der Quellcode wird am Ende des Artikels an der Github -Adresse platziert.
Erstens ist index.html
<! DocType html> <html> <kopf> <titels> Seite </title> <style type = "text/css"> * {margin: 0; Polsterung: 0; Schriftfamilie: "Open Sans", Arial, Sans-Serif; } .Contianer {Breite: 50%; Höhe: Auto; Rand: 20px Auto; } Artikel {Margin-Bottom: 50px; } </style> </head> <body> <div class = 'contianer'> <Artikel> Artikelinhalt ... </article> <div id = 'main'> <app> </app> </div> </div> <script type = "text/javascript"Ich habe die App -Komponente in <div id = 'main'> </div> eingebaut
Nach dem Verpacken über WebPack ist die Eintrags -JS -Datei Eintrags.js, mit der die App.vue -Komponente eingeführt wird
Eintrag.js
Sei Vue = Request ('vue'); App von './Components/App'let App_vue = new Vue ({el:' #main ', Komponenten: {app: app}});Schauen wir uns als nächstes diese App -Komponente an
<style type="text/css" scoped> </style><template> <comment :cur-page-index="curPageIndex" :each-page-size="eachPageSize" :comment-url="commentUrl" :comment-params="commentParams" :comment-is-sync="commentIsSync"> </comment> <page :cur-page-index.sync="curPageIndex" : Ever-Page-Größe = "EverpageSize": Page-url = "pageurl": page-params = "pageParams": page-is-sync = "pageISSync"> </page> </vorlage> <script type = "text/javaScript"> Kommentar von './Coment'; Seite von './page' importieren; Exportieren Sie Standard {data () {return {curpageIndex: 1, EverpageSize: 7,}}, Komponenten: {Kommentar: Kommentar, Seite: Seite},} </script>Es verfügt über 2 untergeordnete Komponenten, nämlich Kommentare.Vue und Page.vue. Durch dynamisch Bindungsdaten führt es die Kommunikation über Eltern-Kind-Komponenten durch. Ich denke, für die Seite, die derzeit an App.vue übergeben werden soll, verwenden wir hier zwei Wegebindung, den Rest wie Params, URL, ISSync, dh Dinge, die Daten aus dem Hintergrund anfordern und ob synchron oder asynchron sind <natürlich habe ich die Hintergrunddaten hier nicht getestet und erzeugt derzeit statische Daten direkt von JS>.
Schauen Sie sich als nächstes den Kommentar an.
<style type = "text/css" Scoped> .comt-Maske {Opazität: 0,5; } .comt-title {} .comt-line {width: 100%; Höhe: 2px; Hintergrundfarbe: #CCC; Rand: 10px 0; } .COMP-WRAP {} .COMT-User {float: links; } .comt-img {width: 34px; Höhe: 34px; Border-Radius: 17px; } .comt-context {Margin: 0 0 0 60px; } .com-name {color: #2b879e; Randboden: 10px; Schriftgröße: 18px; } </style> <template> <div v-if = "hasCompment": class = "{'comt-mask': laden}"> <h3 class = 'comt-title'> {{TOTHERCOMMENTCORDCOUNT}} Kommentare </H3> </div> <div-v-for = {{{{{} comment.} <div} <divs} <divs} <img} <img} <img. </div> <div> <p> {{{comment.name}} </p> <p> {{{comment.context}} </p> </div> <div> </div> </div> </div> </template> <script type = "text/JavaScript"> Import {GetCompmentData; export default { props: { curPageIndex: { type: Number, default: 1, }, eachPageSize: { type: Number, default: 7, }, commentUrl: { type: String, default: '', }, commentParams: { type: Object, default: null, }, commentIsSync: { type: Boolean, default: true, }, }, data () { return {totalCompmentCount: 0, hasComent: false, laden: true,}}, berechnet: {commentarr () {this.loading = true; lass res = getCompmentData (this.commenturl, this.commentParams, this.crentissync, this.curpageIndex, this.eachpageSize); this.loading = false; return res; },}, erstellt () {let cnt = GetTotalComentCount (this.commenturl, this.commentParams); this.totalComentCount = cnt; this.hasCompment = cnt> 0; }} </script>Die GetData.js hier werden unten erwähnt, wo wir die Daten erhalten.
Laden: Die ursprüngliche Bedeutung besteht darin, eine Transparenzmaske von 0,5 für den aktuellen Kommentar zu laden, wenn die Seitennummer geladen wird, und dann wird Ajax die Maske über ihre Rückruffunktion abbrechen. Nun kann dies nicht implementiert werden, sodass Sie es nur mit Gewalt aufschreiben können, aber es ist nutzlos.
HASCOMENT: Wenn die Kommentarkomponente zum ersten Mal geladen wird, fordern wir die Gesamtdatenlänge an. Wenn es keine Daten gibt, wird der Inhalt des Kommentarkomponentenlayouts nicht angezeigt.
・ CurpageIndex ・: Mithilfe der übergeordneten Komponenten -App durch die übergeordnete App übertragen
Wir setzen einen Standardwert und einen Typ dieser Daten.
Seite.Vue
<style type = "text/css" Scoped> .PAGE {text-align: center; Rand: 30px; } .PAGE-BTN {Farbe: Grau; Hintergrundfarbe: weiß; Grenze: weiß; Breite: 30px; Höhe: 30px; Rand: 5px; Schriftgröße: 18px; Umriss: Keine; } .page-btn-link {Cursor: Crosshair; } .PAGE-BTN-Active {Border: 1px Festgrau; Border-Radius: 15px; }</style><template> <div> <button v-for="pageIndex of pageArr" track-by='$index' :class="{'page-btn': true, 'page-btn-active': this.curPageIndex === pageIndex, 'page-btn-link': checkNum(pageIndex)}" @click="clickPage(pageIndex)" > {{ pageIndex }} </button> </div> </template> <script type = "text/javaScript"> import {getTotalPageCount} von './getData'; export default { props: { totalPageCount: { type: Number, default: 0, }, curPageIndex: { type: Number, default: 1, }, eachPageSize: { type: Number, default: 7, }, pageAjcn: { type: Number, default: 4, }, pageUrl: { type: String, default: '', }, pageParams: { Typ: Objekt, Standard: null,}, pageisSync: {Typ: boolean, Standard: true,}}, data () {return {}}, berechnet: {pagearr () {let st = 1, end = this.totalpageCount, cur = this.curpageIndex, links, ajcn = this.tht this.tht this.tHn. Math.floor (ajcn / 2), rechts = ajcn - links; if (end == 0 || cur == 0) {return arr; } else {console.log (st, Ende, cur, links, rechts); arr.push (ST); console.log (ST+1, links); if (st + 1 <cur - links) {arr.push ('...'); } für (let i = math.max (cur - links, st +1); i <= cur - 1; ++ i) {arr.push (i); } if (cur! = st) {arr.push (cur); } für (lass i = cur + 1; i <= cur + rechts && i <= end - 1; ++ i) {arr.push (i); } if (cur + rechts <end - 1) {arr.push ('...'); } if (end! = cur) {arr.push (Ende); } return arr; }}}, Methoden: {ClickPage (curIndex) {if (number.issinterger (curIndex)) {this.curpageIndex = curIndex; }}, checkNum (curIndex) {return number.issinterger (curIndex); }}, erstellt () {this.totalPageCount = getTotalPageCount (this.pageurl, this.pageParams, this.pageSync, this.eachpagesiz); }} </script>Es handelt sich hauptsächlich um eine Verwendung von Komponentenereignissen, = das häufigste Klickereignis und die Bindung zwischen Klasse und Stil. Vergleichen Sie es nach CurpageIndex und this.pageIndex, um festzustellen, ob Sie diese Klasse haben. Verwenden Sie berechnet, um die Attribute zu berechnen, um das Seitennummer -Array zu erhalten, da sich sie entsprechend der aktuellen Seite ändert, und die Gesamtseitennummer beim Erstellen zu berechnen.
Die letzte ist die derzeit generierte JS -Datei, die statische Daten erhält.
// lass data = {// avatar: '', avatar // name: '', username // context: '', Kommentarinhalt //} lass Dataarr = []; = "./resources/" + i%7 + ".jpg"; sei _name = randomstr (20); sei _context = randomstr (2); Dataarr.push ({avatar: _avator, Name: _name, Kontext: _context}); }} if (! dataarr.length) {initdata ();} Exportfunktion getComportData (url = '', params = null, isSync = true, curpageIndex = 1, jederpageSize = 7) { / * ajax * / let st = (curpageIndex - 1) * EveryPageSize; Sei end = st + EveryPageSize; return dataarr.lice (ST, Ende);} Exportfunktion GetTotalCompomentCount (url = '', params = null, issync = true) { / * ajax * / return dataarr.length;} exportfunktion GetToTalPageCount (url = ', params = null, isync = true, jederpage = true, jeweils true, jeweils true, jeweils true, jeweils true, jeweils, jewpages, jewies Math.floor ((dataarr.length + jederDas war's.
Github -Adresse