Directives في Vue.js يسمح لك بتطبيق سلوكيات خاصة على عناصر في DOM. تكون مسبوقة بالصيغة v- وتستخدم لمعالجة DOM ، ومعالجة الأحداث ، وتقديم العناصر المشروطة ، والمزيد. يوفر Vue.js العديد من العناصر المضمنة directives مثل و و و ، والتي تغطي نطاقًا واسعًا من حالات الاستخدام الشائعة. v-if v-for v-bind v-on
فيما يلي بعض الأشياء الشائعة directives في Vue.js:
1. التوجيه: يتم استخدام هذا التوجيه لتقديم عنصر بشكل مشروط بناءً على شرط. v-if
مثال:
<div v-if="isShow">This element is only displayed if isShow is true.</div>
2. التوجيه: يستخدم هذا التوجيه للتكرار عبر مصفوفة أو كائن وإنشاء العناصر المقابلة. v-for
مثال:
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
3. التوجيه: يستخدم هذا التوجيه لربط قيمة التعبير بسمة أو خاصية عنصر. v-bind
مثال:
<img v-bind:src="imageUrl">
4. التوجيه: يستخدم هذا التوجيه للاستماع إلى الأحداث والتعامل معها على عنصر ما. v-on
مثال:
<button v-on:click="handleClick">Click me!</button>
5. التوجيه: ينشئ هذا التوجيه ارتباطًا ثنائي الاتجاه بين عنصر الإدخال وخاصية البيانات. v-model
مثال:
<input v-model="message">
هذه ليست سوى بعض الأساسيات directives في Vue.js. يمكنك أيضًا إنشاء العرف الخاص بك directives لأداء سلوكيات معينة في تطبيق Vue.js الخاص بك.