دستورات
در ویو جی‌اس (Vue.js)، دستورات (Directives) عناصر کلیدی هستند که به توسعه‌دهندگان امکان می‌دهند رفتار DOM را به صورت declarative کنترل کنند. این دستورات با پیشوند "v-" مشخص می‌شوند و برای اتصال داده‌ها، مدیریت رویدادها و انجام رندرینگ شرطی استفاده می‌شوند. استفاده صحیح از دستورات در پروژه‌های پیشرفته ویو جی‌اس باعث بهبود عملکرد، خوانایی و maintainability کد می‌شود و از خطاهای متداول مانند memory leaks و مشکل در هماهنگی داده‌ها جلوگیری می‌کند.
در طول توسعه، دستورات مختلفی مانند v-if، v-show، v-for، v-model و v-on به طور گسترده استفاده می‌شوند. v-if و v-show برای رندرینگ شرطی عناصر کاربرد دارند، v-for برای تکرار لیست‌ها و آرایه‌ها، v-model برای binding دوطرفه فرم‌ها و v-on برای مدیریت رویدادها. دانش عمیق در مورد syntax، data structures، algorithms و اصول OOP در ویو جی‌اس به توسعه‌دهنده کمک می‌کند تا از دستورات بهینه و امن استفاده کند.
در این آموزش، خوانندگان یاد می‌گیرند که چگونه از دستورات built-in بهره ببرند و دستورات سفارشی ایجاد کنند تا منطق DOM را به شکل reusable و maintainable مدیریت کنند. مثال‌های عملی نشان می‌دهند که چگونه داده‌ها، رویدادها و ساختارها به صورت همزمان با دستورات مدیریت می‌شوند و پروژه‌های واقعی ویو جی‌اس را بهینه و امن نگه می‌دارند.
مثال پایه <template>
text<div>
<h1 v-if="isVisible">خوش آمدید به دستورات ویو جی‌اس</h1>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
<input v-model="newItem" placeholder="اضافه کردن آیتم جدید" />
<button @click="addItem">اضافه کن</button>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true,
newItem: '',
items: [
{ id: 1, name: 'آیتم 1' },
{ id: 2, name: 'آیتم 2' }
]
};
},
methods: {
addItem() {
if (this.newItem.trim() !== '') {
this.items.push({ id: this.items.length + 1, name: this.newItem });
this.newItem = '';
}
}
}
};
</script>در این مثال پایه، چند دستور کلیدی ویو جی‌اس نشان داده شده است. v-if برای کنترل نمایش heading بر اساس boolean isVisible استفاده شده است. v-for برای تکرار آرایه items کاربرد دارد و :key برای تضمین uniqueness عناصر و بهینه‌سازی virtual DOM استفاده می‌شود.
input با v-model به صورت two-way binding به newItem متصل است و تغییرات کاربر به صورت خودکار در data ذخیره می‌شوند. متد addItem ورودی را validate می‌کند، آیتم جدید را به آرایه اضافه می‌کند و فیلد input را reset می‌کند. این مثال نحوه تعامل دستورات با data structures و methods و رعایت best practices برای جلوگیری از memory leaks و errors را نشان می‌دهد.
مثال کاربردی <template>
text<div>
<h2 v-show="showTasks">لیست وظایف</h2>
<ul>
<li v-for="task in tasks" :key="task.id">
<input type="checkbox" v-model="task.completed" /> {{ task.name }}
<button @click="removeTask(task.id)">حذف</button>
</li>
</ul>
<input v-model="newTask" placeholder="اضافه کردن وظیفه جدید" />
<button @click="addTask">اضافه کن</button>
</div>
</template>
<script>
export default {
data() {
return {
showTasks: true,
newTask: '',
tasks: [
{ id: 1, name: 'مرور کد', completed: false },
{ id: 2, name: 'نوشتن مستندات', completed: true }
]
};
},
methods: {
addTask() {
const name = this.newTask.trim();
if (name) {
this.tasks.push({ id: Date.now(), name, completed: false });
this.newTask = '';
}
},
removeTask(id) {
this.tasks = this.tasks.filter(task => task.id !== id);
}
}
};
</script>در این مثال کاربردی، v-show برای کنترل visibility heading استفاده شده است که با frequent toggle performance بهتری دارد. v-for و :key برای iteration بهینه آرایه tasks استفاده شده‌اند. v-model با checkbox bind شده است و وضعیت completed به صورت reactive همگام‌سازی می‌شود.
بهترین روش‌ها در ویو جی‌اس شامل استفاده مداوم از :key، استفاده از computed properties برای محاسبات پیچیده، و کاهش direct DOM manipulation است. v-show برای frequent visibility toggle مناسب است و v-model باید همواره validate شود.
خطاهای رایج شامل overuse دستورات v-if/v-show، iteration ناکارآمد روی آرایه‌های بزرگ و event listeners بدون پاکسازی است. ابزارهای debugging مانند Vue DevTools برای بررسی reactivity و تحلیل performance مفید هستند. نکات امنیتی شامل اجتناب از استفاده مستقیم از v-html برای جلوگیری از XSS attacks می‌باشد.
📊 جدول مرجع
| ویو جی‌اس (Vue.js) Element/Concept | Description | Usage Example |
|---|---|---|
| v-if | رندرینگ شرطی عنصر | <div v-if="isVisible">نمایش</div> |
| v-show | تغییر visibility بدون حذف از DOM | <div v-show="isVisible">نمایش</div> |
| v-for | تکرار آرایه/آبجکت | <li v-for="item in items" :key="item.id">{{ item.name }}</li> |
| v-model | دوطرفه کردن binding فرم | <input v-model="newItem" /> |
| v-on | اتصال event به متدها | <button @click="addItem">اضافه کن</button> |
| Custom Directives | پیاده‌سازی منطق DOM قابل استفاده مجدد | Vue.directive('focus', { inserted: el => el.focus() }) |
با مسلط شدن بر دستورات، توسعه‌دهندگان می‌توانند DOM را به صورت reactive و بهینه کنترل کنند. دستورات built-in مانند v-if، v-show، v-for، v-model و v-on کاربردهای اصلی را پوشش می‌دهند و custom directives منطق پیچیده DOM را encapsulate می‌کند و reusability را افزایش می‌دهد.
پس از یادگیری دستورات، توسعه‌دهندگان می‌توانند به موضوعات پیشرفته‌تری مانند Vuex، dynamic components، بهینه‌سازی performance و طراحی الگوریتم‌های reactive بپردازند. توصیه می‌شود دستورات را در پروژه‌های واقعی پیاده‌سازی و performance را آنالیز کنند. منابع اضافی شامل documentation رسمی، tutorials جامعه و پروژه‌های open-source هستند.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود