Eu aprendi o vue.js por um tempo e o usei para fazer 2 widgets e praticá -lo.
Eu uso o WebPack para empacotá -lo, por isso estou familiarizado com seu uso.
O código -fonte é colocado no endereço do GitHub no final do artigo.
Primeiro é index.html
<! Doctype html> <html> <head> <title> página </title> <style type = "text/css"> * {margin: 0; preenchimento: 0; Fonte-família: 'Open Sans', Arial, Sans-Serif; } .Contianer {Width: 50%; Altura: Auto; margem: 20px automático; } Artigo {margin-Bottom: 50px; } </style> </head> <body> <div class = 'contianer'> <artigo> Conteúdo do artigo ... </artigo> <div id = 'main'> <pp> </app> </div> </div> <script type = "text/javascript" src = 'pacote.js'> </script> </body> </html "Eu coloquei o componente do aplicativo em <div id = 'main'> </div>
Após a embalagem através do WebPack, o arquivo JS de entrada é Entry.js, que é usado para introduzir o componente do app.vue
Entry.js
Seja vue = requer ('vue'); importar aplicativo de './components/App'; Let App_vue = new Vue ({el:' #Main ', componentes: {App: App}});Em seguida, vamos dar uma olhada neste componente de aplicativo
<style type = "text/css" scoped> </style> <modemplate> <Comentário: cur-pape-index = "curpageIndex": cada página-size = "cadaPagesize": comentário-url = "comentário": comentário-params = "comentário": com comentário-isc = "" CommentStyn: </Comment-Pams = "CommentParams": is-sync = "" : cada página-size = "cadaPagesize": página-url = "pageurl": Page-params = "PageParams": página-iss-sync = "Pageissync"> </page> </modemplate> <script type = "text/javascript"> importar comentário de './comment'; página de importação de './page'; exportar default {data () {return {curpageIndex: 1, cadaPagesize: 7,}}, componentes: {Comentário: Comentário, página: página},} </sCript>Possui 2 componentes filhos, nomeadamente comentários.vue e page.vue. Por dados de ligação dinamicamente, ele conduz a comunicação entre pais e filhos. Acho que sim, para a página atualmente em qual página deve ser passada para o app.vue, então aqui usamos a ligação bidirecional, o restante como params, URL, ISSync, ou seja, coisas que solicitam dados do plano de fundo e se devem operar síncrono ou assíncrono, não testei os dados de antecedentes e atualmente geram estáticos diretamente.
Em seguida, dê uma olhada no componente de comentário.
<style type = "text/css" scoped> .comt-mask {opacity: 0.5; } .comt-title {} .comt-line {width: 100%; Altura: 2px; Background-Color: #CCC; margem: 10px 0; } .comt-wrap {} .comt-user {float: esquerda; } .comt-img {width: 34px; Altura: 34px; Radio de fronteira: 17px; } .comt-Context {margem: 0 0 0 60px; } .comt-name {color: #2b879e; Margin-Bottom: 10px; Size da fonte: 18px; } </style> <modemplate> <div v-if = "hasComment": class = "{'comt-mask': carregamento}"> <h3 class = 'comt-title'> {{totalCommentCount}} Comentários </h3> </div> <div> <p> {{Comment.name}} </p> <p> {{Comment.context}} </p> </div> <div> </div> </div> </divataMentDalM) exportar padrão {props: {curpageIndex: {type: número, padrão: 1,}, cadaPagesize: {type: número, padrão: 7,}, comentário: {type: string, padrão: '',}, comentário: {type: objeto, objeto: null,},},}, {{{{{{{{{{{{{{{{{é {TotalCommentCount: 0, Hascomment: false, carregamento: true,}}, computado: {commentarr () {this.loading = true; Let Res = getCommentData (this.commentUrl, this.commentParams, this.commentissync, this.curpageIndex, this.eachPagesize); this.loading = false; retornar res; },}, criou () {let cnt = getTotalCommentCount (this.comMenturl, this.commentParams); this.TotalCommentCount = cnt; this.hascomment = cnt> 0; }} </script>O getData.js aqui será mencionado abaixo, que é onde obtemos os dados.
Carregando: o significado original é carregar uma máscara de transparência de 0,5 para o comentário atual quando o número da página for carregado e, em seguida, o Ajax cancelará a máscara por meio de sua função de retorno de chamada. Agora isso não pode ser implementado, então você só pode anotar pela força, mas é inútil ..
Hascomment: quando o componente de comentários é carregado pela primeira vez, solicitamos obter o comprimento total dos dados. Se não houver dados, o conteúdo do layout do componente de comentários não será exibido.
・ CurpageIndex ・: Passado através do aplicativo componente pai, usando adereços
Definimos um valor padrão e tipo desses dados.
Page.vue
<style type = "text/css" scoped> .page {text-align: Center; margem: 30px; } .Page-btn {color: Gray; cor de fundo: branco; fronteira: branco; Largura: 30px; Altura: 30px; margem: 5px; Size da fonte: 18px; Esboço: Nenhum; } .Page-btn-link {cursor: mira; } .Page-btn-attive {Border: 1px Solid Grey; Radio de fronteira: 15px; } </style> <modemplate> <div> <button v-for = "PageIndex de pagearr" track-by = '$ index': class = "{'Page-btn': true, 'Page-btn-Active': this.curPageIndEx === PageIndex, 'Page-Btn-link': CheckNex (INDIMEX) (PageNeTex (PageNeTex (PageNeTex (PageNeTex (PageNeTex (PageNeTex) (PageNeTex (PageNeTex (PageNeTex (PageNeTex) (PageNeNeTex (PageNeTex (PageNeTex (PageNeTex (PageNeTex (PageNeTex): }} </button> </div> </modemplate> <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 { } }, computed: { pageArr () { let st = 1, end = this.totalPageCount, cur = this.curPageIndex, ajcn = this.pageAjcn, arr = [], left = Math.floor(ajcn / 2), direita = AJCN - Esquerda; if (end == 0 || cur == 0) {return arr; } else {console.log (st, fim, cur, esquerda, direita); Arr.push (ST); console.log (ST+1, Cur-Left); if (st + 1 <cur - esquerda) {arr.push ('...'); } para (let i = math.max (curs - esquerda, st +1); i <= cur - 1; ++ i) {arr.push (i); } if (cur! = st) {arr.push (cur); } para (let i = cur + 1; i <= cur + direita && i <= end - 1; ++ i) {arr.push (i); } if (cur + direita <end - 1) {arr.push ('...'); } if (end! = cur) {arr.push (end); } retornar arr; }}}, métodos: {clickpage (curindex) {if (number.isInteger (curindex)) {this.curpageIndex = Curindex; }}, checkNum (Curindex) {return number.isInteger (Curindex); }}, criado () {this.TotalPageCount = getTotalPageCount (this.pageurl, this.pageparams, this.pageissync, this.eachpagesiz); }} </script>É principalmente um uso de eventos de componentes, = o evento de clique mais comum e a ligação entre classe e estilo. Compare -o de acordo com o CurPageIndex e este.PageIndex para determinar se você tem essa classe. Use calculado para calcular os atributos para obter a matriz de número da página, pois ele mudará de acordo com a página atual e calcule o número total da página quando criado.
O último é o arquivo JS atualmente gerado que obtém dados estáticos.
// deixe dados = {// avatar: '', avatar // nome: '', nome de usuário // context: '', comente content //} let Dataarr = []; function Randomstr (len) {return Math.random (). "./resources/" + i%7 + ".jpg"; Seja _name = Randomstr (20); Seja _Context = Randomstr (2); Dataarr.push ({Avatar: _avator, nome: _name, contexto: _context}); }} if (! Dataarr.Length) {initdata ();} função de exportação getCommentData (url = '', params = null, issync = true, curpageIndex = 1, cadaPagesize = 7) { / * ajax * / let (CurPageIndex - 1) * cadaPagesize; deixe end = st + cadaPagesize; retornar dataarr.slice (st, end);} função de exportação getToTalCommentCount (url = '', params = null, issync = true) { / * ajax * / return dataarr.length;} exportação função getTotalPagEcount (url = ', params = null, IssynyAnC = e cada vez mais Math.Floor ((Dataarr.Length + cadaPagesize -1) / cadaPagesize);}É isso.
Endereço do GitHub