دایرکتیوها (Directives)
«دایرکتیو (Directive)» یک دستور کوتاه در قالب است. این دستور به Vue می گوید با DOM چه کند. مثل برچسب های کوچکی روی عناصر هستند. با آن ها نمایش، رویداد، و داده را کنترل می کنیم.
فهرست دایرکتیوهای مهم
بر اساس مرجع منبع، این دایرکتیوها وجود دارند و کارشان مشخص است:
v-bind: اتصال صفت به داده.v-cloak: پنهان کردن قالب تا آماده شدن.v-for: رندر لیست عناصر.v-html: خروجی دادن HTML داخل قالب.v-if/v-else-if/v-else: رندر شرطی.v-memo: تعویق رندر تا تغییرِ ویژگی ها.v-model: اتصال دوسویه ورودی و داده.v-on: وصل کردن رویداد به عمل.v-once: رندر فقط یک بار.v-pre: پرش کامپایل برای یک بخش.v-show: نمایش/عدم نمایش مشروط.v-slot: ارسال محتوا به اسلات نام دار.v-text: بروزرسانی متن عنصر.
نمونه سریع: لیست، شرط، رویداد
این نمونه چند دایرکتیو پایه را کنار هم نشان می دهد. مثل کارنامه مدرسه: اسامی را لیست کن، شرط قبولی را نشان بده، و با کلیک، تعداد رأی را زیاد کن.
<template>
<div>
<h3>Directives Demo</h3>
<p v-if="passed">Student passed.</p>
<p v-else>Student not passed.</p>
<ul>
<li v-for="name in students" :key="name">{{ name }}</li>
</ul>
<button v-on:click="votes++">Vote</button>
<p v-show="votes > 0">Votes: {{ votes }}</p>
</div>
</template>
<script>
export default {
data() {
return {
students: ['Ali', 'Sara', 'Reza'],
votes: 0,
passed: true
};
}
};
<\/script>
نمونه ورودی: v-model و v-bind
اینجا ورودی با داده همگام است. همچنین صفت placeholder با v-bind از داده می آید. مثل تنظیم نام پروفایل در موبایل.
<template>
<div>
<input v-model="username" :placeholder="ph" />
<p v-text="username"></p>
<button v-on:click="username = ''">Clear</button>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
ph: 'Type your name...'
};
}
};
<\/script>
گام های عملی
- عنصر هدف را انتخاب کن؛ ورودی یا لیست.
- دایرکتیو مناسب را بگذار؛ مثل
v-forیاv-model. - داده را در
data()تعریف و مقداردهی کن.
نکته: برای زمان بندیِ بعد رندر، از $nextTick() کمک بگیر. برای واکنش به تغییرات داده، متد watch را ببین. این دو کنار دایرکتیوها عالی می شوند.
جمع بندی سریع
- دایرکتیوها مغز قالب Vue هستند.
v-forلیست را می سازد.v-ifوv-showنمایش را کنترل می کنند.v-modelورودی را همگام می کند.v-onرویدادها را وصل می کند.