Saya telah belajar vue.js untuk sementara waktu dan menggunakannya untuk membuat 2 widget dan mempraktikkannya.
Saya menggunakan webpack untuk mengemasnya, jadi saya terbiasa dengan penggunaannya.
Kode sumber ditempatkan pada alamat GitHub di akhir artikel.
Pertama adalah index.html
<! Doctype html> <html> <head> <title> halaman </iteme> <style type = "text/css"> * {margin: 0; Padding: 0; Font-Family: 'Open Sans', Arial, Sans-Serif; } .contianer {width: 50%; Tinggi: otomatis; Margin: 20px Auto; } artikel {margin-bottom: 50px; } </tyle> </head> <body> <div class = 'contianer'> <cart artikel> konten artikel ... </artikel> <div id = 'Main'> <pip> </app> </div> </div> <script type = "text/javascript" src = 'bundle.js'> </skrip </body> </html> </html>Saya menempatkan komponen aplikasi di <div id = 'main'> </div>
Setelah dikemas melalui Webpack, file entri JS adalah Entry.js, yang digunakan untuk memperkenalkan komponen app.vue
entri.js
Biarkan vue = memerlukan ('vue'); Impor aplikasi dari './components/app';let app_vue = vue baru ({el:' #main ', komponen: {app: app}});Selanjutnya, mari kita lihat komponen aplikasi ini
<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" : setiap halaman-ukuran = "setiap haleze": page-url = "pageUrl": page-params = "pageparams": page-is-sync = "pageissync"> </page> </pemplate> <script type = "text/javascript"> Impor komentar dari './comment'; halaman impor dari './page'; Ekspor default {data () {return {CurpageIndex: 1, masing -masing Halaman: 7,}}, komponen: {komentar: komentar, halaman: halaman},} </skrip>Ini memiliki 2 komponen anak, yaitu komentar.vue dan page.vue. Dengan data yang mengikat secara dinamis, ia melakukan komunikasi komponen orangtua-anak. Saya pikir demikian, untuk halaman yang saat ini di halaman mana yang harus diteruskan ke app.vue, jadi di sini kami menggunakan ikatan dua arah, sisanya seperti params, url, issync, yaitu, hal-hal yang meminta data dari latar belakang dan apakah akan beroperasi secara sinkron atau tidak secara langsung oleh JS>.
Selanjutnya, lihat komponen komentar komentar.vue
<style type = "text/css" scoped> .comt-mask {opacity: 0.5; } .comt-title {} .comt-line {width: 100%; Tinggi: 2px; Latar Belakang-Color: #CCC; Margin: 10px 0; } .comt-wrap {} .comt-user {float: left; } .comt-img {width: 34px; Tinggi: 34px; Border-Radius: 17px; } .comt-Context {margin: 0 0 0 60px; } .comt-name {Color: #2B879E; margin-bottom: 10px; font-size: 18px; }</style><template> <div v-if="hasComment" :class="{'comt-mask': loading}"> <h3 class='comt-title'>{{ totalCommentCount }} Comments</h3> <div></div> <div v-for="comment of commentArr"> <div> <img src='{{ comment.avatar }} '/> </div> <div> <p> {{comment.name}} </p> <p> {{comment.context}} </p> </div> <v div> </div> </div> </div> </lemplate> <script type = "teks/javaScript"> impor {script lript = "javaScript"> impor {script = "JavaScript"> './getData'; 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 {totalCommentCount: 0, hascomment: false, loading: true,}}, computed: {commentArr () {this.loading = true; Biarkan res = getCommentData (this.CommentUrl, this.CommentParams, this.commentissync, this.curpageIndex, this.eachPagesize); this.loading = false; Return Res; },}, dibuat () {let cnt = getTotalCommentCount (this.CommentUrl, this.CommentParams); this.totalcommentCount = cnt; this.hascomment = cnt> 0; }} </script>GetData.js di sini akan disebutkan di bawah ini, di situlah kami mendapatkan data.
Memuat: Arti asli adalah memuat topeng transparansi 0,5 untuk komentar saat ini ketika nomor halaman dimuat, dan kemudian Ajax akan membatalkan mask melalui fungsi panggilan baliknya. Sekarang ini tidak dapat diimplementasikan, jadi Anda hanya bisa menuliskannya dengan paksa, tetapi tidak berguna ..
HASCOMMENT: Ketika komponen komentar dimuat untuk pertama kalinya, kami meminta untuk mendapatkan total panjang data. Jika tidak ada data, konten tata letak komponen komentar tidak akan ditampilkan.
・ CurpageIndex ・: melewati aplikasi komponen induk, menggunakan alat peraga
Kami menetapkan nilai default dan jenis data ini.
page.vue
<style type = "text/css" scoped> .page {text-align: center; margin: 30px; } .page-btn {color: grey; Latar Belakang: Putih; Perbatasan: Putih; Lebar: 30px; Tinggi: 30px; margin: 5px; font-size: 18px; Garis Besar: Tidak Ada; } .page-btn-link {kursor: crosshair; } .page-btn-aktif {border: 1px solid grey; Border-Radius: 15px; } </style> <emplate> <div> <button v-for = "pageIndex dari pageArr" track-by = '$ index': class = "{'page-btn': true, 'page-btn-active': this.curpageIndex === pageIndex, 'page-btn-link': checknum (pageindex === pageIndex, 'page-btn-link': checknum (pageindex = {click" {clickpage = "click =" page- click = clock = clock = {{page- click = {{page-btn-btn (clock ": {page-btn-btn (click": clock (click-btn link ': page pageIndex}} </buttomer> </div> </pementrate> <script type = "text/javascript"> import {getTotalPageCount} dari './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: objek, default: null,}, pageissync: {type: boolean, default: true,}}, data () {return {}}, dihitung: {pageArr () {let st = 1, end = this.totalpagecount, cur = this.curpageIndex, ajcage = nageAbeAbeCount, cur = this.curpageIndex, ajcage. Math.floor (ajcn / 2), kanan = ajcn - kiri; if (end == 0 || cur == 0) {return arr; } else {console.log (st, end, cur, kiri, kanan); arr.push (ST); console.log (st+1, cur-left); if (st + 1 <cur - kiri) {arr.push ('...'); } untuk (biarkan i = math.max (cur - kiri, st +1); i <= cur - 1; ++ i) {arr.push (i); } if (cur! = st) {arr.push (cur); } untuk (biarkan i = cur + 1; i <= cur + kanan && i <= end - 1; ++ i) {arr.push (i); } if (cur + kanan <end - 1) {arr.push ('...'); } if (end! = cur) {arr.push (end); } return arr; }}}, metode: {clickPage (CurIndex) {if (number.isInteger (CurIndex)) {this.curpageIndex = CurIndex; }}, checknum (CurIndex) {return number.isInteger (CurIndex); }}, dibuat () {this.totalPageCount = getTotalPageCount (this.pageUrl, this.pageParams, this.pageissync, this.eachPagesiz); }} </script>Ini terutama penggunaan acara komponen, = acara klik yang paling umum, dan ikatan antara kelas dan gaya. Bandingkan sesuai dengan CurpageIndex dan This.pageIndex untuk menentukan apakah Anda memiliki kelas ini. Gunakan dihitung untuk menghitung atribut untuk mendapatkan array nomor halaman karena akan berubah sesuai dengan halaman saat ini, dan menghitung nomor halaman total saat dibuat.
Yang terakhir adalah file JS yang saat ini dihasilkan yang mendapatkan data statis.
// Biarkan data = {// avatar: '', avatar // name: '', username // konteks: '', Konten komentar //} let DataArr = []; function acak (len) {return math.random (). ToString (36) .substr (len) {function math.random (). "./resources/" + i%7 + ".jpg"; Misalkan _name = randomstr (20); Biarkan _context = randomstr (2); dataArr.push ({avatar: _avator, nama: _name, konteks: _context}); }} if (! DataArr.length) {initData ();} Fungsi Ekspor getCommentData (url = '', params = null, issync = true, curpageIndex = 1, masing -masingPageSize = 7) { / * Ajax * / let st = (Curpageindex - 1) * di masing -masing; Biarkan end = st + setiap orang; return DataArr.slice (st, end);} Fungsi ekspor getTotalCommentCount (url = '', params = null, issync = true) { / * ajax * / return datar.length;} fungsi ekspor getTotalPagecount (url = '', params = null, issync = masing -masing Math.floor ((dataRr.length + setiap orang -1) / setiap orang);}Itu saja.
Alamat GitHub