J'ai appris Vue.js pendant un certain temps et je l'ai utilisé pour faire 2 widgets et le pratiquer.
J'utilise WebPack pour l'emballer, donc je connais son utilisation.
Le code source est placé sur l'adresse GitHub à la fin de l'article.
Le premier est index.html
<! Doctype html> <html> <éad- head> <itle> Page </ title> <style type = "text / css"> * {margin: 0; rembourrage: 0; Font-Family: «Open Sans», Arial, Sans-Serif; } .contianer {largeur: 50%; Hauteur: Auto; marge: 20px automatique; } Article {margin-boot: 50px; } </ style> </ head> <body> <div class = 'Contianer'> <article> contenu de l'article ... </barting> <div id = 'main'> <pp> </pp> </div> </div> <script type = "Text / javascript" src = 'bundle.js'> </cript> </body> </html>Je mets le composant d'application dans <div id = 'main'> </div>
Après l'emballage via WebPack, le fichier JS Entrée est entrée.js, qui est utilisé pour introduire le composant app.vue
entrée.js
LET VUE = BESOIN ('VUE'); Importer l'application de './Components/App';let app_vue = new Vue ({el:' #main ', composants: {app: app}});Ensuite, jetons un coup d'œil à ce composant d'application
<style type = "Text / CSS" Scoped> </ Style> <piltlate> <commentaire: Cur-Page-Index = "CurPageIndex": Every-Page-SIZE = "CHAMEPAGESIZE": comment-Url = "CommentUrl": commentaire-params = "commentparams": comment-is-sync = "commentissync"> </ commentaire> <Page: Cur-Page-IdEx : chaque pages-size = "chaquePageSize": page-url = "pageurl": page-params = "pageParams": page-is-sync = "pageissync"> </ page> </ template> <script type = "text / javascript"> Importer un commentaire de './comiment'; Importez la page de './Page'; Exporter default {data () {return {CurpageIndex: 1, EveryPageSize: 7,}}, composants: {commentaire: commentaire, page: page},} </cript>Il a 2 composants enfants, à savoir comment.vue et page.vue. En liant dynamiquement les données, elle effectue une communication des composants parent-enfant. Je pense que oui, pour la page actuellement sur quelle page doit être transmise à app.vue, donc nous utilisons ici la liaison bidirectionnelle, les autres tels que params, URL, issync, c'est-à-dire des choses qui demandent des données de l'arrière-plan et de fonctionner de manière synchrone ou de manière asynchrone <bien sûr, je n'ai pas testé les données de fond ici, et généré actuellement des données statiques directement par js>.
Ensuite, jetez un œil à la composante commentaire comment.vue
<style type = "Text / CSS" Scoped> .comt-mask {Opacity: 0.5; } .comt-title {} .comt-line {width: 100%; hauteur: 2px; Color d'arrière-plan: #ccc; marge: 10px 0; } .comt-wrap {} .comt-user {float: left; } .comt-iMg {width: 34px; hauteur: 34px; Border-Radius: 17px; } .comt-context {margin: 0 0 0 60px; } .comt-name {couleur: # 2b879e; marge-fond: 10px; taille de police: 18px; } </ style> <mpelate> <div v-if = "hascomment": class = "{'comt-mask': charging}"> <h3 class = 'comt-title'> {{totalcommentCount}} commentaires </h3> <div> </ div- div-v-for = "commentarr"> <div> <img Src = '{{comment.avat. }} '/> </ div> <div> <p> {{comment.name}} </p> <p> {{comment.context}} </p> </div> <v> </div> </div> </div> </ template> <script type = "TextCount} De «./getdata»; Exporter par défaut {accessoires: {CurpageIndex: {type: nombre, par défaut: 1,}, chaquePageSize: {type: nombre, par défaut: 7,}, commentUrl: {type: string, par défaut: '',}, commentparams: {type: objet, par défaut: null,}, commentISSync: {type: booolean, par défaut: true,},}, data () TotalCommentCount: 0, Hascomment: false, chargement: true,}}, calculé: {commentarr () {this.loading = true; Selt Res = GetCommentData (this.comMenturl, this.commentParams, this.comMentissync, this.curpageIndex, this.eachPageSize); this.loading = false; return res; },}, créé () {let cnt = getTotalCommentCount (this.comMenturl, this.commentParams); this.totalcommentCount = cnt; this.hascomment = cnt> 0; }} </ script>Le getData.js ici sera mentionné ci-dessous, où nous obtenons les données.
Chargement: la signification d'origine est de charger un masque de transparence de 0,5 pour le commentaire actuel lorsque le numéro de page est chargé, puis Ajax annulera le masque via sa fonction de rappel. Maintenant, cela ne peut pas être mis en œuvre, vous ne pouvez donc l'écrire que par la force, mais c'est inutile.
Hascomment: Lorsque le composant de commentaire est chargé pour la première fois, nous demandons d'obtenir la longueur totale des données. S'il n'y a pas de données, le contenu de mise en page des composants de commentaire ne sera pas affiché.
・ CurpageIndex ・: passé par l'application de composant parent, en utilisant des accessoires
Nous définissons une valeur par défaut et un type de ces données.
page.vue
<style type = "Text / CSS" Scoped> .Page {Text-Align: Centre; marge: 30px; } .page-btn {couleur: gris; Color d'arrière-plan: blanc; Border: blanc; Largeur: 30px; hauteur: 30px; marge: 5px; taille de police: 18px; Aperçu: aucun; } .page-btn-link {Cursor: Crosshair; } .page-btn-active {border: 1px gris solide; Border-Radius: 15px; } </ style> <mpelate> <div> <Button V-for = "PageIndex de Pagearr" Track-by = '$ index': class = "{'page-btn': true, 'page-btn-liking': this.curpageIndex === @ click =" clique }} </ bouton> </ div> </ template> <script type = "text / javascript"> import {getTotalPageCount} de './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: { type: Object, default: null,}, pageIsSync: {type: boolean, default: true,}}, data () {return {}}, calculé: {pagearr () {let st = 1, end = this.totalpageCount, cur = this.curpageIndex, ajcn = this.pageajcn, arr = [], gauche = math.for = ajcn - gauche; if (end == 0 || cur == 0) {return arr; } else {console.log (st, end, cur, gauche, droite); Arr.push (ST); console.log (ST + 1, cur-left); if (st + 1 <cur - gauche) {arr.push ('...'); } pour (let i = math.max (cur - gauche, st + 1); i <= cur - 1; ++ i) {arr.push (i); } if (cur! = st) {arr.push (cur); } pour (Soit i = cur + 1; i <= cur + droit && i <= end - 1; ++ i) {arr.push (i); } if (cur + droit <end - 1) {arr.push ('...'); } if (end! = cur) {arr.push (end); } return arr; }}}, méthodes: {clickpage (curindex) {if (nombre.isInteger (curindex)) {this.curpageIndex = cinUNDEX; }}, CheckNum (curindex) {return numéro.IsInteger (curintex); }}, créé () {this.totalpageCount = getTotalPageCount (this.pageUrl, this.pageParams, this.pageissync, this.eachPagesiz); }} </ script>Il s'agit principalement d'une utilisation des événements de composants, = l'événement de clic le plus courant et la liaison entre la classe et le style. Comparez-le selon CurpageIndex et this.pageIndex pour déterminer si vous avez cette classe. Utilisez calculé pour calculer les attributs pour obtenir le tableau de numéro de page car il changera en fonction de la page en cours et calculez le numéro de page total lors de la création.
Le dernier est le fichier JS actuellement généré qui obtient des données statiques.
// Let Data = {// Avatar: '', Avatar // Name: '', nom d'utilisateur // Context: '', commentaire Contenu //} LET DATAARR = []; fonction RandomStr (Len) {return Math.Random (). TOSTRING (36) .substr (len);} fonction initata () {pour (var i = 0; i <45; "./resources/" + i% 7 + ".jpg"; Soit _Name = RandomStr (20); Soit _Context = RandomStr (2); dataarr.push ({avatar: _avator, name: _name, contexte: _context}); }} if (! dataarr.length) {initData ();} fonction d'exportation getCommentData (url = '', params = null, issync = true, curpageIndex = 1, chaquePageSize = 7) {/ * ajax * / let st ST = (CurPageIndex - 1) * chaque pages de page; LET END = ST + CHAQUEPAGESIZE; return dataarr.slice (st, end);} fonction d'exportation getTotalCommentCount (url = '', params = null, issync = true) {/ * ajax * / return dataarr.length;} function export getTotalPageCount (url = '', params = null, issync = true, chaquepagesize = 7) {/ * ajax * / retour Math.floor ((dataarr.length + everyPageSize -1) / everyPageSize);}C'est ça.
Adresse GitHub