لقد كنت على اتصال مع النموذج الأمامي الأصلي من قبل ، JQuery+Bootstrap ، عمليات DOM المعقدة ، وربط التحديث المرهقة. بعد الانخراط في VUE ، لدي فهم جديد لإطار MVVM الأمامي. هذه المقالة مبنية على webpack+vue. نظرًا لأن العمل السابق كان يعتمد بشكل أساسي على تطوير خادم Java ، فإن فهم الأطر والمكونات في الواجهة الأمامية لم يكن متعمقًا بما فيه الكفاية ، لذلك يتم استخدامه لتسجيل كل جزء من استخدام الإطار الأمامي والبناء.
تم تطوير مكون الترحيل هذا استنادًا إلى الصفحة السفلية للمعالجة القابلة للتمهيد ، وتتم إضافة وظائف مخصصة إلى المعلمات ذات الصلة.
عرض الاستخدام النهائي هو كما يلي ، تأتي البيانات من cnodejs [https://cnodejs.org/]
يتكون مكون الصفحة السفلي بشكل أساسي من جزأين: عرض رقم عنصر البيانات الحالي على اليسار ورقم صفحة الترحيل على اليمين. رمز المكون كما يلي:
<قالب xmlns: v-on = "http://www.w3.org/1999/xhtml" v-for = "item in menu" v-bind: value = "item"> {{item}} </point> </select> سجل/صفحة ، عرض {{start}} إلى {{end}} سجلات العنصر ، مجموع العناصر {{totalsize}} v-bind: class = "{'upabled': cur == 1}"> home </a> </li> <li> <a v-on: click = "preclick ()" v-bind: class = "{'upabled': cur == 1}"> PRIET PAGE </A> 1} "> الصفحة السابقة </a> </li> <li v-for =" per in pages "v-bind: class =" {'active': cur == per} "> <a v-on: click =" pageclick (per) "> {{per}} </a> </li> <li> == TotalPage} "> الصفحة التالية </a> </li> <li> <a v-on: click =" lastclick () "v-bind: class =" {'atibled': cur == totalPage} " <viv> </viv> </viv> </fultplate> <script> استيراد ajax من '../ajax' التصدير الافتراضي {props: ['page-model'] ، data () {return {// page cur: 1 ، // request uled url: this.pagemodel.url؟ this.pagemodel.url: "" ، // request parameters param: this.pagemodel.param؟ this.pagemodel.param: {} ، // تتخلف طريقة الطلب للحصول على طريقة الطلب: this.pagemodel.method؟ this.pagemodel.method: 'get' ، // يتم عرض عدد الشاشات لكل صفحة افتراضيًا 10 قطع لكل صفحة: this.pagemodel.menu؟ this.pageModel.menu [0]: 10 ، // تتخلف الصفحة الأساسية إلى 5 persize: this.pagemodel.persize؟ this.pageModel.persize: 5 ، // عدد العرض لكل صفحة من القائمة المنسدلة: this.pagemodel.menu؟ this.pagemodel.menu: [5 ، 10 ، 50] ، // الاسم المخصص لمعلمات تراجع pageParamName: this.pagemodel.pageparamname؟ this.pageModel.pageParamName: ['page' ، 'limit'] ، // تعرض القائمة الحالية السجل: 0 ، // تعرض القائمة الحالية نهاية السجل: 0 ، // total pages totalpage: 0 ، // total re recors stotalsize: 0 ، } ، الطرق: {// الصفحة الرئيسية firstclick: function () {if (this.cur> 1) {this.cur = 1 ؛ this.getData () ؛ }} ، // Last Page lastclick: function () {if (this.cur <this.totalPage) {this.cur = this.totalPage ؛ this.getData () ؛ }} ، // الصفحة السابقة preclick: function () {if (this.cur> 1) {this.cur-- ؛ this.getData () ؛ }} ، // الصفحة التالية NextClick: function () {if (this.cur <this.totalPage) {this.cur ++ ؛ this.getData () ؛ }} ، // رقم الصفحة pageclick: function (data) {if (data! = this.cur) {this.cur = data ؛ this.getData () ؛ }} ، // تحديث عدد السجلات المعروضة refreshPageCon: function () {this.start = (this.cur - 1) * this.limit + 1 ؛ if (this.totalsize> = this.limit * this.cur) {this.end = this.limit * this.cur ؛ } آخر {this.end = this.totalsize ؛ }} ، // request redage getData: function () {let _this = this ؛ this.param [this.pageParamName [0]] = this.cur ؛ this.param [this.pageParamName [1]] = this.limit ؛ ajax ({url: _this.url ، الطريقة: _this.method ، البيانات: _this.param ، رد الاتصال: الدالة (res) {// إرجاع مجموعة بيانات النتائج this.datalist = res.data ؛ _ this.limit) ؛ } ، // إظهار السجلات لكل صفحة menuchange page: function () {this.getData () ؛ } ، getPage: function (curpage ، totalpage ، pagenum) {var leftpage ، rightpage ؛ curpage = curpage> 1؟ Curpage: 1 ؛ curpage = curpage> totalpage؟ TotalPage: Curpage ؛ TotalPage = curpage> totalpage؟ Curpage: TotalPage ؛ // leftpage = curpage - math.floor (pagenum / 2) ؛ LeftPage = LeftPage> 1؟ اليسار: 1 ؛ // rightpage = curpage + math.floor (pagenum / 2) ؛ صفحة اليمين = page right> totalpage؟ TotalPage: صفحة الحق ؛ var curpagenum = page page - page left + 1 ؛ // leftpage if (curpagenum <pagenum && leftpage> 1) {leftpage = leftpage - (pagenum - curpagenum) ؛ LeftPage = LeftPage> 1؟ اليسار: 1 ؛ curpagenum = صفحة اليمين - الصفحة اليسرى + 1 ؛ }. صفحة اليمين = page right> totalpage؟ TotalPage: صفحة الحق ؛ } var arr = [] ؛ لـ (var i = leftpage ؛ i <= rightpage ؛ i ++) {arr.push (i) ؛ } إرجاع arr ؛ }} ، حساب: {pages: function () {return this.getPage (this.cur ، this.totalPage ، this.persize) ؛ }}}} </script> <style> ul ، li {margin: 0px ؛ الحشو: 0px ؛ } li {list-style: none ؛ العرض: مضمّن ؛ . تدمير النص: لا شيء ؛ الموقف: قريب تعويم: اليسار. الحشو: 6px 12px ؛ الهامش اليساري: -1px ؛ Line-Height: 1.42857143 ؛ اللون: #337ab7 ؛ المؤشر: مؤشر. } .page-bar a: hover {background-color: #EEE ؛ } .page-bar .active a {color: #fff ؛ المؤشر: الافتراضي ؛ لون الخلفية: #337AB7 ؛ لون الحدود: #337ab7 ؛ } .page-bar i {font-style: normal ؛ اللون: #D44950 ؛ الهامش: 0px 4px ؛ حجم الخط: 12 بكسل ؛ } .page-bar .page-con ، .page-size {width: 50 ٪ ؛ العرض: كتلة ؛ الارتفاع: 30 بكسل ؛ تعويم: اليسار. ارتفاع الخط: 30 بكسل ؛ } .page-bar .page-con ul {float: right ؛ حشو اليسار: 15 بكسل ؛ حشو اليمين: 15px ؛ العرض: كتلة مضمنة. حشو اليسار: 0 ؛ . حشو اليمين: 15px ؛ حجم الخط: 14px ؛ } a.disabled {color: #777 ؛ خلفية اللون: #fff ؛ بلون الحدود: #DDD ؛ المؤشر: لا يسمح للسماع ؛ } a.disabled: hover {background-color: #fff ؛ } .clear-both {clear: كلاهما ؛ } SELECT {Border: Solid 1PX #DDD ؛ المظهر: لا شيء ؛ -ظهور الأوز: لا شيء ؛ -بكيت ظهور: لا شيء ؛ الخلفية: URL ("../ الأصول/الصور/السهم. حشو اليمين: 15px ؛ حشو اليسار: 15 بكسل ؛ حشو أعلى: 2 بكسل ؛ حشوة القاع: 2 بكسل ؛ } SELECT ::-MS-Expand {Display: None ؛ } </style>استخدم الوحدات ،
<implate> <varbar> </avbar> <viv> <table> <tread> <tr> <tr> <th> العنوان </th> <th> publish time </h> <th> المؤلف </th> <th> عدد الردود </th> <th> عدد الزيارات </th> </tr> </tbody> <ttr v-show = "! <td> {{item.title}} </td> <td> {{item.create_at}} <td> {{item.visit_count}} </td> </tr> <tr> v-show = "tabeLempty"> <td colspan = "5"> لا يوجد سجل مطابق </td> </tr> </tbody> </table> من '../components/navbar.vue' استيراد اسم صفحة من '../components/table-pagebar.vue' التصدير الافتراضي {// هذا هو طريقة الكتابة الرسمية ، التصدير الافتراضي ، مكونات es6: {navbar ، pagebar} ، data () 'https://cnodejs.org/api/v1/topics' ، القائمة: [5 ، 10 ، 20]} ،}} ، محسوبة: {tabeLempty: function () {if (this.datalist) {return false ؛ } آخر {return true ؛ }}} ، الأحداث: {refresh: function (e) {this.datalist = e ؛ }}}} </script> <style> الجسم ، الجدول {font-size: 12px ؛ } جدول {table-layout: ثابت ؛ خلايا فارغة: عرض ؛ حدود الحدود: الانهيار. العرض: 100 ٪ ؛ الهامش: 10px 0 ؛ } td {height: 30px ؛ } div.row {margin-left: 15px ؛ يمين الهامش: 15 بكسل ؛ } H1 ، H2 ، H3 {font-size: 12px ؛ الهامش: 0 ؛ الحشو: 0 ؛ } .table {border: 1px solid #ddd ؛ الخلفية: #fff ؛ } .table thead tr {background: #EEE ؛ . الارتفاع: 30 بكسل ؛ محاذاة النص: اليسار ؛ المحاذاة الرأسية: الأوسط ؛ } .table tr.empty {text-align: center ؛ } .table td ، .table th {border: 1px solid #ddd ؛ الحشو: 0 1EM 0 ؛ } .table tr: nth-child (odd) td {background-color: #f5f5f5 ؛ } </style>تم تجميع هذه المقالة في "Vue.js Front Component Learning Tutorial" ، والجميع مرحب بهم للتعلم والقراءة.
للدروس التعليمية على مكونات vue.js ، يرجى النقر على الموضوع الخاص التعليمي التعليمي للموضوع Vue.js للتعلم.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.