Vue.js أفضل الممارسات لتطوير الويب

أنا مطور مكدس كامل في شركة Syncrasy Tech (شركة حلول تكنولوجيا المعلومات) . أنا أحب كتابة رموز رد الفعل. لكن لماذا أخبرك بهذا لأننا هنا لمناقشة أفضل ممارسات Vue.js لتطوير الويب. أنا أقول لك هذا حتى تتمكن من فهم خلفيتي ولماذا أناقش هنا Vue.js.

أحب العمل على أكواد React ، لكنني أكره قراءتها. هذا هو السبب في أنني فشلت في رمز. حتى مع أفضل ممارسات مراجعة التعليمات البرمجية ، لا يمكنني معرفة تداخل مكونات React التي تساعد ببساطة على إنشاء هياكل واجهة مستخدم أكثر تعقيدًا في تطبيقات الويب.

يكمن حل هذه المشكلة في Vue ، وهي ليست جديدة الآن في مجال تطوير تطبيقات الويب. لقد سمعت الكثير عن مكونات مزامنة Vue ، والتقديم من جانب الخادم ، والأدوات ، والمكتبات. ربما تجد هذا عدد لا يحصى من المصطلحات لتكون مربكة. صدقني ، لست وحدك في ذلك ، فإن العديد من المطورين من جميع المستويات يشعرون بنفس الطريقة عندما لا يعرفون أفضل ممارسات Vue.

بعد بضعة أيام ، قررت أخيرًا إدخال الرموز الخاصة بي فيها. ما أشاركه هنا هو أفضل الممارسات العديدة التي تعلمتها من خلال تجربتي مع Vue. أنا مستعد لمشاركة ما أجده.

لنبدأ

حاول أن تتعلم كل شيء مرة واحدة على موقع Vue. لنبدأ بالأرقام. لدى Vue اليوم 147K من نجوم Github تاركين وراءهم عمالقة JS مثل Angular (50.6k stars) و React (135k stars).

لقد قسمت أفضل ممارسات Vue إلى أربع فئات:

وظائف فيو

وظائف Vue لديها الكثير من الأشياء التي يجب مناقشتها تحت الغطاء تلقائيًا. Vue.js هي عبارة عن منصة بسيطة موجهة نحو الرؤية والتي تعد أول ميزة رئيسية لها. جميع المعلومات في الترميز صالحة فقط إذا كانت تتفاعل بشكل صحيح مع طرق العرض المسماة المسماة والمتداخلة.

إنشاء طريقة عرض واحدة أمر بسيط للغاية في Vue ، ما عليك سوى تحميل الواجهة وإضافة JavaScript لبدء تطوير تطبيق الويب الخاص بك.

let vm = new Vue({ el: "#my-webapp", data: { firstName: "MyFamous", lastName: "Magazine", } }) 

ثم ، قليلاً من الترميز للحصول على العرض النهائي:

 <div id="my-webapp"> <h1>Hello, {{firstName}} {{lastName}}!</h1> </div> 

ماذا رمز أعلاه تكشف؟

يوضح مثال الترميز أعلاه كيفية عرض Vue تلقائيًا للعناصر دون استخدام الرموز. يستخدم بناء الجملة البسيط لإرسال البيانات لعرضها مباشرة. يمكن استخدام إضافة خصائص مثيل لعرض عناصر Vue.

تحتفظ أنظمة Vue مثل JQuery بالمعلومات الموجودة في DOM ولجميع التغييرات الإضافية التي يحتاجها المطورون لأداء عملية التقديم وتعديل الأجزاء ذات الصلة. دعنا ننتقل إلى الأجزاء الأخرى من وظائف Vue.

المكونات

بالنسبة إلى تطبيقات الويب ، يمكن لمطوري Vue استخدام المكونات تمامًا مثل المكتبات الأخرى باستخدام Vue.compoment. يمكن أن يتضمن المكون اسمًا أو تهيئة أو معرفًا.

 Vue.component('component-name', { /* options */ }) 

تعمل مكونات الملف الفردي جيدًا لمشاريع تطوير الويب من الصغيرة إلى المتوسطة الحجم. من السهل جدًا استخدام مكونات Vue في ملف واحد وبسبب فوائد منطق JavaScript ، وتصميم CSS ، وكود HTML code. انظر أيضًا مثال:

 <template> <p>{{ hi }}</p> </template> <script> export default { data() { return { hi: 'Hi Folks!' } } } </script> <style scoped> p { color: yellow; } </style> 

تستخدم مكونات الملف المفرد الخاصة بـ WebPack لتوفير القدرة على استخدام ميزات الويب الحديثة وتطبيقها على تطبيق الويب الخاص بك. يمكن للمبرمجين تحديد قالب تم إنشاؤه باستخدام الصلصال باستخدام المعالجات المسبقة:

نسخة مطبوعة على الآلة الكاتبة
SCSS
ساس
أقل
PostCSS
كلب البج

تسمح وظيفة vue v-bind للمكونات بقبول البيانات من المكونات الأصلية (Props) التي يمكن رؤيتها في صفيف السلاسل:

 props:{ title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor } 

لن يؤدي ذلك إلى توثيق مكوناتك فحسب ، بل سيحذرك أيضًا عند تمرير نوع رمز خاطئ في وحدة تحكم JavaScript في المتصفح.

باختصار ، توفر Vue مرونة كبيرة لمطوري تطبيقات الويب التي تناسب استراتيجيات التطوير المختلفة وتسهل أيضًا التفاعل مع مكتبات Vue المختلفة.

الأحداث ومعالجات لمعالجة الأخطاء في فيو
Vue JS هو إطار JS تدريجي يركز على طبقة العرض ونظام دعم المكتبات. بالنسبة لجميع مراحل تطوير تطبيق الويب التي تستخدم Vue ، يتم إنشاء الأحداث على التوجيهات v-on و colons التي يتم استخدامها لتحديد نوع الحدث مثل النقر فوق v-on .

مثال بسيط على v-on يمكن أن يكون هذا:

 <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> 

بعض أمثلة أحداث HTML DOM في Vue:
على التغيير
على نقرة
على التحوم
في الحمل
على الماوس خارج
على الماوس فوق
في الحمل

معالجات الأحداث في Vue JS

يتم تعيين معالجات للتعامل مع الأخطاء التي تحدث في الأحداث. يسمح للمطور بكتابة التعليمات البرمجية عند تشغيل حدث محدد.

التقديم الشرطي والحلقات في فيو

التقديم الشرطي في Vue يعني إزالة أو إضافة بعض العناصر من DOM إذا كانت قيمة محددة صحيحة. هذه هي أفضل طريقة لربط البيانات الشرطية التي تتيح للمطورين توصيل المعلومات عندما يكون هناك شرط معين صحيح. يمكنك استخدام توجيه v-if للتقديم الشرطي.

انظر مثال:

 <template> <div> <!-- v-if="javascript expression" --> <h1 v-if="isActive">Hello Vuejs</h1> <button @click="isActive= !isActive">Click</button> </div> </template> <script> export default{ data:function(){ return{ isActive:false } } } </script> 

يمكنك استخدام v-else لتوسيع توجيه v-if:

 <h1 v-if="isActive">Hello Vuejs</h1> <h1 v-else>Hey Vuejs</h1> 

يمكنك تمديده أكثر باستخدام كتلة v-else-if:

 <h1 v-if="isActive">Hello Vuejs</h1> <h1 v-else-if="isActive && a.length===0">You're vuejs</h1> <h1 v-else>Hey Vuejs</h1> 

إذا كانت القيمة التي يريد مبرمج تقييمها صحيحة ، فقم بتشغيل القالب v-if . لمزيد من الامتدادات ، يتم تشغيل التوجيه v-else أو v-if-else .

يحتوي Vue JS على بروتوكول API بسيط يسمح بتوفير مساحة للتوجيه v الذي يعرض قائمة بالعناصر في DOM.

على سبيل المثال:

 <template> <ul> <!-- list rendering starts --> <li v-for="user in users">{{user.name}}</li> </ul> </template> <script> export default{ data:function(){ return{ users:[ {id:1,name:"samuel"}, {id:2,name:"queen"}, {id:3,name:"rinha"}, ] } } } </script> 

في الترميز أعلاه ، يتم تشغيل حلقة عبر الكود في شكل صفيف باستخدام v-for directive. يشير الصفيف إلى الكائنات التي تتيح للمستخدمين رؤية الخصائص الموجودة داخل الصفيف.

الإخراج:

 samuel queen rinha 

ربط البيانات في اتجاهين لتسريع عملية التطوير

تتمثل إحدى الميزات الرئيسية لبرنامج Vue في الارتباط الثنائي التفاعلي الذي يحافظ على مزامنة البيانات والصفائف والمتغيرات مع DOM دون أن يطلب منك القيام بأي شيء آخر. يستخدم Vue توجيه v-model للربط ثنائي الاتجاه. يقوم توجيه v-model بربط عنصر الإدخال بخاصية الاسم باستخدام توجيهات v-model التي تقوم بتحديث مجال الادخال وكذلك تقوم بتحديث مجال خاصية الاسم المرتبط به.

كيف يعمل؟

 <template> <input v-model="name" placeholder="name"/> <p>{{name}}</p> </template> <script> export default{ data:function(){ return{ name:"" } } } </script> <template> <input v-model="name" placeholder="name"/> <p>{{name}}</p> </template> <script> export default{ data:function(){ return{ name:"" } } } </script> 

يأتي توجيه v-model مع خيار معدل .lazy الذي يقوم بتحديث خاصية البيانات بعد حدوث التغيير.

يمكنك أيضًا استخدام دالة .trim لإزالة المسافة البيضاء من الكود.

.number خيار .number modifier إذا كنت تريد قبول الأرقام في حقل الإدخال.

أخيرًا ، هذه هي نقاط القوة الرئيسية لـ Vue.js التي يمكنك استخدامها لتشفير تطبيقات الويب الخاصة بك بشكل صحيح. لذا ، إذا كنت تبدأ مشروعًا جديدًا لتطوير الويب ، فإن Vue.js هو اختيارك. إنها تقود اللعبة بمميزاتها الأنيقة ، وإرشادات الأسلوب ، والترميز السهل ، وتوفر أيضًا جهودك.