ذهب ملعب الأصل الإنجليزية على الانترنت vuemastery.com، أعددنا لك ترجمة إلى الروسية. بعد الانتهاء من الدرس الأول ، ستتعلم ما هو مثيل Vue وكيفية البدء في تطوير تطبيقات Vue الخاصة بك.
المتطلبات الأساسية
يُتوقع من أولئك الذين يختارون المشاركة في هذه الدورة أن يكون لديهم معرفة بتقنيات الويب الأساسية: HTML و CSS و JavaScript.
في هذه الدورة ، سنقوم بتطوير صفحة عبارة عن بطاقة منتج.
الصفحة التي سنقوم بتطويرها
الغرض من الدرس
في هذا البرنامج التعليمي ، سنلقي نظرة على كيفية استخدام Vue لعرض البيانات على صفحة الويب.
الرمز الأولي
سنبدأ برمز HTML وجافا سكريبت بسيط للغاية في ملفين.
الملف
index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Product App</title>
</head>
<body>
<div id="app">
<h1>Product Name</h1>
</div>
<script src="main.js"></script>
</body>
</html>
ملف Main.js:
var product = "Socks";
تستخدم هذه الدورة منصة codepen.io كبيئة تقوم بها بأداء واجبك . تم تصميم القوالب المقابلة كمشاريع CodePen. يتم تشجيع أولئك الذين يأخذون هذه الدورة على تشغيل كل التعليمات البرمجية التي يأتون إليها هنا بشكل مستقل.
تحتوي واجهة CodePen على ثلاث مناطق للتعليمات البرمجية. هذه هي حقول HTML و CSS و JS على التوالي. يتم توصيل الرمز الذي تم إدخاله في حقلي CSS و JS تلقائيًا بصفحة الويب الموضحة في حقل HTML. هذا - من أجل إعادة إنشاء المثال أعلاه في بيئة CodePen ، تحتاج إلى إدخال رمز HTML الموجود في علامة
<body>الملف index.htmlدون آخر سطر متصل main.jsفي المنطقة ، والتعليمة البرمجية في منطقة JS main.js.
الشروع في العمل مع CodePen ليس من الضروري
استخدام CodePen لتشغيل نموذج التعليمات البرمجية. يمكنك بسهولة استخدام بعض الخدمات الأخرى عبر الإنترنت ، أو يمكنك الحصول عليها من خلال بيئة تطوير محلية من خلال إعادة إنشاء الملفات الموضحة هنا.
مهمة
نحتاج إلى آلية تسمح لنا بأخذ قيمة موجودة في شفرة JavaScript ، على سبيل المثال ، ما هو مكتوب حاليًا إلى متغير
product، ووضعه في رمز صفحة الويب ، في علامة h1.
سيساعدنا إطار عمل Vue.js على حل هذه المشكلة. هنا هو الدليل الرسمي باللغة الروسية لذلك.
الخطوة الأولى في عملنا مع Vue هي ربط إطار العمل بالصفحة. للقيام بذلك ، دعنا نجري تغييرات على الملف
index.htmlعن طريق إضافة ما main.jsيلي إليه ، مباشرة فوق رمز اتصال الملف :
<script src="https://unpkg.com/vue"></script>
بعد ذلك ، في
main.js، نقوم بإدخال الكود التالي ، وإزالة تصريح المتغير منه product:
var app = new Vue({
el: '#app',
data: {
product: "Socks"
}
})
نحتاج الآن إلى ربط DOM ببيانات مثيل Vue. يتم ذلك باستخدام بنية HTML خاصة ، باستخدام بنية Moustache ، والتي تستخدم أقواس متعرجة مزدوجة:
<div id="app">
<h1>{{ product }}</h1>
</div>
سيتم استبدال تعبير JavaScript بأقواس متعرجة بقيمة
productخاصية الكائن data.
هذه هي الطريقة التي سيبدو بها المشروع في CodePen إذا كان كل شيء يعمل كما ينبغي.
البيانات المنقولة من JavaScript إلى صفحة HTML
كما ترون ، تمكنا من نقل البيانات من شفرة JavaScript إلى صفحة HTML. الآن دعونا نلقي نظرة على ما قمنا به للتو.
Vue المثيل
فيما يلي رسم تخطيطي للرمز المستخدم لإنشاء مثيل Vue:
var app = new Vue({options})
مثيل Vue هو الكيان الجذر للتطبيق. يتم إنشاؤه بتمرير
Vueكائن مع خيارات إلى المُنشئ . يحتوي هذا الكائن على خصائص وأساليب مختلفة تمنح مثيل Vue القدرة على تخزين البيانات وتنفيذ بعض الإجراءات.
ربط مثيل Vue بعنصر صفحة الويب
لاحظ الخاصية التالية لكائن الخيار المستخدم لإنشاء مثيل Vue:
el: '#app'
نستخدم هذه الخاصية لربط مثيل Vue بعنصر صفحتنا. يتيح لنا ذلك إنشاء رابط بين مثيل Vue والجزء المقابل من DOM. بمعنى آخر ، نقوم بتنشيط Vue على العنصر
<div>بالمعرف appعن طريق الكتابة '#app'إلى خاصية elكائن الخيار الذي تم استخدامه لإنشاء مثيل Vue.
وضع البيانات في نسخة Vue
يحتوي مثيل Vue على بعض مساحة التخزين. يتم وصف هذه البيانات باستخدام
dataخاصية كائن مع خيارات:
data: {
product: "Socks"
}
يمكن الوصول إلى البيانات المخزنة في مثيل Vue من عنصر صفحة الويب التي يتصل بها مثيل Vue.
استخدام تعبيرات JavaScript في كود HTML
إذا أردنا أن
productيتم عرض قيمة الخاصية حيث يتم عرض نص العنوان من المستوى الأول ، فيمكن وضع اسم هذه الخاصية في أقواس معقوفة مزدوجة في العلامة المقابلة:
<h1>{{ product }}</h1>
في الواقع ، نحن نتحدث عن حقيقة أن الأقواس المتعرجة المزدوجة هي تعبير جافا سكريبت ، والنتائج التي يستبدلها الإطار في العلامة
<h1>كنص.
مصطلح مهم: التعبير
تتيح لك التعبيرات استخدام القيم المخزنة في مثيل Vue ، بالإضافة إلى تراكيب JavaScript ، والتي يتيح لك استخدامها إنشاء بعض القيم الجديدة.
عندما يرى Vue تعبيرًا
{{ product }}، فإنه يفهم أننا نشير إلى البيانات المرتبطة بمثيل Vue باستخدام مفتاح product. يستبدل إطار العمل اسم المفتاح بقيمته المقابلة. في هذه الحالة هو - Socks.
أمثلة على التعبيرات
كما ذكرنا ، يمكنك استخدام بنيات JavaScript مختلفة في أقواس متعرجة مزدوجة. وهنا بعض الأمثلة:
{{ product + '?' }}
{{ firstName + ' ' + lastName }}
{{ message.split('').reverse().join('') }}
التعرف على التفاعل
السبب وراء إخراج Vue
<h1>لقيمة خاصية في العلامة بعد تحميل الصفحة مباشرة productهو أن Vue هو إطار عمل تفاعلي. بمعنى آخر ، ترتبط بيانات مثيل Vue بجميع الأماكن في صفحة الويب التي تحتوي على روابط لتلك البيانات. ونتيجة لذلك ، لا يمكن لـ Vue عرض البيانات فقط في مكان ما على الصفحة ، ولكن أيضًا تحديث رمز HTML المطابق في حالة تغيير البيانات التي تشير إليها.
لإثبات ذلك ، دعنا نفتح وحدة تحكم أدوات مطور المتصفح ونغير القيمة المكتوبة لخاصية
productالكائن app. عندما نقوم بذلك ، على سبيل المثال ، من خلال الكتابة في وحدة التحكم app.product = 'Coat'، سيتغير النص المعروض على الصفحة أيضًا.
يؤدي تغيير قيمة خاصية المنتج إلى تغيير النص المعروض على صفحة الويب هل
ترى مدى سهولة القيام بذلك؟
ورشة عمل
قم بإضافة مفتاح
descriptionيحتوي على نص إلى البيانات الموجودة بالفعل في مثيل Vue A pair of warm, fuzzy socks. ثم اطبع قيمة هذا المفتاح في العنصر <p>الذي يجب أن يكون أسفل العنصر <h1>.
→ هنا قالب يمكنك استخدامه لحل هذه المشكلة.
→ هنا هو حل المشكلة.
النتيجة
لنتحدث عما تعلمناه اليوم:
- لقد تعلمنا كيفية البدء في تطوير تطبيق Vue من خلال إنشاء مثيل Vue وكيفية عرض البيانات على صفحة الويب.
- مثيل Vue هو جذر كل تطبيق Vue.
- يتصل مثيل Vue بعنصر DOM المحدد عند إنشائه.
- يمكن تخزين البيانات المخزنة في مثيل Vue إلى صفحة باستخدام بناء جملة Moustache ، والتي تستخدم أقواس معقوفة مزدوجة
{{ }}تحتوي على تعبيرات JavaScript. - Vue هو إطار تفاعلي.
→ الجزء الأول: إنشاء مثيل لـ Vue
→ الجزء 2: ربط السمة في Vue
