دایرکتیوهای پایه‌ای در Vue.js
دایرکتیوها (Directives) در Vue.js ویژگی‌هایی هستند که به شما این امکان را می‌دهند تا به سادگی تغییرات خاصی را در DOM انجام دهید. این دستورات به‌طور ویژه به المان‌های HTML اضافه می‌شوند تا رفتارهای خاصی را اعمال کنند. دایرکتیوها با پیشوند v- شناسایی می‌شوند و در Vue به‌طور گسترده برای اعمال ویژگی‌های مختلف به عناصر استفاده می‌شوند.
مهم‌ترین دایرکتیوهای پایه‌ای در Vue.js
۱. v-bind
دایرکتیو v-bind برای اتصال ویژگی‌ها (attributes) به داده‌ها استفاده می‌شود. این دایرکتیو به شما این امکان را می‌دهد که ویژگی‌های HTML را به‌صورت واکنش‌گرا و به‌طور مستقیم با داده‌های موجود در Vue لینک کنید.
مثال استفاده از v-bind:
<div>
<a v-bind:href="url">لینک به وب‌سایت</a>
</div>
</template>
<script>
export default {
data() {
return {
url: 'https://www.example.com'
}
}
}
</script>
در اینجا:
- v-bind:href="url" به شما این امکان را می‌دهد که آدرس لینک را به طور واکنش‌گرا با داده url ارتباط دهید.
۲. v-model
دایرکتیو v-model برای ایجاد ارتباط دوطرفه بین داده‌ها و فرم‌ها استفاده می‌شود. این دایرکتیو معمولا در فیلدهای ورودی (مثل input, textarea, select) به کار می‌رود.
مثال استفاده از v-model:
<div>
<input v-model="message" placeholder="پیام خود را وارد کنید" />
<p>پیام شما: {{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
}
}
</script>
در اینجا:
- v-model="message" باعث می‌شود که مقدار ورودی به طور خودکار با داده message ارتباط برقرار کند.
۳. v-if
دایرکتیو v-if برای شرطی کردن نمایش یا مخفی کردن المان‌ها در DOM استفاده می‌شود. این دایرکتیو تنها زمانی که شرط برقرار باشد، المان را در صفحه نمایش می‌دهد.
مثال استفاده از v-if:
<div>
<p v-if="isVisible">این متن فقط زمانی نمایش داده می‌شود که isVisible درست باشد.</p>
<button @click="toggleVisibility">تغییر وضعیت نمایش</button>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
}
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
}
</script>
در اینجا:
- v-if="isVisible" باعث می‌شود که متن فقط در صورتی که مقدار isVisible درست باشد، نمایش داده شود.
۴. v-for
دایرکتیو v-for برای تکرار و ساخت لیست از داده‌ها استفاده می‌شود. این دایرکتیو به شما این امکان را می‌دهد که داده‌های یک آرایه یا شیء را به طور دینامیک در HTML تکرار کنید.
مثال استفاده از v-for:
<div>
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ['آیتم 1', 'آیتم 2', 'آیتم 3']
}
}
}
</script>
در اینجا:
- v-for="item in items" باعث می‌شود که آیتم‌های موجود در آرایه items به طور خودکار در لیست نمایش داده شوند.
۵. v-show
دایرکتیو v-show مشابه v-if است، اما تفاوت آن این است که v-show تنها ویژگی CSS display را تغییر می‌دهد و المان را از DOM حذف نمی‌کند.
مثال استفاده از v-show:
<div>
<p v-show="isVisible">این متن همیشه در DOM موجود است، اما نمایش یا مخفی می‌شود.</p>
<button @click="toggleVisibility">تغییر وضعیت نمایش</button>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
}
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
}
</script>
در اینجا:
- v-show="isVisible" باعث می‌شود که المان با تغییر وضعیت isVisible فقط پنهان یا نمایش داده شود، اما همچنان در DOM موجود است.
۶. v-on
دایرکتیو v-on برای گوش دادن به رویدادهای DOM استفاده می‌شود. شما می‌توانید از این دایرکتیو برای اعمال رویدادهایی مانند کلیک، تغییر، ارسال فرم و غیره استفاده کنید.
مثال استفاده از v-on:
<div>
<button v-on:click="handleClick">کلیک کنید</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
alert('دکمه کلیک شد!');
}
}
}
</script>
در اینجا:
- v-on:click="handleClick" باعث می‌شود که وقتی دکمه کلیک شود، متد handleClick فراخوانی شود.
۷. v-bind:class
دایرکتیو v-bind:class برای افزودن کلاس‌های CSS به یک عنصر به‌صورت واکنش‌گرا استفاده می‌شود.
مثال استفاده از v-bind:class:
<div>
<p v-bind:class="{ active: isActive, 'text-danger': hasError }">این متن کلاس‌های مختلفی خواهد داشت.</p>
<button @click="toggleClasses">تغییر وضعیت</button>
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
hasError: false
}
},
methods: {
toggleClasses() {
this.isActive = !this.isActive;
this.hasError = !this.hasError;
}
}
}
</script>
در اینجا:
- v-bind:class="{ active: isActive, 'text-danger': hasError }" به‌طور واکنش‌گرا کلاس‌های active و text-danger را به عنصر اضافه می‌کند یا از آن‌ها حذف می‌کند.
جمع‌بندی
- دایرکتیوها در Vue.js ویژگی‌های HTML را به‌طور واکنش‌گرا تغییر می‌دهند.
- v-bind برای ارتباط دادن ویژگی‌های HTML با داده‌ها، v-model برای فرم‌های ورودی، v-if و v-show برای نمایش/مخفی کردن المان‌ها، v-for برای تکرار داده‌ها، v-on برای مدیریت رویدادها و v-bind:class برای اضافه کردن کلاس‌ها به‌طور واکنش‌گرا استفاده می‌شوند.
- دایرکتیوهای Vue به شما کمک می‌کنند تا عملکردهایی را بدون نیاز به نوشتن کد جاوااسکریپت اضافی، به راحتی و به‌صورت declarative در UI پیاده‌سازی کنید.
