أساسيات توجيهات Vue.js

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

في هذه المقالة، سنستكشف أساسيات توجيهات Vue.js، ونغطي التوجيهات الأكثر استخدامًا وكيفية استخدامها في تطبيقات Vue الخاصة بك.

التوجيهات المستخدمة بشكل شائع في Vue.js

فيما يلي بعض التوجيهات الأكثر استخدامًا في Vue.js:

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

v-bind: ربط السمات ديناميكيًا

يتم استخدام التوجيه v-bind لربط السمات أو الخصائص بشكل ديناميكي بتعبير. على سبيل المثال، يمكنك ربط سمة src الخاصة بعنصر img بخاصية بيانات:

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

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

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

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

v-model: ربط البيانات في اتجاهين

يتم استخدام التوجيه v-model لإنشاء ربط بيانات ثنائي الاتجاه على عناصر إدخال النموذج. فهو يحافظ على مزامنة عنصر الإدخال وخاصية البيانات:

<template>
  <input v-model="message" placeholder="Type something..." />
  <p>You typed: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

v-if وv-else-if وv-else: العرض الشرطي

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

<template>
  <div v-if="isLoggedIn">Welcome back!</div>
  <div v-else-if="isGuest">Hello, Guest!</div>
  <div v-else>Please log in.</div>
</template>

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

v-for: عرض القائمة

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

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

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

v-on: معالجة الأحداث

يتم استخدام التوجيه v-on لربط مستمعي الأحداث بعناصر DOM. يمكنك التعامل مع تفاعلات المستخدم مثل النقرات والإدخال والمزيد:

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

<script>
export default {
  methods: {
    showAlert() {
      alert('Button clicked!');
    }
  }
};
</script>

الاختصار لـ v-on هو الرمز (@)، وبالتالي يمكن إعادة كتابة المثال أعلاه على النحو التالي:

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

v-show: تبديل الرؤية

يتم استخدام التوجيه v-show لتبديل ظهور عنصر بناءً على تعبير. وعلى عكس v-if، فإنه لا يزيل العنصر من DOM؛ بل يقوم فقط بتبديل خاصية CSS display:

<template>
  <div v-show="isVisible">This is visible!</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

v-html: عرض HTML

يتم استخدام التوجيه v-html لتحديث HTML الداخلي للعنصر. وهو مفيد عندما تحتاج إلى عرض HTML الخام في مكونات Vue الخاصة بك:

<template>
  <div v-html="rawHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<strong>Bold Text</strong>'
    };
  }
};
</script>

خاتمة

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