اكتسب Vue.js سمعته كإطار عمل JavaScript تقدمي. يمكنك استخدام Vue.js لإنشاء تطبيقات ذات صفحة واحدة (SPA) أو تطوير واجهات مستخدم محددة.

هنا سوف تتعلم أساسيات Vue.js ، بما في ذلك كيفية إنشاء مكون Vue والعمل مع كائن الخيارات لتقديم بيانات ديناميكية.

Vue.js هي واحدة من ملفات أشهر أطر عمل JavaScript. لتبدأ مع Vue، ولإضافته إلى صفحة HTML الخاصة بك ، انسخ علامة البرنامج النصي أدناه والصقه في قسم الرأس:

<النصيsrc="">النصي>

يعد استخدام رابط CDN خيارًا ممتازًا لتحسين HTML الثابت أو إضافة وظائف إلى تطبيقك.

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

إنشاء تطبيق Vue

يوفر الوصول إلى مكتبة Vue عبر رابط CDN كائن Vue ، بما في ذلك ملف .createApp () طريقة.

كما يوحي الاسم ، يمكنك إنشاء تطبيق Vue باستخدام هذه الطريقة.

على سبيل المثال:

لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<عنوان>تطبيق Vueعنوان>
<النصيsrc=" https://unpkg.com/vue@3/dist/vue.global.js">النصي>
رأس>
<جسم>
<النصي>
 تطبيق const = Vue.createApp () ؛
النصي>
جسم>
لغة البرمجة>

هنا يتم تخزين التطبيق الذي تم إنشاؤه في ملف برنامج عامل. بعد إنشاء مثيل التطبيق ، يجب عليك عرضه باستخدام امتداد .تتعدد() طريقة. توضح هذه الطريقة مكان تحميل التطبيق في ملف نموذج كائن المستند (DOM).

مثل ذلك:

لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<عنوان>تطبيق Vueعنوان>
<النصيsrc=" https://unpkg.com/vue@3/dist/vue.global.js">النصي>
رأس>
<جسم>
<شعبةبطاقة تعريف="برنامج">شعبة>
<النصي>
 تطبيق const = Vue.createApp () ؛
 app.mount ("# تطبيق")؛
النصي>
جسم>
لغة البرمجة>

لاستخدام Vue's .تتعدد() طريقة ، يجب عليك تقديم عنصر DOM أو محدد كوسيطة. في هذا المثال ، قمنا بتثبيت تطبيق Vue باستخدام عنصر DOM مع الامتداد #برنامج بطاقة تعريف.

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

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

كائن الخيارات في Vue

في Vue.js ، يمكنك استخدام ملف خيارات ككائن تكوين لإنشاء مثيل Vue أو مكون.

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

بعض الخصائص شائعة الاستخدام في خيارات الكائن هو:

• بيانات: تحدد هذه الخاصية كائن البيانات لتطبيقات Vue. إنها دالة تقوم بإرجاع كائن يحتوي على خصائص البيانات وقيمها الأولية.
• طُرق: ال طُرق تحتوي خاصية كائن الخيارات على وظائف حيوية في تمكين العرض الديناميكي.
• نموذج: تحدد هذه الخاصية قالب HTML لمثيل أو مكون Vue. إنها سلسلة تحتوي على ترميز HTML ، والذي يمكن لمجمع قالب Vue تحليله.

لاحظ أنه عند استخدام خاصية قالب ، سيقوم برنامج التحويل البرمجي Vue فقط بعرض المحتوى المحدد في القالب.

في ما يلي مثال على تطبيق Vue بامتداد بيانات, طُرق، و نموذج ملكيات:

لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<عنوان>تطبيق Vueعنوان>
<النصيsrc=" https://unpkg.com/vue@3/dist/vue.global.js">النصي>
رأس>
<جسم>
<شعبةبطاقة تعريف="برنامج">
<h1 @انقر="عكس الرسالة" >{{ نص }}h1>
شعبة>
<النصي>
مقدار ثابت التطبيق = Vue.createApp ({
// نموذج: '
مرحبًا بك في تطبيق Vue
',
 بيانات() {
يعود {
 نص: "هذا هو تطبيق Vue الخاص بك"
 };
 },
 طُرق: {
 reverseMessage () {
هذا.text = هذا.text.split ('') .reverse ().'')
 }
 }
 });
برنامج.تتعدد("#برنامج");
النصي>
جسم>
لغة البرمجة>

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

ال بيانات() تقوم الدالة بإرجاع كائن بخاصية واحدة تسمى نص. ال @انقر التوجيه يستخدم لإرفاق أ عكس الرسالة () طريقة ل العنصر الذي يعكس نص ملكية.

عند تشغيل هذا البرنامج ، سيبدو تطبيق Vue الذي تم إنشاؤه كما يلي:

سيؤدي النقر فوق النص إلى عكسه.

لاحظ أن البرنامج علق على خاصية القالب للسماح بعرض المحتويات في تطبيق Vue. إذا تُرك بدون تعليق ، فسيعرض تطبيق Vue خاصية النموذج فقط:

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

استيفاء النص في Vue

استيفاء النص في Vue هو ميزة تسمح لك بربط البيانات بعناصر HTML ديناميكيًا. بمعنى آخر ، سيمكنك من إخراج قيمة خصائص بيانات مثيل Vue مباشرةً في HTML.

لتحقيق الاستيفاء النصي في Vue ، تحتاج إلى لف اسم خاصية البيانات بأقواس مزدوجة متعرجة. يفسر Vue المحتويات الموجودة داخل الأقواس المزدوجة المتعرجة كتعبيرات JavaScript ، ويستبدلها أيضًا بقيمتها الناتجة.

على سبيل المثال:

لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<عنوان>تطبيق Vueعنوان>
<النصيsrc=" https://unpkg.com/vue@3/dist/vue.global.js">النصي>
رأس>
<جسم>
<شعبةبطاقة تعريف="برنامج">
<h1>{{ رسالة }}h1>
<ص>مرحبًا {{name}}ص>
شعبة>
<النصي>
 تطبيق const = Vue.createApp ({
 بيانات() {
 يعود {
 الرسالة: "هذا هو تطبيق Vue الخاص بك." ،
 الاسم: "نوبل" ،
 };
 },
 });
 app.mount ("# تطبيق")؛
النصي>
جسم>
لغة البرمجة>

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

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

لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<عنوان>تطبيق Vueعنوان>
<النصيsrc=" https://unpkg.com/vue@3/dist/vue.global.js">النصي>
رأس>
<جسم>
<شعبةبطاقة تعريف="برنامج">
<h1>{{ رسالة }}h1>
<h3>مرحبًا {{name.toUpperCase ()}}h3>
<ص>هناك {{nameLength ()}} من الأحرف في اسمك.ص>
شعبة>
<ص>ليس هناص>
<النصي>
 تطبيق const = Vue.createApp ({
 بيانات() {
 يعود {
 الرسالة: "هذا هو تطبيق Vue الخاص بك" ،
 الاسم: "نوبل أوكافور" ،
 };
 },
 طُرق: {
 nameLength () {
 إرجاع this.name.length - 1 ؛
 },
 },
 });
 app.mount ("# تطبيق")؛
النصي>
جسم>
لغة البرمجة>

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

داخل تطبيق Vue ، تعرض عناصر HTML الثلاثة البيانات باستخدام مثيل Vue. ال h1 يعرض العنصر قيمة رسالة الممتلكات ، بينما h3 يعرض العنصر قيمة اسم الملكية مع إلى الحالة العليا() الطريقة المطبقة عليه.

ال ص يعرض العنصر النتيجة التي تم إرجاعها لملف الاسم الطول () الطريقة المحددة في طُرق كائن تطبيق Vue. ال الاسم الطول () طريقة إرجاع طول اسم مطروح من واحد.

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

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

بناء الواجهة الأمامية الخاصة بك باستخدام Vue

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