diff --git a/src/guide/essentials/application.md b/src/guide/essentials/application.md index 950e69d1..0947dd73 100644 --- a/src/guide/essentials/application.md +++ b/src/guide/essentials/application.md @@ -1,35 +1,40 @@ -# إنشاء تطبيق باستخدام Vue {#creating-a-vue-application} +# إنشاء تطبيق باستخدام Vue -## نسخة التطبيق {#the-application-instance} - - كل تطبيق Vue ينشأ باستحداث **نسخة تطبيق** جديد عن طريق استخدام دالة [`createApp`](/api/application#createapp) : +--- +أي مشروع Vue بيبدأ بـ **Application Instance**، وده بنعمله عن طريق `createApp()` من مكتبة Vue. ```js import { createApp } from 'vue' const app = createApp({ - /* التوابع الجذرية للمكون */ + /* root component options */ }) ``` -## المكون الجذر {#the-root-component} +هنا إحنا أنشأنا الـ app نفسه، لكن لسه مش بيعرض حاجة على الشاشة. + +--- + +## **2. Root Component** -الكائن الذي نمرره إلى دالة `createApp` هو في الأصل مكون. يتطلب كل تطبيق "مكوِّنًا جذريًا" الذي بدوره يمكن أن يحتوي على مكونات أخرى مثل مكوناته الفرعية. +الـ object اللي بتحطه جوه `createApp()` ده في الحقيقة **Component**، وده بيكون **Root Component** (المكون الأساسي). -إذا كنت تستخدم المكونات أحادية الملف، فعادة ما نستورد المكون الجذر من ملف آخر: +* أي Vue App لازم يكون له Root Component. +* الـ Root Component ممكن يحتوي Components تانية (nested components). + +لو شغال بـ **Single-File Components** (الملفات `.vue`) هتعمل import للـ root component: ```js import { createApp } from 'vue' -// استيراد المكون الجذر App كمكون أحادي الملف. import App from './App.vue' const app = createApp(App) ``` -في حين نحتاج في العديد من الأمثلة عبر هذا الدليل إلى مكون واحد فقط، فإن معظم التطبيقات الحقيقية منظمة عبر ملفات بشكل شجري تحتوي على العديد من المكونات المتداخلة والقابلة لإعادة الاستخدام. على سبيل المثال ، قد تبدو مكونات تطبيق Todo (تطبيق قائمة المهام) كما يلي: +مثال على شجرة مكونات (Component Tree) لتطبيق Todo: ``` -App (المكون الجذر) +App (root) ├─ TodoList │ └─ TodoItem │ ├─ TodoDeleteButton @@ -39,11 +44,13 @@ App (المكون الجذر) └─ TodoStatistics ``` -في أجزاء قادمة من الدليل، سنناقش كيفية تعريف مكونات متعددة وتركيبها مع بعض. لكن قبل ذلك، سنركز على ما يحدث داخل مكون واحد. +دي طريقة Vue في تقسيم الكود لمكونات صغيرة وقابلة لإعادة الاستخدام. + +--- -## وصل التطبيق {#mounting-the-app} +## **3. Mounting the App** -لا تُصيَّر نسخة التطبيق أي شيء حتى يتم استدعاء الدالة `()mount.`. و التي تأخذ عنصر "مُستوعِب" كوسيط و الذي يكون إما عنصر من عقد الـDOM أو أيِّ مُحدِّد CSS : +الـ Application مش هيعرض أي حاجة غير لما تعمل `.mount()` وتحدد العنصر اللي هيركب فيه: ```html
@@ -53,13 +60,15 @@ App (المكون الجذر) app.mount('#app') ``` -سيُصيَّر محتوى المكون الجذر للتطبيق داخل العنصر المُستوعِب الذي بدوره لا يُعتبر جزءًا من التطبيق. +* المحتوى اللي جوه Root Component هيتحط جوا الـ container ده. +* الـ container نفسه مش جزء من الـ Vue App. +* `.mount()` لازم تتنفذ **بعد** أي إعدادات أو تسجيلات assets. -لا يجب استدعاء دالة `()mount.`. إلا بعد الانتهاء من جميع اعدادات التطبيق وتسجيل الملحقات. كما نلاحظ أيضًا أن قيمة إرجاع هذه الدالة، هي نسخة المكون الجذر بدلاً من نسخة التطبيق التي تكون من دالة تسجيل الملحقات. +--- -### قالب المكون الجذر في عنصر الـDOM المُستوعِب {#in-dom-root-component-template} +## **4. In-DOM Root Component Template** -القالب الخاص بالمكون الجذر عادة ما يكون جزءًا من المكون نفسه، ولكن من الممكن أيضًا توفير القالب بشكل منفصل عن طريق كتابته مباشرة داخل عنصر الوصل: +ممكن تكتب الـ template مباشرة جوا الـ HTML بدل ما يكون جوه ملف `.vue`: ```html