Aprendí Vue.js por un tiempo y lo usé para hacer 2 widgets y practicarlo.
Utilizo Webpack para empaquetarlo, así que estoy familiarizado con su uso.
El código fuente se coloca en la dirección GitHub al final del artículo.
Primero es index.html
<! DocType html> <html> <head> <title> página </title> <style type = "text/css"> * {margin: 0; relleno: 0; Font-Family: 'Open Sans', Arial, Sans-Serif; } .contianer {ancho: 50%; Altura: Auto; Margen: 20px Auto; } artículo {margen-bottom: 50px; } </style> </head> <body> <div class = 'Contianer'> <Artículo> Contenido de artículo ... </ artículo> <div id = 'main'> <pp> </pp> </div> </div> <script type = "text/javaScript" src = 'bundle.js'> </script> </body> </html>Puse el componente de la aplicación en <div id = 'main'> </div>
Después de empacar a través de Webpack, el archivo de entrada JS es Entry.js, que se utiliza para introducir el componente App.Vue
entry.js
Sea vue = require ('vue'); importación de importación de './components/app' ;let app_vue = new Vue ({el:' #main ', componentes: {app: app}});A continuación, echemos un vistazo a este componente de la aplicación
<style type = "text/css" Scoped> </style> <template> <comment: cur-page-index = "curpageIndex": evey-page-size = "everypagesize": comment-Url = "commentUrl": comment-params = "comment-sync =" commentissync "> </comment> <page: curpage-index. : Every-Page-size = "EveryPagesize": Page-URL = "Pageurl": Page-Params = "PageParams": Page-IS-Sync = "Pageissync"> </page> </template> <script type = "text/javaScript"> Importar comentario de './comment'; Página de importación de './page'; Exportar predeterminado {data () {return {curpageIndex: 1, EverypageSize: 7,}}, Components: {comentario: comentario, página: página},} </script>Tiene 2 componentes infantiles, a saber, comentario.vue y page.vue. Al vincular datos dinámicamente, realiza la comunicación de componentes entre padres e hijos. Creo que sí, para la página actualmente en la que se debe pasar a App.Vue, por lo que aquí usamos vinculación bidireccional, el resto como parámetros, URL, ISSYNC, es decir, cosas que solicitan datos de los antecedentes y si operan sincrónicamente o asíncronamente <del curso, no he probado los datos de fondo aquí, y actualmente generan datos estatales directamente mediante JS>.
A continuación, eche un vistazo al comentario. Vue Componente de comentarios
<style type = "text/css" Scoped> .Compt-Mask {opacidad: 0.5; } .comt-title {} .comt-line {width: 100%; Altura: 2px; Color de fondo: #CCC; margen: 10px 0; } .comt-wrap {} .comt-user {float: izquierda; } .comt-img {ancho: 34px; Altura: 34px; Border-Radius: 17px; } .comt-Context {margen: 0 0 0 60px; } .comt-name {color: #2b879e; margen-fondo: 10px; tamaño de fuente: 18px; } </style> <template> <div v-if = "haComment": class = "{'comt-Mask': carging}"> <h3 class = 'comt-title'> {{total totalCommentCount}} comentarios </h3> <div> </div> <div v-for = "comentario de commentarr"> <div> <iMg src = '{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{comment }}} '/> </div> <div> <p> {{{comment.name}} </p> <p> {{comment.context}} </p> </piv> <iv> </div> </div> './getData'; Exportar predeterminado {props: {curpageIndex: {type: number, predeterminado: 1,}, everyPageSize: {type: number, Number: 7,}, commentUrl: {type: string, default: '',}, commentParams: {type: object, default: null,}, commentIsSync: {type: boolean, predeterminado: true,},}, data () {) {) {) { TotalCommentCount: 0, HasComment: False, Loading: True,}}, COMPUTADO: {commentArR () {this.loading = true; Let Res = getCommentData (this.commentUrl, this.commentParams, this.commentIssync, this.curpageIndex, this.eachPageSize); this.loading = false; regresar res; },}, creado () {let cnt = getTotalCommentCount (this.commentUrl, this.commentParams); this.totalcommentCount = cnt; this.hascomment = cnt> 0; }} </script>El getData.js aquí se mencionará a continuación, que es donde obtenemos los datos.
Carga: el significado original es cargar una máscara de transparencia de 0.5 para el comentario actual cuando se carga el número de página, y luego AJAX cancelará la máscara a través de su función de devolución de llamada. Ahora, esto no se puede implementar, por lo que solo puede escribirlo por la fuerza, pero es inútil ...
HACO: Cuando el componente de comentarios se carga por primera vez, solicitamos obtener la longitud total de datos. Si no hay datos, el contenido de diseño del componente de comentarios no se mostrará.
・ CurpageIndex ・: pasó a través de la aplicación de componentes principales, utilizando accesorios
Establecimos un valor predeterminado y tipo de estos datos.
Page.vue
<style type = "text/css" Scoped> .page {text-align: center; margen: 30px; } .page-btn {color: gris; Color de fondo: blanco; borde: blanco; Ancho: 30px; Altura: 30px; margen: 5px; tamaño de fuente: 18px; Esquema: ninguno; } .page-btn-link {cursor: Crosshair; } .page-btn-active {borde: 1px gris sólido; 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 (PageDex) PageIndex}} </boton> </div> </template> <script type = "text/javaScript"> import {getTotalPageCount} desde './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,}, pageSsync: {type: boolean, default: true,}}, data () {return {}}, calculado: {pagearr () {let st = 1, end = this.totalPageCount, cur = this.curpPeNeDEx, aJcn = this.pageAJCn, Art = [], izquierda = Math.floor (AJCN / 2) = AJCN - Izquierda; if (end == 0 || cur == 0) {return arr; } else {console.log (st, end, cur, izquierda, derecha); arr.push (st); console.log (st+1, cur-left); if (st + 1 <cur - izquierda) {arr.push ('...'); } para (let i = math.max (cur - izquierda, st +1); i <= cur - 1; ++ i) {arr.push (i); } if (cur! = st) {arr.push (cur); } para (Sea i = cur + 1; i <= cur + right && i <= end - 1; ++ i) {arr.push (i); } if (cur + right <end - 1) {arr.push ('...'); } if (end! = cur) {arr.push (end); } return arr; }}}, Métodos: {ClickPage (CurIndex) {if (número.isinteger (curindex)) {this.curpageIndex = curindex; }}, checknum (curindex) {return number.isinteger (curindex); }}, creado () {this.totalPageCount = getTotalPageCount (this.PageUrl, this.PageParams, this.PageisSync, this.eachPagesiz); }} </script>Es principalmente un uso de eventos de componentes, = el evento de clics más común y el enlace entre clase y estilo. Compare de acuerdo con CurpageIndex y este. PageIndex para determinar si tiene esta clase. Use calculado para calcular los atributos para obtener la matriz de números de página porque cambiará de acuerdo con la página actual y calcule el número de página total cuando se crea.
El último es el archivo JS generado actualmente que obtiene datos estáticos.
// Let data = {// avatar: '', avatar // name: '', username // context: '', comment content //} let dataarr = []; function randomstr (len) {return math.random (). toString (36) .substr (len);} function initData () "./resources/" + i%7 + ".jpg"; Let _name = RandomStr (20); Let _context = RandomStr (2); dataarr.push ({avatar: _avator, nombre: _name, contexto: _context}); }} if (! dataarr.length) {initData ();} Función de exportación getCommentData (url = '', params = null, issync = true, curpageIndex = 1, ebrayPagesize = 7) { / * Ajax * / LET ST = (curpageIndex - 1) * EveryPagesize; Deje final = ST + EveryPagesize; return dataRarr.slice (st, end);} Exportar función getToTalCommentCount (url = '', params = null, isSync = true) { / * ajax * / return dataarr.length;} Exportar función getToTalPageCount (url = '', params = null, issync = numer Math.floor ((dataRarr.length + Everypagesize -1) / EveryPagesize);}Eso es todo.
dirección de github