فهم قوالب Vue.js وكيفية عملها

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

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

ما هي قوالب Vue.js؟

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

فيما يلي مثال أساسي لقالب Vue.js:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js Templates!'
    };
  }
};
</script>

في هذا المثال، يحتوي القالب على بنية HTML بسيطة مع عنصر '<h1>'. صيغة {{ message }} هي مثال على صيغة قالب Vue، والتي تربط خاصية البيانات message بعنصر '<h1>'.

بناء الجملة والتوجيهات للقالب

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

v-bind: يربط سمة بتعبير.
v-model: ينشئ ربط بيانات ثنائي الاتجاه على عناصر إدخال النموذج.
v-if: يقوم بعرض عنصر بشكل مشروط بناءً على تعبير.
v-for: يقوم بعرض قائمة من العناصر عن طريق التكرار على مصفوفة أو كائن.
v-on: يقوم بربط مستمع الحدث بعنصر.

سمات الربط باستخدام v-bind

يتم استخدام التوجيه v-bind لربط سمات HTML ببيانات مثيل Vue. يتيح لك هذا تعيين سمات مثل src وhref وalt والمزيد بشكل ديناميكي.

<template>
  <img v-bind:src="imageUrl" alt="Dynamic Image" />
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    };
  }
};
</script>

الاختصار لـ v-bind هو ببساطة علامة النقطتين (:)، مما يجعل القالب أكثر إيجازًا:

<img :src="imageUrl" alt="Dynamic Image" />

التعامل مع الأحداث باستخدام v-on

يتم استخدام التوجيه v-on لربط مستمعي الأحداث بالعناصر الموجودة في القالب. يتيح لك هذا تنفيذ الأساليب عند تشغيل أحداث معينة، مثل النقرات أو حركات الماوس أو إرسال النماذج.

<template>
  <button v-on:click="sayHello">Click Me</button>
</template>

<script>
export default {
  methods: {
    sayHello() {
      alert('Hello, Vue.js!');
    }
  }
};
</script>

مثل v-bind، فإن التوجيه v-on لديه أيضًا نسخة مختصرة، وهي الرمز at (@):

<button @click="sayHello">Click Me</button>

العرض الشرطي باستخدام v-if وv-else وv-else-if

تدعم قوالب Vue.js العرض المشروط باستخدام التوجيهات v-if وv-else وv-else-if. تتيح لك هذه التوجيهات عرض العناصر بشكل مشروط استنادًا إلى صدق التعبير.

<template>
  <div>
    <p v-if="isLoggedIn">Welcome back!</p>
    <p v-else>Please log in.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false
    };
  }
};
</script>

عرض القائمة باستخدام v-for

يتم استخدام التوجيه v-for لعرض قائمة من العناصر عن طريق التكرار على مصفوفة أو كائن. يتم استخدامه عادةً في قوالب Vue لعرض البيانات في حلقة.

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

يتم استخدام السمة :key لتحديد كل عنصر في القائمة بشكل فريد، مما يساعد Vue على تحسين العرض.

إمكانية إعادة استخدام القالب مع الفتحات

يتيح Vue.js مكونات قابلة لإعادة الاستخدام والتكوين من خلال استخدام <slot>. توفر الفتحات طريقة لتمرير المحتوى إلى المكونات الفرعية وتسمح بقوالب مرنة وقابلة لإعادة الاستخدام.

<template>
  <div>
    <slot>Default content if no slot content provided</slot>
  </div>
</template>

يمكنك بعد ذلك استخدام هذا المكون وتمرير المحتوى المخصص إلى الفتحة الخاصة به:

<template>
  <my-component>
    <p>Custom content inside the slot</p>
  </my-component>
</template>

خاتمة

تُعد قوالب Vue.js ميزة قوية توفر طريقة بسيطة ومرنة لبناء واجهات المستخدم. باستخدام التوجيهات مثل v-bind وv-on وv-if وv-for والفتحات، يمكنك إنشاء مكونات ديناميكية وتفاعلية وقابلة لإعادة الاستخدام. يعد فهم قوالب Vue.js وإتقانها أمرًا ضروريًا لبناء تطبيقات فعّالة وقابلة للصيانة.

vue قوالب توجيهات فتحات v-bind v-on مكونات شرطي عرض بيانات قائمة أحداث إمكانية إعادة الاستخدام هيكل