لقد تعلمت vue.js لفترة من الوقت واستخدمته لصنع 2 عنصر واجهة مستخدم وممارسةها.
أستخدم WebPack لتعبئته ، لذلك أنا على دراية باستخدامه.
يتم وضع رمز المصدر على عنوان جيثب في نهاية المقالة.
الأول هو index.html
<! doctype html> <html> <head> <title> صفحة </title> <style type = "text/css"> * {margin: 0 ؛ الحشو: 0 ؛ Font-Family: "Open Sans" ، Arial ، Sans-Serif ؛ } .contianer {width: 50 ٪ ؛ الارتفاع: السيارات ؛ الهامش: 20 بكسل Auto ؛ } المادة {margin-bottom: 50px ؛ } </style> </head> <body> <div class = 'contianer'> <article> محتوى المقالة ... </article> <div id = 'main'> <app> </app> </div> </viv> <script type = "text/javaScript" src = 'backdle.js'> </proct> </body> </htmlأضع مكون التطبيق في <div id = 'main'> </viv>
بعد التغليف من خلال WebPack ، يكون ملف الإدخال js هو intern.js ، والذي يتم استخدامه لتقديم مكون app.vue
enter.js
دع vue = require ('vue') ؛ استيراد التطبيق من '.بعد ذلك ، دعونا نلقي نظرة على مكون التطبيق هذا
<style type = "text/css" scoped> </style> <قالب> <التعليق: cur-page-index = "curpageIndex": كل صفحة size-sived = "earypagesize": comment-url = "commenturl": comparams = "commentParams": comment-is-sync = "commentissync : كل صفحة size = "earypagesize": page-url = "pageurl": page-params = "pageparams": page-iS-sync = "pageissync"> </ استيراد صفحة من './page' ؛ التصدير الافتراضي {data () {return {curpageindex: 1 ، earyPagesize: 7 ،}} ، المكونات: {تعليق: التعليق ، الصفحة: الصفحة} ،} </script>يحتوي على مكونان للأطفال ، وهما التعليق. من خلال البيانات الملزمة ديناميكيا ، فإنه يجري اتصال المكون من الوالدين والطفل. أعتقد ذلك ، بالنسبة للصفحة التي يجب أن يتم نقلها حاليًا إلى App.vue ، لذلك نستخدم هنا الربط ثنائي الاتجاه ، والباقي مثل params ، و url ، و issync ، أي الأشياء التي تطلب بيانات من الخلفية وما إذا كنت تعمل بشكل متزامن أو بشكل متزامن <بالطبع ، لم أختبر بيانات الخلفية هنا حاليًا.
بعد ذلك ، ألق نظرة على مكون التعليق.
<style type = "text/css" scoped> .comt-mask {opacity: 0.5 ؛ } .comt-title {} .dline-line {width: 100 ٪ ؛ الارتفاع: 2px ؛ خلفية اللون: #CCC ؛ الهامش: 10px 0 ؛ } .comt-wrap {} .comt-user {float: left ؛ } .comt-img {width: 34px ؛ الارتفاع: 34 بكسل ؛ الحدود الراديوس: 17px ؛ } .comt-context {margin: 0 0 0 60px ؛ } .comt-name {color: #2b879e ؛ هامش القاع: 10 بكسل ؛ حجم الخط: 18 بكسل ؛ } </style> <implate> <div v-if = "hascomment": class = "{'comt Mask': Loading}"> <h3 class = 'comt-title'> {{totalCommentCount}}}} }} '/> </div> <viv> <p> {{comment.name}}} </p> <p> {{comment.context}} </p> </viv> <viv> </viv> </viv> </viv> </fumptalate> <script type = javascript './getData' ؛ تصدير الافتراضي {props: {curpageIndex: {type: number ، الافتراضي: 1 ،} ، كل شيء: {type: number ، الافتراضي: 7 ،} ، commenturl: {type: string ، default: '' ،} ، commentparams: {type: jould: return {totalCommentCount: 0 ، hascomment: false ، loading: true ،}} ، compated: {commentArr () {this.loading = true ؛ دع res = getCommentData (this.commenturl ، this.commentparams ، this.commentissync ، this.curpageIndex ، this.eachpagesize) ؛ this.loading = false ؛ عودة الدقة ؛ } ،} ، تم إنشاؤه () {let cnt = getTotalCommentCount (this.commenturl ، this.commentparams) ؛ this.totalcommentCount = cnt ؛ this.hascomment = cnt> 0 ؛ }} </script>سيتم ذكر GetData.js هنا أدناه ، وهو المكان الذي نحصل فيه على البيانات.
التحميل: المعنى الأصلي هو تحميل قناع شفافية 0.5 للتعليق الحالي عند تحميل رقم الصفحة ، ثم يقوم Ajax بإلغاء القناع من خلال وظيفة رد الاتصال. الآن لا يمكن تنفيذ هذا ، لذلك يمكنك فقط كتابته بالقوة ، لكنه عديم الفائدة ..
hascomment: عندما يتم تحميل مكون التعليق لأول مرة ، نطلب الحصول على إجمالي طول البيانات. إذا لم يكن هناك بيانات ، فلن يتم عرض محتوى تخطيط مكون التعليق.
・ curpageindex ・: تم تمريره عبر تطبيق المكون الأصل ، باستخدام الدعائم
قمنا بتعيين قيمة افتراضية ونوع هذه البيانات.
page.vue
<style type = "text/css" scoped> .page {text-align: center ؛ الهامش: 30 بكسل ؛ } .page-btn {color: Gray ؛ خلفية اللون: أبيض. الحدود: أبيض. العرض: 30 بكسل ؛ الارتفاع: 30 بكسل ؛ الهامش: 5px ؛ حجم الخط: 18 بكسل ؛ الخطوط العريضة: لا شيء ؛ } .page-btn-link {cursor: crosshair ؛ . الحدود الحدودية: 15 بكسل ؛ } </style> <implate> <viv> <button v-for = "pageIndex of pagearr" track-by = '$ index': class = "{'page-btn': true ، 'page-btn-active': this.curpageindex === pageIndex ، 'page-btn-link': checknum (pageindex)} }} </button> </viv> </mapplate> <script type = "text/javaScript"> import {getTotalPageCount} من './getData' ؛ التصدير الافتراضي {props: {totalPageCount: {type: number ، الافتراضي: 0 ،} ، curpageindex: {type: number ، الافتراضي: 1 ،} ، alyspagesize: {type: number ، default: 7 ،} ، pageajcn اكتب: كائن ، افتراضي: null ،} ، pageissync: {type: boolean ، الافتراضي: صواب ،}} ، data () {return {}} ، حساب: {pagearr () {let st = 1 ، end = this.totalpagecount ، cur = this.curpageindex ، ajcn = Math.Floor (Ajcn / 2) ، يمين = ajcn - اليسار ؛ if (end == 0 || cur == 0) {return arr ؛ } آخر {console.log (st ، end ، cur ، اليسار ، يمين) ؛ arr.push (ST) ؛ console.log (ST+1 ، cur-left) ؛ if (st + 1 <cur - left) {arr.push ('...') ؛ } لـ (دع i = math.max (cur - left ، st +1) ؛ i <= cur - 1 ؛ ++ i) {arr.push (i) ؛ } if (cur! = st) {arr.push (cur) ؛ } لـ (دع 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) ؛ } إرجاع arr ؛ }}} ، الأساليب: {clickPage (curindex) {if (number.isinteger (curindex)) {this.curpageIndex = curindex ؛ }} ، checkNum (curindex) {return number.isinteger (curindex) ؛ }} ، تم إنشاؤه () {this.totalPageCount = getTotalPageCount (this.pageurl ، this.pageParams ، this.pageissync ، this.eachpagesiz) ؛ }} </script>إنه في الأساس استخدام أحداث المكون ، = حدث النقر الأكثر شيوعًا ، والربط بين الفصل والأناقة. قارنه وفقًا لـ CurpageIndex و This.PageIndex لتحديد ما إذا كان لديك هذا الفئة. استخدم حسابًا لحساب السمات للحصول على صفيف رقم الصفحة لأنه سيتغير وفقًا للصفحة الحالية ، وحساب رقم الصفحة الإجمالي عند الإنشاء.
آخر ملف هو ملف JS الذي تم إنشاؤه حاليًا والذي يحصل على بيانات ثابتة.
// دع البيانات = {// avatar: '' ، avatar // name: '' ، username // context: '' ، comment content //} let dataarr = [] ؛ "./resources/" + i ٪ 7 + ".jpg" ؛ دع _name = randomstr (20) ؛ دع _context = randomstr (2) ؛ DataArr.push ({avatar: _avator ، الاسم: _name ، السياق: _context}) ؛ }} if (! dataArr.length) {initData () ؛} punction getCommentData (url = '، params = null ، issync = true ، curpageIndex = 1 ، appagesize = 7) { / * ajax * / let st = (curpageindex - 1) * لكل pagesize ؛ دع النهاية = st + alaypagesize ؛ return dataarr.slice (st ، end) ؛} وظيفة التصدير getToTalCommentCount (url = '' ، params = null ، issync = true) { / * ajax * / return dataArr.length ؛} export function getTotalPageCount (url = '، params = null ، issync = Math.floor ((dataArr.length + earypagesize -1) / alaypagesize) ؛}هذا كل شيء.
عنوان جيثب