Vue.js للمبتدئين الدرس 6: فئات وأنماط الربط

اليوم ، في الدرس السادس من دورة Vue ، سنتحدث عن كيفية تصميم عناصر HTML ديناميكيًا عن طريق ربط البيانات styleبسماتها وفئات الربط بالعناصر.









→ درس المبتدئين Vue.js 1: المثال Vue

→ Vue.js للمبتدئين ، الدرس 2: سمات الربط

→ Vue.js الدرس 3: العرض الشرطي

→ Vue.js للمبتدئين الدرس 4: عرض القوائم

→ Vue .js للمبتدئين الدرس الخامس: معالجة الأحداث

→ Vue.js للمبتدئين الدرس 6: فئات وأنماط الربط

← Vue.js للمبتدئين الدرس 7: الخصائص المحسوبة

→ Vue.js للمبتدئين الدرس 8: المكونات

الغرض من الدرس

الهدف الأول من هذا الدرس هو استخدام لون يطابق تنوع المنتج لتخصيص خصائص background-colorالعناصر <div>التي تعرض معلومات حول هذه الأشكال. منذ المنتج المتغيرات تتوافق مع الألوان greenو blue، نحن بحاجة إلى عنصر واحد ل <div>يكون لها لون الخلفية الخضراء، والزرقاء الآخرين.



الهدف الثاني هو استخدام ربط الفئة لتعطيل عناصر التحكم غير الضرورية في بعض الشروط.

الكود الأولي

هذا ما يبدو عليه الكود الآن index.html:

<div id="app">
  <div class="product">
    <div class="product-image">
      <img :src="image" />
    </div>

    <div class="product-info">
      <h1>{{ product }}</h1>
      <p v-if="inStock">In stock</p>
      <p v-else>Out of Stock</p>

      <ul>
        <li v-for="detail in details">{{ detail }}</li>
      </ul>
      <div v-for="variant in variants" :key="variant.variantId">
        <p @mouseover="updateProduct(variant.variantImage)">
          {{ variant.variantColor }}
        </p>
      </div>

      <button v-on:click="addToCart">Add to cart</button>

      <div class="cart">
        <p>Cart({{ cart }})</p>
      </div>

    </div>
  </div>
</div>

إليك ما يوجد الآن main.js:

var app = new Vue({
    el: '#app',
    data: {
        product: "Socks",
        image: "./assets/vmSocks-green.jpg",
        inStock: true,
        details: ['80% cotton', '20% polyester', 'Gender-neutral'],
        variants: [
          {
            variantId: 2234,
            variantColor: "green",
            variantImage: "./assets/vmSocks-green.jpg"    
          },
          {
            variantId: 2235,
            variantColor: "blue",
            variantImage: "./assets/vmSocks-blue.jpg" 
          }
        ],
        cart: 0
    },
    methods: {
      addToCart() {
        this.cart += 1
      },
      updateProduct(variantImage) {
        this.image = variantImage
      }
    }
})

مهمة

في الدرس السابق ، أنشأنا معالج أحداث يغير صورة المنتج بناءً على العنصر الذي <p>تم تمرير مؤشر الماوس فوقه. بدلاً من عرض اسم اللون في عنصر ما <p>، نود استخدام هذا اللون لتعيين خاصية background-colorالعنصر المقابل <div>. بهذه الطريقة ، بدلًا من تحريك الماوس فوق النصوص ، سنكون قادرين على تحريكه فوق المربعات الملونة ، مما سيؤدي إلى عرض صورة المنتج على الصفحة ، والتي يتوافق لونها مع اللون الموضح في المربع.

القرار

أولاً ، دعنا نضيف <div>فئة إلى عنصر color-boxيحدد عرضه وارتفاعه والحشو العلوي الخارجي. نظرًا لأننا ، حتى بعد القيام بذلك ، نستمر في عرض <div>الكلمات greenوفي العناصر blue، يمكننا أخذ أسماء الألوان المخزنة في الكائنات التي تصف متغيرات المنتج واستخدام هذه الأسماء عند ربط النمط بالسمة style. هكذا تبدو:

<div
  class="color-box"
  v-for="variant in variants"
  :key="variant.variantId"
  :style="{ backgroundColor:variant.variantColor }"
>
  <p @mouseover="updateProduct(variant.variantImage)">
    {{ variant.variantColor }}
  </p>
</div>

لاحظ السطرين الثاني والخامس من هذا الرمز. هنا نضيف <div>فئة إلى عنصر color-boxونربط نمطًا مضمنًا به. يتم استخدام النمط المضمن هنا لتعيين خصائص background-colorالعناصر ديناميكيًا <div>. لون الخلفية للعناصر مأخوذ من variant.variantColor.





العناصر <div>والعلامات المبسطة المعروضة عليها



الآن بعد أن تم<div>تصميمالعنصرباستخدامvariantColor، لم نعد بحاجة إلى عرض اسم اللون فيه. لذلك ، يمكننا التخلص من العلامة<p>ونقل التركيبة@mouseover=«updateProduct(variant.variantImage)»إلى العنصر نفسه<div>.



هذا ما سيبدو عليه الرمز بعد إجراء التغييرات أعلاه:

<div
  class="color-box"
  v-for="variant in variants"
  :key="variant.variantId"
  :style="{ backgroundColor:variant.variantColor }"
  @mouseover="updateProduct(variant.variantImage)"
>
</div>

عناصر منمقة <div>بدون نص



الآن ، عند تحريك الماوس فوق مربع أزرق ، يتم عرض صورة الجوارب الزرقاء على الصفحة. وعندما تمرر الماوس فوق المربع الأخضر - صورة الجوارب الخضراء. جمال!



الآن بعد أن فهمنا ربط النمط ، دعنا نتحدث عن ربط الصنف.

مهمة

تحتوي بياناتنا الآن على ما يلي:

inStock: true,

عندما inStockيأخذ العقار قيمة false، نحتاج إلى منع زوار الموقع من النقر فوق الزر Add to Cart، نظرًا لعدم وجود منتج في المخزون ، مما يعني أنه لا يمكن إضافته إلى سلة التسوق. لحسن الحظ بالنسبة لنا ، هناك سمة HTML خاصة تم تسميتها بعد disabledذلك يمكنك تعطيل الزر.



إذا تذكرنا مادة الدرس الثاني ، فقد اتضح أنه يمكننا استخدام تقنية ربط السمة لإضافة سمة إلى عنصر disabledعندما يكون inStockمساويًا false، أو بالأحرى ، في الحالة التي تكون فيها هذه القيمة غير صحيحة ( !inStock). دعنا نعيد كتابة رمز الزر:

<button
  v-on:click="addToCart"
  :disabled="!inStock"
>
  Add to cart
</button>

الآن ، إذا كان inStockمكتوبًا false، فلن يعمل الزر. لكن مظهره لن يتغير. بعبارة أخرى ، سيظل الزر يبدو كما لو كان يمكن النقر عليه ، على الرغم من عدم وجود فائدة في الواقع من النقر فوقه.





يبدو الزر المعطل هو نفسه الزر العادي ، لكن لا فائدة من النقر فوقه

القرار

هنا سنمضي في العمل وفقًا لنفس المخطط كما فعلنا عند الارتباط inStockبسمة disabled. وبالتحديد ، سنربط الفصل disabledButtonبزرنا في الحالات التي يتم inStockتخزينها فيها false. باستخدام هذا النهج ، إذا كان الزر لا معنى له للنقر ، فسيبدو وفقًا لذلك.

<button
  v-on:click="addToCart"
  :disabled="!inStock"
  :class="{ disabledButton: !inStock }"
>
  Add to cart
</button>

يبدو الزر "معطل" كما ينبغي.



كما ترى ، يتحول الزر الآن إلى اللون الرمادي إذا كانinStockيساويfalse.



دعنا نلقي نظرة على ما يحدث هنا.



ألق نظرة على هذا الخط:

:class="{ disabledButton: !inStock }"

نستخدم هنا الاختصار للتوجيه v-bind( :) لتنظيم ربط البيانات بسمة classالزر. في الأقواس المتعرجة ، نحدد وجود الطبقة disabledButtonبناءً على حقيقة الخاصية inStock.



بمعنى آخر ، في حالة عدم وجود منتج في المخزون ( !inStock) ، تتم إضافة فئة إلى الزر disabledButton. نظرًا لأن هذه الفئة تضبط لون خلفية الزر إلى اللون الرمادي ، يصبح الزر رماديًا.



رائع! لقد قمنا للتو بدمج معرفتنا الجديدة بربط الفئة مع معرفة ربط السمة ، وتمكنا من تعطيل الزر وجعله رماديًا إذا كان inStockيساوي false.

معلومة اضافية

يمكنك ربط كائن من الفئات أو مجموعة من الفئات بعنصر:

<div :class="classObject"></div>
<div :class="[activeClass, errorClass]"></div>

ورشة عمل

عند كتابة inStockالقيمة false، تحتاج إلى ربط العلامة <p>التي تعرض النص Out of Stock، وهي فئة تضيف نمطًا إلى العنصر text-decoration: line-through، يتوسطها خط النص.



→ هنا نموذج يمكنك استخدامه لحل هذه المشكلة.



→ هنا حل المشكلة.

النتيجة

إليك أهم الأشياء التي تعلمناها اليوم:

• يمكن ربط البيانات بسمة العناصر style.
• يمكن ربط البيانات بسمة العناصر class.
• عند تنظيم ربط الفئات ، يمكنك استخدام التعبيرات ، التي يحدد حسابها ما إذا كانت الفئة المقابلة ستكون مرتبطة بعنصر.

لقد أكملت معظم هذه الدورة. يرجى مشاركة انطباعاتك.



→ درس المبتدئين Vue.js 1: المثال Vue

→ Vue.js للمبتدئين ، الدرس 2: سمات الربط

→ Vue.js الدرس 3: العرض الشرطي

→ Vue.js للمبتدئين الدرس 4: عرض القوائم

→ Vue .js للمبتدئين الدرس الخامس: معالجة الأحداث

→ Vue.js للمبتدئين الدرس 6: فئات وأنماط الربط

← Vue.js للمبتدئين الدرس 7: الخصائص المحسوبة

→ Vue.js للمبتدئين الدرس 8: المكونات