Vue.js هو إطار جافا سكريبت صغير لإنشاء مكونات قابلة لإعادة الاستخدام والتفاعل على موقعك.
تختلف أطر الواجهة الأمامية بشكل كبير من حيث الحجم والنطاق ، حيث تبرز Vue.js في الحد الأدنى من التصميم والتركيز على القدرة على التكيف. لديك خيار بناء موقعك بأكمله باستخدام Vue.js ، فقط جعل عنصرًا واحدًا من موقعك متفاعلًا ، أو أي شيء في المنتصف. وبسبب هذا ، فإنه يمكن بلوغه مع منحنى تعلم ضحل.
في هذه المقالة سوف نلقي نظرة على المكونات الأساسية لـ Vue.js وكيفية الحصول على الإعداد والبدء ، ولكن دعونا أولاً نلقي نظرة على الوقت الذي تريد فيه استخدام إطار أمامي مثل Vue.js ولماذا .
الأطر الأمامية ، مثل معظم الأطر تأتي إلى المهام العامة المجردة ، القاسم المشترك الذي تجده بين المشاريع. يأتي Vue.js خصيصًا ليجرد عملية إنشاء مكونات HTML التي يتم تحديثها ديناميكيًا من خلال JavaScript.
هناك عدد قليل من نقاط الألم التي تحلها Vue.js لك ، هي توليد HTML الديناميكي ، ربط إجراءات عناصر HTML بنطاق وسياق حفظ البيانات الخاص بك ، وتتبع متى يجب إعادة تقديم HTML تلقائيًا.
لنفترض مثلاً أن لديك صفحة تحتوي على قائمة ديناميكية بالأسماء. قد يكون لديك رمز مكتوب يبدو كالتالي:
عند إنشاء HTML يدويًا - إلى جانب حقيقة أن التعليمة البرمجية يصعب إدارتها بسرعة في أمثلة أكبر - لا يوجد اتصال حقيقي بين البيانات و HTML الذي تم إنشاؤه. إذا تغيرت مجموعة الأسماء يجب أن تكون على علم بذلك وتقوم بإعادة عرض القائمة. كل هذا أيضًا لعرض البيانات الديناميكية فقط ، إذا كنت ترغب في إضافة معالجات أحداث مثل معالج النقر فوق ، من أجل حفظ النطاق ، فستحتفظ بتعشيش التعليمة البرمجية الخاصة بك بشكل إضافي وفي:
باستخدام Vue.js ، يمكنك فصل HTML كقالب يصور ما يتم إنشاؤه استنادًا إلى البيانات المعطاة ، وسيقوم Vue.js بعرضه تلقائيًا.
هذا المثال نفسه في Vue.js سيبدو كالتالي:
لدينا فصل كامل بين جوانب HTML لشفرة جافا سكريبت إلى منطق شفرة جافا سكريبت مما يجعل كل شيء قائم بذاته وأكثر قابلية للإدارة. نحن نتقدم قليلاً على أنفسنا ، دعونا نرجع خطوة إلى الوراء وننظر في كيفية تحقيق جوهر Vue.js لهذا ...
في صميم Vue.js تقوم بتعريف علاقة بين HTML وبعض البيانات ، وفي أي وقت تتغير فيه البيانات سيتم تحديث HTML. الطريقة التي يعمل بها هذا هي عند إنشاء مكون Vue.js لتمريره بعض البيانات في شكل كائن جافا سكريبت ، يتم بعد ذلك تعديل هذا الكائن ليحل محل خصائصه باتباع أساليب getter و setter القابلة للتتبع.
يقوم Vue.js بتحليل كائن البيانات أثناء إنشاء HTML ويرى البيانات التي استخدمتها في الترتيب لتقديم عناصر HTML المختلفة داخل. باستخدام هذا فإنه يراقب التغييرات التي أجريت على كائن البيانات ويعرف بالضبط ما يجب تحديثه ومتى.
يؤدي وجود مثل هذا الربط الضيق بين البيانات وطريقة العرض إلى تبسيط عملية تطوير التطبيقات الأمامية بشكل كبير ويقلل من الأخطاء الناتجة عن التحريف. يتيح لك هذا الفصل من الاهتمامات التركيز على منطق التطبيق دون الحاجة إلى التعامل مع تحديث العرض على الإطلاق.
التثبيت لـ Vue.js بسيط مثل تضمين المكتبة:
الآن كما ذكرت ، يتألف تطبيق Vue.js من كائن بيانات ونموذج HTML لتضمين البيانات. حتى بالنسبة لنا التطبيق الأول لرؤية Vue.js في العمل يتيح إضافة إلى body :
أولا علينا تحديد div والذي سيكون قالب HTML الخاص بنا لتطبيق Vue.js الخاص بنا. في الداخل نستخدم الأقواس المزدوجة لاستكمال البيانات في HTML.
داخل التطبيق الفعلي Vue.js نقوم ببساطة بتعريف البيانات وتوصيل div كعنصر للتطبيق على كل من تقديم واستخدام القالب. بعد ذلك ، لمزيد من التوهج ، نقوم بزيادة متغير العدد على تطبيقنا مرة واحدة كل ثانية.
هذا كل ما في الأمر هو إنشاء تطبيق Vue.js ، فتح هذا في المتصفح الخاص بك ، سترى الصفحة تتحدث تلقائيا في كل مرة نقوم بتحديث خاصية البيانات.
الآن في معظم التطبيقات التي تكون فيها استجابة DOM للبيانات التي يتم تغييرها هي نصف القصة فقط ، تحتاج أيضًا إلى طريقة لتحديث البيانات ، يعتني Vue.js بهذا الأمر من خلال الأحداث والطرق. يتم تخزين الأساليب المخزنة في سياق تطبيق Vue.js الخاص بك.
دعونا نقوم بتحديث مثال العداد الخاص بنا لإضافة القدرة على بدء وإيقاف المؤقت بدلاً من تشغيله ببساطة:
في قالب HTML ، أضفنا زرًا لبدء العداد وإيقافه ، لتحقيق ذلك ، نحتاج إلى أن يكون النص على الزر ديناميكيًا ونحتاج إلى معالج أحداث عند النقر على الزر.
للإعلان عن حدث في Vue.js على عنصر ، تقوم بادئة اسم أي من أحداث DOM HTML القياسية باستخدام v-on: ، لذلك mouseover يصبح الحدث v-on:mouseover أو ال keyup يصبح الحدث v-on:keyup . في مثالنا نحن نستخدم v-on:click السمة للتعامل مع click هدف.
شيء ربما لاحظته هو أننا نستخدم طريقة للنص بدلاً من الإشارة إلى خاصية مخزنة فقط. في العديد من الحالات ، لا تكون البيانات التي تخزنها بالضرورة بالتنسيق الذي تريد عرضه على الصفحة. يمكن استخدام الطرق هنا لمعالجة البيانات ، وتطبق جميع التفاعلات التي تحصل عليها من الخصائص عند استخدام الطرق ، إذا كانت البيانات الأساسية ستتغير سيتم تحديث القالب وفقًا لذلك.
في تطبيق Vue.js ، أصبح لدينا الآن خاصية جديدة تحتوي على متغير المؤقت ، وبعض الطرق. ال toggle الطريقة التي منضما إلى الحدث نقرة زر يتحقق ما إذا كان أو لا timer يتم تعيين الخاصية ، بدء أو إيقاف الموقت على التوالي و counterAction يتم استخدام الطريقة لعرض الإجراء الصحيح في الزر ، مرة أخرى بناءً على متغير المؤقت.
نظرًا لأن طريقة التبديل تتغير خاصية المؤقت ، وتستخدم طريقة counterAction - الموجودة في قالب Vue.js - خاصية المؤقت ، فسيتم استدعاء أي تغيير في الوقت إلى أن القالب سيعيد عرض نص الزر.
تجدر الإشارة إلى أنه على الرغم من أننا لا نملك قيمة مبدئية لخاصية الموقِّت ، إلا أنه لا يزال يتعين الإعلان عنه عند إنشاء تطبيق Vue.js. إذا لم تقم بإعلان الخاصية من البداية ، فلن يكون الموقع متفاعلًا ولن يؤدي إلى إعادة عرض HTML عند تغييره.
في مثالنا ، يتم تحديث العرض مرة واحدة في الثانية أثناء تشغيل المؤقت ، وبمجرد أن يتم استدعاء طريقة counterAction الخاصة بنا في ثانية واحدة ، عند إعادة تعيين الزر. يتيح لنا Vue.js تحسين ذلك من خلال التخزين المؤقت لنتيجة طريقة ما ولا يتم تذكر سوى الطريقة إذا تم تغيير البيانات الأساسية المستخدمة بشكل خاص في الطريقة. وهذا مفيد أيضًا إذا كنت تستخدم نفس الخاصية المحسوبة في أماكن متعددة على الصفحة ، بدلاً من معالجة القيمة عدة مرات ، عن طريق تخزين القيمة مؤقتًا ، يمكنك تقليل الكثير من الحمل.
دعونا نقوم بتحديث المثال لتضمين الخصائص المخزنة مؤقتًا:
والفرق الرئيسي إلى جانب التخزين المؤقت ، هو أن الأساليب تحت computed تتم الإشارة إليها كخصائص بدلاً من الطرق ، لذلك في قالب HTML كان علينا إزالة الأقواس من counterAction .