إنشاء تطبيق باستخدام Vue ​

نسخة التطبيق ​

كل تطبيق Vue ينشأ باستحداث نسخة تطبيق جديد عن طريق استخدام دالة createApp :

import { createApp } from 'vue'

const app = createApp({
  /* التوابع الجذرية للمكون */
})

المكون الجذر ​

الكائن الذي نمرره إلى دالة createApp هو في الأصل مكون. يتطلب كل تطبيق "مكوِّنًا جذريًا" الذي بدوره يمكن أن يحتوي على مكونات أخرى مثل مكوناته الفرعية.

إذا كنت تستخدم المكونات أحادية الملف، فعادة ما نستورد المكون الجذر من ملف آخر:

import { createApp } from 'vue'
// استيراد  المكون الجذر App كمكون أحادي الملف. 
import App from './App.vue'

const app = createApp(App)

في حين نحتاج في العديد من الأمثلة عبر هذا الدليل إلى مكون واحد فقط، فإن معظم التطبيقات الحقيقية منظمة عبر ملفات بشكل شجري تحتوي على العديد من المكونات المتداخلة والقابلة لإعادة الاستخدام. على سبيل المثال ، قد تبدو مكونات تطبيق Todo (تطبيق قائمة المهام) كما يلي:

App (المكون الجذر)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

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

وصل التطبيق ​

لا تُصيَّر نسخة التطبيق أي شيء حتى يتم استدعاء الدالة ()mount.. و التي تأخذ عنصر "مُستوعِب" كوسيط و الذي يكون إما عنصر من عقد الـDOM أو أيِّ مُحدِّد CSS :

<div id="app"></div>

app.mount('#app')

سيُصيَّر محتوى المكون الجذر للتطبيق داخل العنصر المُستوعِب الذي بدوره لا يُعتبر جزءًا من التطبيق.

لا يجب استدعاء دالة ()mount.. إلا بعد الانتهاء من جميع اعدادات التطبيق وتسجيل الملحقات. كما نلاحظ أيضًا أن قيمة إرجاع هذه الدالة، هي نسخة المكون الجذر بدلاً من نسخة التطبيق التي تكون من دالة تسجيل الملحقات.

قالب المكون الجذر في عنصر الـDOM المُستوعِب ​

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

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

سيستخدم Vue تلقائيًا التابع innerHTML من المستوعب كقالب إذا لم يكن المكون الجذر للتطبيق يحتوي بالفعل على خيار القالب ( template).

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

تهيئة التطبيق ​

تعرض نسخة التطبيق الكائن config. كخاصية التي تسمح لنا بتهيئة بعض الخيارات على مستوى جذر التطبيق، على سبيل المثال، التصريح بـ"معالج الأخطاء" على مستوى جذر التطبيق الذي يلتقط الأخطاء من جميع المكونات الفرعية :

app.config.errorHandler = (err) => {
  /* هنا يُعالج الخطأ */
}

نسخة التطبيق توفر لنا أيضًا بعض التوابع لتسجيل الملحقات على مستوى جذر التطبيق. على سبيل المثال، تسجيل مكون:

app.component('TodoDeleteButton', TodoDeleteButton)

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

تأكد من تطبيق جميع تهيئات التطبيق قبل توصيله!

نسخ متعددة من التطبيق ​

لا يقتصر التطبيق على نسخة واحدة فقط في نفس الصفحة. تسمح الواجهة البرمجية للدالة createApp بوجود تطبيقات Vue متعددة في نفس الصفحة، كل تطبيق له نطاقه الخاص للتهيئة والملحقات العامة :

const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

إذا كنت تستخدم Vue لتحسين HTML مُصيَّر من الخادم وتحتاجها فقط للتحكم في أجزاء معينة من الصفحة الكبيرة، فتجنب توصيل نسخة واحدة من تطبيق Vue على الصفحة بأكملها. بدلاً من ذلك، قم بإنشاء تطبيقات صغيرة متعددة وتوصيلها على العناصر المسؤولة عنها.