في الدرس الثاني ، سنتحدث حول ربط السمة ، حول ربط البيانات المخزنة في مثيل Vue بسمات عناصر HTML. → الدرس الأول
الغرض من الدرس
سنلقي نظرة هنا على كيفية عرض صورة وتعيين نص السمة باستخدام ربط السمة
alt. سنأخذ البيانات ذات الصلة من مثيل Vue.
الرمز الأولي
لنبدأ برمز HTML التالي ، الموجود في الملف
index.html، في العلامة <body>:
<div id="app">
<div class="product">
<div class="product-image">
<img src="" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</div>
انتبه للعلامة
<div>مع الفصل product-image. يحتوي على العنصر <img>الذي نريد ربط البيانات اللازمة لعرض الصورة ديناميكيًا.
يتم استخدام عنصر
<div>مع فئة product-infoلعرض اسم المنتج.
إليك جافا سكريبت الموجود في الملف
main.js:
var app = new Vue({
el: '#app',
data: {
product: "Socks",
image: "./assets/vmSocks-green.jpg"
}
})
لاحظ أن الكائن
dataيحتوي الآن على خاصية جديدة imageتحتوي على مسار الصورة.
→ يمكن العثور على CSS المستخدمة في هذا البرنامج التعليمي هنا .
لربط النمط بـ
index.html، أضف ما <head>يلي إلى العلامة :
<link rel="stylesheet" type="text/css" href="style.css"
هنا ننتقل من افتراض أن ملف النمط له اسم
style.cssويتم تخزينه في نفس المجلد index.html.
هذه هي الصورة التي سنعرضها على الصفحة.
مهمة
نحتاج إلى صورة ليتم عرضها على الصفحة. من خلال القيام بذلك ، نريد التعامل مع هذه الصورة ديناميكيًا. أي أننا بحاجة إلى القدرة على تغيير المسار إلى الصورة المخزنة في مثيل Vue ، ونرى على الفور نتائج هذه التغييرات على الصفحة. نظرًا لأن سمة
srcالعنصر <img>هي المسؤولة عن الصورة التي سيعرضها العنصر ، نحتاج إلى ربط بعض البيانات بهذه السمة. سيسمح لنا هذا بتغيير الصورة ديناميكيًا استنادًا إلى البيانات المخزنة في مثيل Vue.
مصطلح مهم: ربط البيانات
عندما نتحدث عن ربط البيانات في Vue ، فإن النقطة هي أن المكان في القالب الذي يتم فيه استخدام البيانات أو عرضها هو "متصل" أو "مرتبط" مباشرة بمصدر البيانات ، أي بالكائن المقابل المخزن في المثيل فيو.
بمعنى آخر ، يرتبط كيان مصدر البيانات بالكيان الذي يتم استخدام هذه البيانات به ، مع مصدر البيانات. في حالتنا ، مصدر البيانات هو نسخة Vue والوعة هي سمة
srcللعنصر <img>.
حل المشكلة
لربط قيمة خاصية
imageمن كائن بيانات إلى خاصية srcعلامة <img>، سنستخدم توجيه Vue v-bind. دعنا نعيد كتابة رمز العلامة <img>من الملف index.html:
<img v-bind:src="image" />
عندما يرى Vue ، أثناء معالجة صفحة ، مثل هذا البناء ، يستبدله الإطار برمز HTML التالي:
<img src="./assets/vmSocks-green.jpg" />
إذا تم عمل كل شيء بشكل صحيح ، فسيتم عرض صورة على الصفحة.
يتم عرض صورة الجوارب الخضراء على الصفحة
، وإذا قمت بتغيير قيمة
imageخاصية الكائنdata، فستتغير قيمة السمة وفقًا لذلكsrc، مما سيؤدي إلى عرض صورة جديدة على الصفحة.
لنفترض أننا نريد استبدال الجوارب الخضراء بالأخرى الزرقاء. للقيام بذلك ، بالنظر إلى أن مسار الملف بالصورة الجديدة يبدو
./assets/vmSocks-blue.jpg(يمكن العثور على ملف الصورة هنا ) ، يكفي إحضار كود وصف الخاصيةimageفي الكائنdataإلى هذا النموذج:
image: "./assets/vmSocks-blue.jpg"
سيؤدي ذلك إلى ظهور صورة الجوارب الزرقاء على الصفحة.
يتم عرض صورة الجوارب الزرقاء على الصفحة
حالات استخدام إضافية لـ v-bind
v-bindلا يمكن استخدام
التوجيه مع سمة فقط src. يمكن أن يساعدنا أيضًا في ضبط سمة الصورة ديناميكيًا alt.
دعنا نضيف
dataخاصية جديدة إلى الكائن مع الخيارات altText:
altText: "A pair of socks"
دعنا نربط البيانات المقابلة بالسمة
alt، مع جلب رمز العنصر <img>إلى هذا النموذج:
<img v-bind:src="image" v-bind:alt="altText" />
هنا ، كما في حالة السمة
src، يتم استخدام البناء ، ويتكون من v-bindالنقطتين واسم السمة ( alt).
الآن ، إذا تغيرت خصائص مثيل Vue
imageأو altText، <img>ستظهر البيانات المحدثة في سمات العنصر المطابق . لن يؤدي ذلك إلى قطع الارتباط بين سمات العنصر والبيانات المخزنة في مثيل Vue.
يتم استخدام هذه التقنية باستمرار عند تطوير تطبيقات Vue. ولهذا السبب ، هناك نسخة مختصرة من سجل البناء
v-bind:. يبدو :. إذا كنت تستخدم هذه التقنية عند كتابة رمز العلامة <img>، فستحصل على ما يلي:
<img :src="image" />
إنه بسيط ومريح. تعمل هذه التقنية على تحسين نظافة الشفرة.
ورشة عمل
قم بإضافة ارتباط (عنصر
<a>) بنص إلى الصفحة More products like this. في الكائن ، قم dataبإنشاء خاصية linkتحتوي على الارتباط https://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=socks. مأزق، وذلك باستخدام التوجيه v-bind، وهي خاصية linkإلى سمة من hrefعنصر <a>.
→ هنا قالب يمكنك استخدامه لحل هذه المشكلة.
→ هنا هو حل المشكلة.
النتيجة
إليك ما تعلمناه اليوم:
- يمكن ربط البيانات المخزنة في مثيل Vue بسمات HTML.
- يتم استخدام التوجيه لربط البيانات بالسمات
v-bind. الاختصار لهذا التوجيه هو القولون (:). - يشير اسم السمة الذي يتبع النقطتين إلى السمة التي ترتبط بها البيانات.
- كقيمة للسمة المحددة في علامات الاقتباس ، يتم استخدام اسم المفتاح ، والذي يمكنك من خلاله العثور على البيانات المتصلة بالسمة.
إذا كنت تأخذ هذه الدورة ، نطلب منك أن تخبرنا عن البيئة التي تستخدمها للقيام بأداء واجبك.
→ الجزء الأول: إنشاء مثيل لـ Vue
→ الجزء 2: ربط السمة في Vue
