Vue eye eye Vue: كيفية البدء باستخدام Vue.js

احصل على نسختك من CSS Visual Dictionary incl. الرسوم البيانية لجميع خصائص CSS.

الصورة من قبل سام بارك على Unsplash

كنت ترغب دائمًا في البدء في تعلم الكود في إطار Vue ، لكن بطريقة ما لم يكن لديك الوقت في جدولك المزدحم.

ربما تشعر بالإرهاق من جميع المكتبات والأطر؟ قد يساعد البرنامج التعليمي Vue العين (بدء) هذا الطائر.

كثيرًا مثل React ، تقسم Vue تطبيق JavaScript إلى عدة أجزاء:

  • كائن التطبيق
  • أساليب الأعضاء والخصائص
  • وطريقة العرض الفعلية (هذا هو المكان الذي توجد فيه عناصر HTML الخاصة بك).

سمات HTML القائمة على Vue من Vue

يضيف Vue الكثير من السمات المخصصة إلى العناصر التي لا تراها عادةً في HTML القياسي ، عن طريق بادئة لهم بـ v.

على سبيل المثال ، هناك v-html و v-if و v-else وغيرها الكثير. لديهم كل هدف محدد: تقديم العناصر. دعنا نلقي نظرة سريعة.

مفاتيح منطقية

هناك سمة v-show أخرى تتمثل في تبديل العناصر استنادًا إلى حالة الرؤية الخاصة بها.

هذا محدد في بيانات خاصية تطبيق Vue كـ {boolean: true؛}.

بعد ذلك ، في HTML الخاص بك ، يمكنك استخدامه لتحديد العناصر التي سيتم عرضها.

مرحبًا!

عندما يكون App.data.boolean صحيحًا ، سيكون العنصر

مرئيًا.

يمكن الآن لمنطق التطبيق الخاص بك "تبديل" العنصر "تشغيل" أو "إيقاف" في الكود. يتم تقديم التغيير تلقائيًا.

حلقات

التوجيه v-for هو إنشاء حلقات لسرد عناصر HTML.

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

فيما يلي مثال كلاسيكي لتكرار الحلقة.

أولاً ، قم بإعداد البيانات في كائن التطبيق الخاص بك:

دع E = Vue جديدة ({
     el: ‘#L’ ، // link to id = "L" element
   البيانات : {
  العناصر : [
      {message: 'One'} ،
      {message: 'Two'} ،
      {message: 'Three'}]}
})؛

الآن في حاوية تطبيق HTML الرئيسية الخاصة بك:

      
  • {{item.message}}

يتم توجيه v-for بتنسيق "للعنصر في العناصر".

هذا يعني أنك تنشئ متغيرًا جديدًا يسمى العنصر في حلقة {{... هنا ...}}. عناصر الخاصية تأتي من كائن بيانات التطبيق نفسه.

سيؤدي ذلك إلى عرض مجموعة عناصرك من كائنات JSON كعناصر HTML!

سيكون مثل كتابة HTML التالية بخط اليد:

      
  • واحد   
  • واثنين   
  • وثلاثة

لن أخوض في التفاصيل وراء كل سمة v-v وماذا تفعل في هذا البرنامج التعليمي. ولكن كما ترون يمكن أن تكون مفيدة للغاية.

إذا كيف يمكنك بناء تطبيقات Vue مع هذا؟

بناء التطبيقات

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

يؤدي ذلك إلى تقصير تطبيق JavaScript ، مع توفير النطاق الترددي (خاصة على التطبيقات الكبيرة). كما يساعدك على إنجاز الأمور بشكل أسرع.

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

هذا يعمل كثيرا مثل رد الفعل. تعامل Vue التطبيق الرئيسي

الخاص بك كحاوية للتطبيق بأكمله. يقوم بتخزين الخصائص والأساليب في كائن التطبيق (انظر أدناه).

في لقطة الشاشة ، يشير الخط الأزرق إلى كيفية ربط بيانات التطبيق بعناصر HTML التي تعرض العرض.

يربط الخط الأخضر طرقك بالأحداث.

لاحظ الخطوط العريضة الحمراء في الصورة أعلاه. في Vue ، يجب عليك ربط عناوين URL بـ: href وليس سمة href. إذا لم تقم بذلك ، فلن يعمل الرابط.

// صحيح (لاحظ السباق: قبل السمة href)
 {{url}} 
// خطأ (لن يتم تشغيل URl)
 {{url}} 

بيانات الطلب

عند إنشاء التطبيقات في Vue (أو حتى الأُطُر أو المكتبات الأخرى المماثلة) ، فعادة ما تفكر في مكان تخزين أساسي واحد لبياناتك. في الرد يمكن أن يكون ممتلكات الدولة. في Vue يتم تخزينه ببساطة في كائن البيانات.

وفقًا لوثائق Vue نفسها ، يتم تخزين تخزين البيانات - الذي يشار إليه غالبًا باسم مصدر الحقيقة - في خاصية البيانات الخام الموجودة في كائن التطبيق الرئيسي نفسه:

const sourceOfTruth = {}

const application = new Vue ({data: sourceOfTruth}) ؛

الطريف في هذا الأمر هو أنه يمكنك تخزين قيمة في البيانات: {...} خاصية وجعلها متاحة تلقائيًا في عناصر HTML الخاصة بك عبر v-text و v-pre و v-one (يتم العرض مرة واحدة فقط) و v-cloak (انتظر حتى تنتهي الصفحة من التقديم ويتم تركيب Vue) والعديد من السمات الأخرى.

بمعنى آخر ، تصبح الخصائص (القيم والكائنات والأساليب البدائية) موجودة في جميع أنحاء التطبيق ويمكن استخدامها في جميع الميزات الإضافية التي يجلبها إطار Vue إلى الجدول ... ليتم استخدامها مع السمات التي تبدأ ببادئة v.

وفقط ملاحظة جانبية. إذا كنت تتجنب استخدام v-cloak ، فقد تواجه بعض التحف الفنية. على سبيل المثال ، يتجول نمط CSS في حدود الثانية الأولى من تحميل التطبيق.

كائن تطبيق Vue

هذا هو المكان الذي ستتم فيه تهيئة بياناتك وكتابة طرق التقديم الخاصة بك لإنجاز الأمور.

كما ترون ، لديك مجموعة من الخصائص والأساليب - تمامًا كما تفعل في فصل جافا سكريبت عادي.

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

عندما تبدأ للتو ، من الجيد أن تتعرف على وجهة نظر عين الطير للأشياء قبل القفز مباشرة إلى الشفرة.

نظرًا لأنك لا تكتب الرمز فقط في علامات