You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# Creating a Vue Application {#creating-a-vue-application}
1
+
# إنشاء تطبيق باستخدام Vue {#creating-a-vue-application}
2
2
3
-
## The application instance {#the-application-instance}
3
+
## نسخة التطبيق {#the-application-instance}
4
4
5
-
Every Vue application starts by creating a new **application instance**with the [`createApp`](/api/application#createapp)function:
5
+
كل تطبيق Vue ينشأ باستحداث **نسخة تطبيق**جديد عن طريق استخدام دالة [`createApp`](/api/application#createapp):
6
6
7
7
```js
8
8
import { createApp } from'vue'
9
9
10
10
constapp=createApp({
11
-
/*root component options*/
11
+
/*التوابع الجذرية للمكون*/
12
12
})
13
13
```
14
14
15
15
## The Root Component {#the-root-component}
16
16
17
-
The object we are passing into `createApp`is in fact a component. Every app requires a "root component" that can contain other components as its children.
17
+
الكائن الذي نمرره إلى دالة `createApp`هو في الأصل مكون. يتطلب كل تطبيق "مكوِّنًا جذريًا" الذي بدوره يمكن أن يحتوي على مكونات أخرى مثل مكوناته الفرعية.
18
18
19
-
If you are using Single-File Components, we typically import the root component from another file:
19
+
إذا كنت تستخدم المكونات أحادية الملف، فعادة ما نستورد المكون الجذر من ملف آخر:
20
20
21
21
```js
22
22
import { createApp } from'vue'
23
-
//import the root component App from a single-file component.
23
+
//استيراد المكون الجذر App كمكون أحادي الملف.
24
24
importAppfrom'./App.vue'
25
25
26
26
constapp=createApp(App)
27
27
```
28
28
29
-
While many examples in this guide only need a single component, most real applications are organized into a tree of nested, reusable components. For example, a Todo application's component tree might look like this:
29
+
في حين نحتاج في العديد من الأمثلة عبر هذا الدليل إلى مكون واحد فقط، فإن معظم التطبيقات الحقيقية منظمة عبر ملفات بشكل شجري تحتوي على العديد من المكونات المتداخلة والقابلة لإعادة الاستخدام. على سبيل المثال ، قد تبدو مكونات تطبيق Todo (تطبيق قائمة المهام) كما يلي:
30
30
31
31
```
32
-
App (root component)
32
+
App (المكون الجذر)
33
33
├─ TodoList
34
34
│ └─ TodoItem
35
35
│ ├─ TodoDeleteButton
@@ -39,11 +39,11 @@ App (root component)
39
39
└─ TodoStatistics
40
40
```
41
41
42
-
In later sections of the guide, we will discuss how to define and compose multiple components together. Before that, we will focus on what happens inside a single component.
42
+
في أجزاء قادمة من الدليل، سنناقش كيفية تعريف مكونات متعددة وتركيبها مع بعض. لكن قبل ذلك، سنركز على ما يحدث داخل مكون واحد.
43
43
44
-
## Mounting the App {#mounting-the-app}
44
+
## وصل التطبيق {#mounting-the-app}
45
45
46
-
An application instance won't render anything until its `.mount()` method is called. It expects a "container" argument, which can either be an actual DOM element or a selector string:
46
+
لا تُصيَّر نسخة التطبيق أي شيء حتى يتم استدعاء الدالة `()mount.`. و التي تأخذ عنصر "مُستوعِب" كوسيط و الذي يكون إما عنصر من عقد الـDOM أو أيِّ مُحدِّد CSS :
47
47
48
48
```html
49
49
<divid="app"></div>
@@ -52,14 +52,12 @@ An application instance won't render anything until its `.mount()` method is cal
52
52
```js
53
53
app.mount('#app')
54
54
```
55
+
سيُصيَّر محتوى المكون الجذر للتطبيق داخل العنصر المُستوعِب الذي بدوره لا يُعتبر جزءًا من التطبيق.
55
56
56
-
The content of the app's root component will be rendered inside the container element. The container element itself is not considered part of the app.
57
+
لا يجب استدعاء دالة `()mount.`. إلا بعد الانتهاء من جميع اعدادات التطبيق وتسجيل الملحقات. كما نلاحظ أيضًا أن قيمة إرجاع هذه الدالة، هي نسخة المكون الجذر بدلاً من نسخة التطبيق التي تكون من دالة تسجيل الملحقات.
58
+
### قالب المكون الجذر في عنصر الـDOM المُستوعِب {#in-dom-root-component-template}
57
59
58
-
The `.mount()` method should always be called after all app configurations and asset registrations are done. Also note that its return value, unlike the asset registration methods, is the root component instance instead of the application instance.
When using Vue without a build step, we can write our root component's template directly inside the mount container:
60
+
عند استخدام Vue دون عملية بناء ، يمكننا كتابة قالب المكون الجذر مباشرة داخل العنصر المُستوعِب:
63
61
64
62
```html
65
63
<divid="app">
@@ -81,31 +79,34 @@ const app = createApp({
81
79
app.mount('#app')
82
80
```
83
81
84
-
Vue will automatically use the container's `innerHTML` as the template if the root component does not already have a `template` option.
82
+
سيستخدم Vue تلقائيًا التابع `innerHTML` من المستوعب كقالب إذا لم يكن المكون الجذر للتطبيق يحتوي بالفعل على خيار القالب ( `template`).
83
+
85
84
86
-
## App Configurations {#app-configurations}
85
+
## تهيئة التطبيق {#app-configurations}
86
+
87
+
تعرض نسخة التطبيق الكائن `config.` كخاصية التي تسمح لنا بتهيئة بعض الخيارات على مستوى جذر التطبيق، على سبيل المثال، التصريح بـ"معالج الأخطاء" على مستوى جذر التطبيق الذي يلتقط الأخطاء من جميع المكونات الفرعية :
87
88
88
-
The application instance exposes a `.config` object that allows us to configure a few app-level options, for example, defining an app-level error handler that captures errors from all descendant components:
89
89
90
90
```js
91
91
app.config.errorHandler= (err) => {
92
-
/*handle error*/
92
+
/*هنا يُعالج الخطأ*/
93
93
}
94
94
```
95
95
96
-
The application instance also provides a few methods for registering app-scoped assets. For example, registering a component:
96
+
نسخة التطبيق توفر لنا أيضًا بعض التوابع لتسجيل الملحقات على مستوى جذر التطبيق. على سبيل المثال، تسجيل مكون:
This makes the `TodoDeleteButton` available for use anywhere in our app. We will discuss registration for components and other types of assets in later sections of the guide. You can also browse the full list of application instance APIs in its [API reference](/api/application).
102
+
تسجيل مكون `TodoDeleteButton` بهذه الطريقة يجعله متاحًا للاستخدام في أي مكان في التطبيق. سنناقش تسجيل المكونات وباقي الملحقات في أجزاء قادمة من الدليل. يمكنك أيضًا استعراض قائمة كاملة من واجهات نسخة التطبيق في [مرجع واجهة برمجة التطبيقات](/api/application).
103
+
103
104
104
-
Make sure to apply all app configurations before mounting the app!
## نسخ متعددة من التطبيق {#multiple-application-instances}
107
108
108
-
You are not limited to a single application instance on the same page. The`createApp`API allows multiple Vue applications to co-exist on the same page, each with its own scope for configuration and global assets:
109
+
لا يقتصر التطبيق على نسخة واحدة فقط في نفس الصفحة. تسمح الواجهة البرمجية للدالة`createApp`بوجود تطبيقات Vue متعددة في نفس الصفحة، كل تطبيق له نطاقه الخاص للتهيئة والملحقات العامة :
109
110
110
111
```js
111
112
constapp1=createApp({
@@ -119,4 +120,5 @@ const app2 = createApp({
119
120
app2.mount('#container-2')
120
121
```
121
122
122
-
If you are using Vue to enhance server-rendered HTML and only need Vue to control specific parts of a large page, avoid mounting a single Vue application instance on the entire page. Instead, create multiple small application instances and mount them on the elements they are responsible for.
123
+
124
+
إذا كنت تستخدم Vue لتحسين HTML مُصيَّر من الخادم وتحتاجها فقط للتحكم في أجزاء معينة من الصفحة الكبيرة، فتجنب توصيل نسخة واحدة من تطبيق Vue على الصفحة بأكملها. بدلاً من ذلك، قم بإنشاء تطبيقات صغيرة متعددة وتوصيلها على العناصر المسؤولة عنها.
0 commit comments