دایرکتیوها (Directives)
اینجا با دایرکتیوهای Vue آشنا می شوی. «دایرکتیو (Directive)» یک ویژگی HTML با پیشوند v- است که رفتار اضافی می دهد. این ویژگی به نمونه Vue وصل می شود و رابط را پویا می کند؛ مثل دکمۀ بازی که هر بار رویداد می فرستد.
دایرکتیو در Vue یعنی چه؟
دایرکتیوها باعث می شوند HTML به داده و رویدادها وصل شود. سپس رابط «واکنشی (Reactive)» می شود؛ یعنی با تغییر داده، نمایش هم عوض می شود. نتیجه، کدنویسی کمتر و ساخت صفحه پاسخ گو است.
انواع دایرکتیوهای Vue در این آموزش
- v-bind: اتصال ویژگی های تگ به داده داخل Vue.
- v-if / v-else-if / v-else: ساخت شرطی تگ ها.
- v-show: فقط نمایش یا پنهان کردن عنصر با شرط.
- v-for: ساخت فهرست از روی آرایه.
- v-on: اتصال رویدادها به کد یا متد؛ همراه با event-modifiers.
- v-model: اتصال دوجهته ورودی فرم و داده.
مثال: دایرکتیو v-bind
مرورگر، کلاس عنصر را از داده Vue می گیرد. سپس ظاهر تغییر می کند؛ مثل تغییر رنگ کارت در برنامه.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.pinkBG {
background-color: lightpink;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="vueClass"></div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
<script>
const app = Vue.createApp({
data() {
return {
vueClass: "pinkBG"
};
}
});
app.mount('#app');
<\/script>
</body>
</html>
نکته: نمونه بالا بدون Vue هم شدنی است؛ اما با داده های واقعی، قدرت Vue را بهتر می بینی.
گام های عملی
- یک
divباid="app"بساز. - Vue 3 را با CDN اضافه کن.
- نمونه Vue را با
createAppبساز. - یک داده مثل
vueClassتعریف کن. - با
v-bind:classبه عنصر وصلش کن.
جمع بندی سریع
- دایرکتیوها با
v-شروع می شوند. - به داده و رویداد وصل می شوند.
- رابط را پویا و واکنشی می کنند.
v-bindویژگی ها را متصل می کند.- گام به گام تمرین کن.
معرفی Vue را بخوان و بعد سراغ دایرکتیو v-bind برو.