مقدمة
في الفصل السابق ، نجحنا في تقديم صفحة القائمة من خلال البناء الأساسي. ومع ذلك ، هناك العديد من المشاكل. في هذا الفصل ، سنحل هذه المشكلات.
استخدم V-bind لربط البيانات.
في الفصل السابق ، قدمنا الصفحة. ومع ذلك ، إذا تم فتح وحدة التحكم ، فستجد خطأ. كما هو مبين في الشكل أدناه:
هذا لأنه عندما تأتي الصفحة ، سيتم تنفيذ رمز HTML الخاص بنا أولاً ، وفي هذا الوقت ، لم يبدأ Vue في العمل. رمزنا كما يلي:
<li v-for = "info in data"> <i> <img src = "{{info.author.avatar_url}}"> <span> {{info.author.loginname}} </span> </i> <time> {{info.create_at}}} }} "> {{info.title}} </a> </li>كما هو مذكور أعلاه ، عندما تقوم الصفحة بتوحيد src = "{{info.author.avatar_url}}" ، بالطبع ، لا يمكن العثور على مسار الصورة هذا. لذلك ، سيحدث خطأ بشكل طبيعي. لذلك ، نحن بحاجة إلى معالجة هذا الرمز. نقوم بتعديله إلى
<img v-bind: src = "info.author.avatar_url" v-bind: alt = "info.author.loginname">
حسنًا ، دعنا نعمل على تحديث الصفحة ، هذه المرة ، لا يوجد خطأ.
نقاط المعرفة VUE
سمة الربط V-bind http://vuejs.org.cn/api/#v-bind
التجديد:
في الواقع ، عندما نفتح الصفحة ، لا يزال بإمكاننا رؤية محتويات {{...}} في لحظة. على الرغم من أن هذا لن يبلغ عن خطأ ، إلا أنه لا يزال يؤثر على تجربة مستخدم صغيرة. في هذا الوقت ، يمكننا استخدام نص V لإخراج هذه المحتويات. على النحو الوارد أعلاه ، نقوم بتعديل الرمز إلى ما يلي:
<li v-for = "info in data"> <i> <img v-bind: src = "info.author.avatar_url" v-bind: alt = "info.author.loginname"> <span v-text = "info.author.loginname"> </span> <time v-text = "info href = "content.html؟ {{info.id}}" v-text = "info.title"> </a> </li>عندما نقوم بتعديل الرمز إلى هذا ، يتم حل جميع المشكلات.
نقاط المعرفة VUE
نص إخراج V-Text http://vuejs.org.cn/api/#v-text
تجميل الوقت
يشبه تنسيق الوقت الذي نحصل عليه من الواجهة هذا 2016-06-12T06: 17: 35.453z. من الواضح أن هذا ليس التأثير الذي نريده. يجب أن يكون التأثير الذي نريده هكذا كما تم نشره قبل ساعتين. كيف تفعل ذلك؟
نحتاج إلى وظيفة ، يتم استخدامها لإعطائها سلسلة بدائية ثم إرجاع سلسلة نريدها.
مبدأ هذه الوظيفة ليس تركيزنا. لن أشرح ذلك هنا. أنا فقط أنظر إلى الكود على النحو التالي:
وظيفة Goodtime (str) {var now = new date (). getTime () ، Oldtime = تاريخ جديد (str) .getTime () ، الفرق = الآن - oldtime ، result = '، دقيقة = 1000 * 60 ، ساعة = دقيقة * 60 ، اليوم = ساعة * 24 ، نصف شهر ، _day = الاختلاف/اليوم ، _hour = الفرق/ساعة ، _min = الفرق/الدقيقة ؛ if (_year> = 1) {result = "تم نشره في" + ~~ (_year) + "منذ سنة"} آخر إذا (_month> = 1) {result = "تم نشره في" + ~~ (_month) + "month"} else (_week> = 1) {result = "تم نشره في". "تم نشره في" + ~~ (_day) + "منذ يوم" "} آخر إذا (_hour> = 1) {result =" تم نشره في " + ~~ (_hour) +" ساعة "} آخر إذا (_min> = 1) {result =" تم نشره في " + ~~ (_min) +" قبل دقيقة "} نتيجة العودة ؛}يحتوي الكود على جزء من الاقتراض من رمز الآخرين.
حسنًا ، الآن ، يمكننا استخدام وظيفة طريقة Goodtime (STR) لتعديل تنسيق الوقت المقدم لنا من قبل الواجهة لما نريد. السؤال الآن هو ، كيف يمكننا استخدام هذه الوظيفة؟
طريقة غبية ، قم بتعديل البيانات الأصلية مباشرة
أولاً ، نحصل على البيانات من خلال Ajax ، ثم نسلم البيانات إلى Vue لتقديمها. بعد ذلك ، يمكننا إجراء عملية في الوسط ، ومعالجة جميع البيانات ، ثم تسليم البيانات التي تمت معالجتها إلى VUE لتقديمها. يمكن حل هذه المشكلة.
فقط افعل ذلك ، دعونا نلقي نظرة على الكود:
دالة pushdom (البيانات) {// الأولى عبر الفقرة وتعديلها في كل الوقت في البيانات لـ (var i = 0 ؛ i <data.data.length ؛ i ++) {data.data [i] .create_at = goodtime (data.data [i] .create_at) ؛ } ؛ // ثم اترك الأمر إلى Vue لتقديم var vm = new vue ({el: '.list' ، البيانات: Data}) ؛}حسنًا ، من خلال المعالجة أعلاه ، دعونا نلقي نظرة على تأثير الصفحة النهائية. على النحو التالي:
نجاح.
طريقة التصفية المخصصة VUE
على الرغم من أننا نجحنا أعلاه ، إلا أنه ليس بالأمر حقًا إنشاء حلقة مباشرة قبل Vue. علاوة على ذلك ، نريد أن نتعلم Vue ، أين هذه الطريقة الوحيدة للتعلم ...
حسنًا ، دعنا نستخدم وظيفة مرشح Vue المخصصة لمعالجتها.
البرنامج التعليمي الرسمي ، مرشح مخصص http://vuejs.org.cn/guide/custom-filter.html
الوظيفة pushdom (data) {// استخدم Vue Custom Filter لنحت الوقت الذي تم تمريره في الواجهة vue.filter ('time' ، function (value) {return Goodtime (value) ؛}) var vm = new vue ({el: '.list' ، data: data}) ؛}ونحن بحاجة إلى تعديل جزء HTML الخاص بنا على النحو التالي:
<time v-text = "info.create_at | time"> </time>
حسنًا ، تأثير التنفيذ هو نفسه بالضبط. لكن الرمز يبدو أكثر أناقة. المفتاح هو أنه في هذه العملية ، تعلمنا وتقدير استخدام المرشحات المخصصة. في الواقع ، في كثير من الحالات ، غالبًا ما تكون البيانات التي قدمتها لنا الواجهة غير مناسبة لتقديمها مباشرة على الصفحة ، لذلك هذه الوظيفة مهمة للغاية وتستخدم بشكل شائع.
ملخص
1.V طريقة سمة عنصر الربط
2. فولت طريقة نص الإخراج النص
3. استخدام المرشحات المخصصة VUE
زائدة
موقع VUE الرسمي
cnodejs تفاصيل API
قم بتنزيل الكود المصدري لهذه السلسلة من البرامج التعليمية
الفصل الأول من برنامج Vuejs العملي ، بناء الأساسيات وتقديم القائمة
Vuejs التعليمي العملي الفصل 2 ، إصلاح الأخطاء وتجميل الوقت
Vuejs البرنامج التعليمي الفصل 3 ، باستخدام المكون الإضافي للتخطيط لتحقيق ترقيم الصفحات
هذا المقال كتب في الأصل من قبل Fungleo
عنوان الإصدار الأول: http://blog.csdn.net/fungleo/article/details/51649074
تم تجميع هذه المقالة في "Vue.js Front Component Learning Tutorial" ، والجميع مرحب بهم للتعلم والقراءة.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.