در این مقاله، قصد داریم شما را با مرجع API (API Reference) Vue.js آشنا کنیم. این آموزش Vue.js از سطح مبتدی تا پیشرفته را پوشش داده و به شما کمک خواهد کرد تا با تمام جنبههای API در این فریمورک محبوب آشنا شوید. پس اگر به دنبال یادگیری این فریمورک برای ساخت وب اپلیکیشنهای مدرن هستید، این مقاله میتواند یک نقطه شروع عالی باشد.
مرجع API (API Reference) Vue.js
مرجع API Vue.js مجموعهای از امکانات و ویژگیهایی است که فریمورک Vue.js برای توسعه اپلیکیشنهای وب فراهم میکند. این APIها به توسعهدهندگان این امکان را میدهند که از توابع، متغیرها و کامپوننتهای پیشساخته برای ساخت اپلیکیشنهای پیچیده و قدرتمند استفاده کنند. Vue.js با ارائه این APIها، فرایند توسعه را سادهتر، سریعتر و قابلدرکتر میکند.
در Vue.js، APIها به شما کمک میکنند تا بهراحتی کارهایی مثل ایجاد کامپوننتها، مدیریت دادهها، استفاده از ویژگیهای واکنشگرایی و کار با دستورات خاص را انجام دهید. این APIها همچنین توانایی استفاده از اکوسیستم Vue.js را برای ساخت اپلیکیشنهای مقیاسپذیر فراهم میکنند.
در این بخش، ما به بررسی جنبههای مختلف مرجع API Vue.js خواهیم پرداخت که شامل موارد زیر میشود:
API عمومی Vue.js
API عمومی Vue.js مجموعهای از متدها و توابع است که برای کار با Vue.js در سطح جهانی استفاده میشوند. این APIها به شما امکان میدهند که تنظیمات و ویژگیهای پایهای Vue را در سطح جهانی مدیریت کنید. به عبارت دیگر، این توابع برای تعامل با Vue.js در سطح اپلیکیشن (در سطح بالاتر از کامپوننتها) استفاده میشوند.
در اینجا، توضیحات بیشتری در مورد برخی از متدهای کلیدی API عمومی Vue.js آورده شده است:
1. Vue.component()
یکی از پرکاربردترین متدهای API عمومی، متد Vue.component() است که برای ثبت کامپوننتها در سطح جهانی استفاده میشود. زمانی که یک کامپوننت را با این متد ثبت میکنید، این کامپوننت در سراسر اپلیکیشن Vue در دسترس خواهد بود، حتی اگر در فایلهای جداگانه استفاده شود. این به شما کمک میکند تا کدهای خود را سازماندهی کرده و از تکرار غیرضروری جلوگیری کنید.
جزئیات بیشتر:
این متد معمولاً در ابتدای پروژه و قبل از رندر شدن هرگونه کامپوننت، برای ثبت کامپوننتهای جهانی مورد استفاده قرار میگیرد.
هنگامی که یک کامپوننت به این شکل ثبت میشود، میتوانید از آن در هر جای اپلیکیشن Vue خود بدون نیاز به ثبت مجدد استفاده کنید.
مثال:
// ثبت یک کامپوننت جهانی در Vue.js
Vue.component('my-component', {
data: function () {
return {
message: 'Hello, World!'
}
},
template: '<p>{{ message }}</p>'
})
در این مثال، یک کامپوننت به نام my-component ثبت میشود که حاوی یک داده به نام message است. سپس از {{ message }} برای نمایش محتوای آن استفاده میشود.
2. Vue.directive()
دستورات (Directives) در Vue.js به شما امکان میدهند تا رفتار DOM را تغییر دهید. از طریق API عمومی، شما میتوانید دستورات سفارشی ایجاد کرده و آنها را در سراسر اپلیکیشن Vue خود استفاده کنید. این دستورات به شما این امکان را میدهند که ویژگیهای خاصی را به عناصر HTML اضافه کنید.
جزئیات بیشتر:
این متد معمولاً برای ایجاد دستورات سفارشی Vue استفاده میشود که میتوانند بر رفتار یا ویژگیهای DOM تأثیر بگذارند.
شما میتوانید از این متد برای کارهای مختلفی مانند کنترل نحوه نمایش یک عنصر، ایجاد افکتهای خاص یا حتی برای افزودن ویژگیهای خاص به عناصر استفاده کنید.
مثال:
// ثبت یک کامپوننت جهانی در Vue.js
Vue.component('my-component', {
data: function () {
return {
message: 'Hello, World!'
}
},
template: '<p>{{ message }}</p>'
})
در این مثال، دستور v-focus ایجاد میشود که زمانی که به یک عنصر اعمال شود، فوراً کانون (focus) را بر روی آن عنصر قرار میدهد. به عنوان مثال، این دستور میتواند در یک ورودی فرم استفاده شود تا هنگام بارگذاری صفحه، آن ورودی بهطور خودکار فعال شود.
<input v-focus />
3. Vue.extend()
متد Vue.extend() به شما این امکان را میدهد که یک کامپوننت جدید از Vue instance بسازید. این متد معمولاً در زمانی که بخواهید یک کلاس جدید ایجاد کنید و به کامپوننتها ویژگیهای خاص خود را اضافه کنید، استفاده میشود. در واقع، Vue.extend() به شما این امکان را میدهد که ویژگیهای پایه Vue را گسترش دهید.
جزئیات بیشتر:
از Vue.extend() معمولاً برای ساخت کامپوننتهای پویا و پیچیده استفاده میشود.
این متد یک شیء جدید بر اساس کامپوننت ساخته شده برمیگرداند که میتوان از آن برای ایجاد چندین نمونه از همان کامپوننت استفاده کرد.
مثال:
// ایجاد دستور سفارشی v-focus
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
در این مثال، ما یک کلاس جدید به نام MyComponent ایجاد کردهایم که از ویژگیهای Vue بهره میبرد و سپس آن را به یک عنصر HTML متصل کردهایم. این متد معمولاً زمانی که بخواهید کامپوننتها را بهطور دینامیک ایجاد کنید و کنترل بیشتری روی نحوه رندر آنها داشته باشید، مفید است.
نکات اضافی:
چرا استفاده از Vue.component() مفید است؟ زمانی که پروژههای Vue.js بزرگ میشوند، شما میتوانید کامپوننتها را به صورت مجزا تعریف کنید و سپس آنها را در قسمتهای مختلف پروژه با استفاده از Vue.component() ثبت کنید. این کار بهویژه زمانی که چندین پروژه مشابه دارید، مفید است.
دستورات سفارشی با Vue.directive(): اگر بخواهید رفتار خاصی را به همه عناصر HTML اضافه کنید (مثلاً یک افکت انیمیشن یا تغییرات دینامیک روی دادهها)، دستورات سفارشی با استفاده از Vue.directive() میتوانند بسیار کارآمد باشند. این ویژگی به شما اجازه میدهد تا قابلیتهایی را ایجاد کنید که در Vue به صورت پیشفرض وجود ندارند.
استفاده از Vue.extend() برای انعطافپذیری بیشتر: این متد بیشتر در پروژههای پیچیده و زمانی که نیاز به تنظیمات پیچیده و کلاسهای قابل گسترش دارید، کاربرد دارد. همچنین میتوانید ویژگیهای جدیدی به کامپوننتهای موجود اضافه کنید یا آنها را بهطور کامل سفارشی کنید.
در API عمومی Vue.js، متدهایی مانند Vue.component(), Vue.directive(), و Vue.extend() ابزارهایی را فراهم میکنند که به شما کمک میکنند تا اپلیکیشنهای Vue.js خود را سازماندهی کنید و به صورت مؤثر از آنها استفاده کنید. با استفاده از این متدها، شما میتوانید کامپوننتها، دستورات و ویژگیهای پیچیدهای را در پروژههای خود پیادهسازی کنید.
API اپلیکیشن Vue.js
API اپلیکیشن Vue.js مجموعهای از متدها و ابزارها است که به شما امکان میدهد تا اپلیکیشنهای Vue خود را ایجاد، تنظیم، و مدیریت کنید. این API برای راهاندازی و پیکربندی یک اپلیکیشن Vue بسیار حیاتی است و به شما این امکان را میدهد که اجزای اصلی اپلیکیشن خود را بهطور مستقیم کنترل و مدیریت کنید.
در Vue.js، زمانی که شما یک اپلیکیشن را میسازید، ابتدا باید یک Vue instance جدید ایجاد کنید. این instance به شما اجازه میدهد که ویژگیها، دادهها و رفتارهای اپلیکیشن را تنظیم و مدیریت کنید. API اپلیکیشن شامل متدهایی است که به شما کمک میکنند تا Vue instance خود را بسازید و آن را مدیریت کنید.
در این بخش، به بررسی متدهای کلیدی API اپلیکیشن خواهیم پرداخت که شامل متدهای new Vue(), vm.$mount(), و vm.$destroy() هستند.
1. new Vue()
متد new Vue() برای ایجاد یک Vue instance جدید استفاده میشود. این متد در واقع نقطه شروع اپلیکیشن شما است. وقتی یک Vue instance را ایجاد میکنید، Vue تمام ویژگیهای آن را مدیریت کرده و به شما اجازه میدهد که اطلاعات و رفتار اپلیکیشن را تنظیم کنید. این متد برای هر اپلیکیشن Vue الزامی است.
جزئیات بیشتر:
new Vue() به شما این امکان را میدهد که یک Vue instance جدید با گزینههای مختلف (مثل el, data, methods, computed و …) بسازید.
شما میتوانید تنظیمات مختلفی را برای این instance در نظر بگیرید که در بخشهای مختلف اپلیکیشن استفاده خواهد شد.
در هنگام استفاده از new Vue(), اولین چیزی که باید مشخص کنید، عنصر HTML است که Vue به آن متصل میشود. این کار را با استفاده از ویژگی el انجام میدهید.
مثال:
// ایجاد یک اپلیکیشن Vue
new Vue({
el: '#app', // متصل کردن Vue instance به عنصر HTML
data: {
message: 'Hello from Vue.js!' // تعریف دادهها برای استفاده در اپلیکیشن
}
})
در این مثال، ما یک Vue instance ایجاد کردهایم که به عنصر HTML با شناسه #app متصل است. دادهای به نام message در آن تعریف شده است که میتوان از آن در داخل کامپوننتها یا templateها استفاده کرد.
2. vm.$mount()
متد vm.$mount() به شما این امکان را میدهد که یک Vue instance را به صورت دستی به یک عنصر HTML متصل کنید. معمولاً زمانی که شما از new Vue() استفاده میکنید، Vue instance به طور خودکار به عنصر HTML متصل میشود. اما اگر بخواهید این اتصال را به صورت دستی انجام دهید، از این متد استفاده خواهید کرد.
جزئیات بیشتر:
این متد زمانی مفید است که بخواهید Vue instance را پس از ایجاد، به صورت دستی به یک عنصر مشخص متصل کنید.
میتوانید از این متد برای اتصال Vue instance به چندین عنصر HTML به طور جداگانه استفاده کنید.
مثال:
// ایجاد یک Vue instance بدون متصل کردن آن به عنصر HTML
var vm = new Vue({
data: {
message: 'Hello from Vue.js!'
}
})
// متصل کردن Vue instance به یک عنصر HTML
vm.$mount('#app')
در این مثال، Vue instance به صورت دستی به عنصر HTML با شناسه #app متصل میشود. این کار به شما این امکان را میدهد که کنترل بیشتری بر روی نحوه و زمان متصل کردن Vue instance به DOM داشته باشید.
3. vm.$destroy()
متد vm.$destroy() برای پاکسازی و از بین بردن Vue instance استفاده میشود. این متد زمانی مفید است که شما بخواهید Vue instance خاصی را به طور کامل از بین ببرید و منابع آن را آزاد کنید.
جزئیات بیشتر:
این متد معمولاً زمانی استفاده میشود که یک Vue instance دیگر نیاز به استفاده ندارد و باید از حافظه حذف شود.
وقتی vm.$destroy() فراخوانی میشود، Vue instance دیگر نمیتواند به هیچکدام از ویژگیها و متدهای خود دسترسی داشته باشد و باید برای ایجاد آن دوباره از new Vue() استفاده کنید.
این متد معمولاً در مواقعی استفاده میشود که در حال مدیریت برنامههایی هستید که نیاز به حذف دستی Vue instanceها دارند (مثلاً در مواقعی که Vue instanceها در صفحاتی هستند که باید از حافظه پاک شوند).
مثال:
// ایجاد یک Vue instance
var vm = new Vue({
data: {
message: 'Hello from Vue.js!'
}
})
// از بین بردن Vue instance
vm.$destroy()
در این مثال، vm.$destroy() باعث حذف Vue instance از حافظه میشود و دیگر نمیتوان به دادهها و ویژگیهای آن دسترسی پیدا کرد.
API اپلیکیشن Vue.js ابزارهای ضروری برای راهاندازی و مدیریت اپلیکیشنهای Vue هستند. متدهایی مانند new Vue(), vm.$mount(), و vm.$destroy() به شما این امکان را میدهند که Vue instanceهای خود را ایجاد، تنظیم و مدیریت کنید.
new Vue() نقطه شروع اپلیکیشن شما است و امکان ساخت و پیکربندی Vue instance را فراهم میکند.
vm.$mount() برای اتصال دستی Vue instance به یک عنصر HTML استفاده میشود و کنترل بیشتری بر روی زمان و نحوه اتصال به DOM میدهد.
vm.$destroy() برای پاکسازی و حذف Vue instance از حافظه استفاده میشود. با استفاده از این متدها میتوانید اپلیکیشنهای Vue خود را بهطور مؤثر راهاندازی و مدیریت کنید و بهراحتی از آنها در پروژههای پیچیدهتر استفاده نمایید.
API کامپوننت در Vue.js
در Vue.js، کامپوننتها بخشهای اصلی و حیاتی یک اپلیکیشن هستند. هر کامپوننت بهطور مستقل میتواند بخش خاصی از رابط کاربری را مدیریت کند. استفاده از کامپوننتها به شما این امکان را میدهد که اپلیکیشنهای خود را به قسمتهای کوچکتر تقسیم کرده و هر قسمت را بهطور مجزا مدیریت و توسعه دهید.
API کامپوننت در Vue.js مجموعهای از متدها و ویژگیها است که به شما اجازه میدهد تا کامپوننتهای جدید ایجاد کرده و ویژگیها و رفتارهای آنها را تنظیم کنید. این API شامل متدهایی مانند props, data, computed, methods و همچنین برخی ویژگیهای دیگر است که در این بخش به توضیح آنها خواهیم پرداخت.
1. props
در Vue.js، props به شما این امکان را میدهد که دادهها را از یک کامپوننت والد به کامپوننتهای فرزند منتقل کنید. این ویژگی، برای ارسال اطلاعات از کامپوننت پدر به فرزند ضروری است و یکی از اصلیترین راههای برقراری ارتباط بین کامپوننتها در Vue میباشد.
جزئیات بیشتر:
props یک آرایه یا شیء است که در آن مقادیری که باید از کامپوننت والد به کامپوننت فرزند ارسال شود، تعریف میشود.
دادههای ارسالشده از طریق props بهصورت یکطرفه از والد به فرزند جریان مییابند.
در صورتی که فرزند بخواهد دادهها را تغییر دهد، باید از $emit برای ارسال رویداد به والد استفاده کند.
مثال:
Vue.component('child-component', {
props: ['initialMessage'],
data: function () {
return {
message: this.initialMessage // استفاده از prop به عنوان داده داخلی
}
},
template: '<p>{{ message }}</p>' // نمایش پیام
})
در این مثال، initialMessage بهعنوان یک prop از کامپوننت والد به کامپوننت فرزند ارسال شده و در دادههای داخلی کامپوننت ذخیره میشود.
2. data
ویژگی data برای تعریف وضعیت داخلی یک کامپوننت استفاده میشود. این ویژگی یک شیء است که حاوی تمامی متغیرهایی است که برای مدیریت وضعیت کامپوننت نیاز دارید. مقدارهای data در داخل کامپوننتهای Vue قابل تغییر هستند و در هنگام تغییر، Vue بهطور خودکار DOM را بهروز میکند.
جزئیات بیشتر:
data میتواند بهصورت یک تابع تعریف شود که یک شیء را باز میگرداند. این کار به شما این امکان را میدهد که دادههای مختلفی را در هر نمونه از کامپوننتها مدیریت کنید.
دادههای تعریفشده در data میتوانند از props دریافت شوند و یا مستقل از آن باشند.
مثال:
Vue.component('counter', {
data: function () {
return {
count: 0 // وضعیت داخلی کامپوننت
}
},
template: '<button @click="count++">{{ count }}</button>'
})
در این مثال، داده count وضعیت داخلی کامپوننت counter است که در داخل data تعریف شده و در دکمه نمایش داده میشود. هر بار که روی دکمه کلیک میشود، مقدار count افزایش مییابد.
3. computed
ویژگی computed برای محاسباتی استفاده میشود که باید بر اساس دادهها و وضعیت داخلی کامپوننت محاسبه شوند. این ویژگی به شما این امکان را میدهد که محاسبات پیچیده را بهطور مؤثر انجام داده و نتایج آنها را بهصورت واکنشگرا در دسترس قرار دهید.
جزئیات بیشتر:
computed بهطور خودکار زمانی که دادهها تغییر میکنند، بهروز میشود.
محاسبات انجامشده توسط computed بهطور مؤثر از نظر عملکردی بهینه شدهاند و تنها زمانی که دادههای مورد استفاده تغییر کنند، محاسبه مجدد انجام میشود.
مثال:
Vue.component('price-calculator', {
data: function () {
return {
price: 100,
discount: 10
}
},
computed: {
discountedPrice: function () {
return this.price - (this.price * this.discount / 100); // محاسبه قیمت پس از تخفیف
}
},
template: '<p>Discounted Price: {{ discountedPrice }}</p>'
})
در این مثال، ویژگی discountedPrice بهطور خودکار محاسبه میشود و هر بار که قیمت یا تخفیف تغییر کند، این مقدار بهروز خواهد شد.
4. methods
ویژگی methods برای تعریف توابع و متدهایی استفاده میشود که میتوانند بهطور مستقیم توسط کامپوننت فراخوانی شوند. این متدها برای انجام عملیات خاص مانند تغییر دادهها، ارسال رویدادها یا انجام هر کار دیگری استفاده میشوند.
جزئیات بیشتر:
متدها میتوانند با استفاده از ویژگی methods در کامپوننت تعریف شوند.
این متدها معمولاً برای انجام عملیاتی مانند تغییر وضعیت کامپوننت یا پاسخ به رویدادهای ورودی کاربر (مثل کلیک بر روی دکمه) استفاده میشوند.
مثال:
Vue.component('button-click', {
data: function () {
return {
count: 0
}
},
methods: {
increment: function () {
this.count++; // تغییر وضعیت داخلی با متد
}
},
template: '<button @click="increment">{{ count }}</button>'
})
در این مثال، متد increment برای افزایش مقدار count هر بار که دکمه کلیک میشود، استفاده میشود.
API کامپوننت در Vue.js به شما این امکان را میدهد که کامپوننتهای خود را بهطور مؤثر بسازید و ویژگیهای مختلف آنها را مدیریت کنید. با استفاده از ویژگیهایی مانند props, data, computed, و methods، میتوانید بهطور مؤثری وضعیت، محاسبات، و رفتارهای کامپوننتهای خود را تعریف و مدیریت کنید.
props برای ارسال دادهها از کامپوننت والد به فرزند استفاده میشود.
data برای مدیریت وضعیت داخلی کامپوننت است.
computed برای انجام محاسبات واکنشگرا استفاده میشود.
methods برای انجام عملیات خاص در کامپوننتها استفاده میشود.
این ویژگیها به شما این امکان را میدهند که اپلیکیشنهای پیچیدهتر و کاربرپسندتری بسازید و مدیریت آنها را بهراحتی انجام دهید.
API واکنشگرایی در Vue.js
یکی از ویژگیهای بارز و قدرتمند Vue.js که باعث میشود این فریمورک محبوب و کارآمد باشد، واکنشگرایی (Reactivity) است. این ویژگی به شما این امکان را میدهد که تغییرات در دادهها بهطور خودکار و بینیاز از کدنویسی اضافی در رابط کاربری اعمال شوند. در Vue.js، وقتی دادهای تغییر میکند، هر قسمتی از رابط کاربری که به آن داده وابسته است، بهطور خودکار و بدون نیاز به دستور خاصی بهروزرسانی میشود.
در این بخش، به بررسی برخی از ویژگیهای کلیدی API واکنشگرایی Vue.js خواهیم پرداخت که شامل watchers و computed است.
1. computed
ویژگی computed یکی از ابزارهای اصلی در Vue.js برای واکنشگرایی است. این ویژگی به شما اجازه میدهد تا مقادیری را که باید بر اساس دادهها محاسبه شوند، بهطور خودکار و بدون نیاز به کدنویسی اضافی به روز کنید.
جزئیات بیشتر:
computed برای محاسباتی استفاده میشود که بستگی به دادههای دیگر دارند و نتیجه آنها میتواند در قالبها (templates) نمایش داده شود.
ویژگیهای محاسباتی در Vue.js بهطور خودکار بهروز میشوند. یعنی اگر دادهای که به آن وابسته است تغییر کند، Vue بهطور خودکار محاسبات را دوباره انجام میدهد و نتیجه را به نمایش میگذارد.
تفاوت کلیدی computed با methods این است که computed بهطور خودکار کش میشود (cached)، یعنی تنها زمانی که وابستهها تغییر کنند، محاسبه مجدد انجام میشود.
مثال:
new Vue({
el: '#app',
data: {
number: 0
},
computed: {
doubledNumber: function () {
return this.number * 2; // محاسبه مقدار دو برابر number
}
}
})
در این مثال، مقدار doubledNumber بهطور خودکار محاسبه میشود و اگر مقدار number تغییر کند، doubledNumber نیز بهطور خودکار بهروز خواهد شد.
2. watchers
ویژگی watchers در Vue.js به شما این امکان را میدهد که تغییرات در دادهها را تحت نظر داشته باشید و در صورت تغییر، عملیاتی خاص را انجام دهید. این ویژگی برای انجام کارهایی مانند فراخوانی متدها، ارسال درخواستهای HTTP، یا انجام محاسبات اضافی هنگام تغییر دادهها مفید است.
جزئیات بیشتر:
watchers برای نظارت بر تغییرات دادهها و انجام عملیاتی خاص هنگام تغییر آنها استفاده میشود.
یک watcher میتواند برای هر دادهای که میخواهید تغییرات آن را دنبال کنید، ایجاد شود.
برخلاف computed که محاسبات فقط در صورت تغییر دادهها بهروز میشود، watchers زمانی که داده تغییر کند، بهطور کامل متد یا عملکرد موردنظر را اجرا میکند.
مثال:
new Vue({
el: '#app',
data: {
number: 0
},
watch: {
number: function (newVal, oldVal) {
console.log(`مقدار number تغییر کرد: از ${oldVal} به ${newVal}`);
}
}
})
در این مثال، watcher برای داده number تنظیم شده است. هر بار که مقدار number تغییر کند، این watcher بهطور خودکار اجرا میشود و تغییرات را در کنسول نمایش میدهد.
3. ارتباط بین computed و watchers
computed زمانی که دادههای وابسته به آن تغییر میکنند، بهطور خودکار محاسبه مجدد میشود. این برای محاسبات ساده که نیاز به انجام محاسبه دارند و باید همیشه دقیق و سریع باشند، بهترین گزینه است.
watchers زمانی که نیاز دارید عملیاتی خاص را پس از تغییر دادهها انجام دهید (مثل ارسال درخواست به سرور یا انجام عملیات پیچیدهتر) مفید است. watchers به شما این امکان را میدهد که روی تغییرات دادهها واکنش نشان دهید.
4. تفاوت بین computed و watchers
computed بهطور خودکار تنها زمانی محاسبه مجدد میشود که یکی از وابستههای آن تغییر کند. این ویژگی برای محاسبات ساده و بهینهشده استفاده میشود.
watchers به شما این امکان را میدهد که بعد از تغییر دادهها یک متد یا عملیات خاص را اجرا کنید، که برای وظایف پیچیدهتر مناسبتر است.
5. استفاده از computed و watchers در کنار هم
بسیاری از اپلیکیشنهای Vue از هر دو ویژگی برای مدیریت واکنشگرایی استفاده میکنند. برای مثال، از computed برای محاسبات و نمایش دادهها بهصورت بهینه استفاده میشود، در حالی که از watchers برای انجام وظایف پیچیدهتر مانند فراخوانی API یا تعامل با سرویسها و سرورها بهرهبرداری میشود.
مثال:
new Vue({
el: '#app',
data: {
message: 'Hello',
prefix: 'Mr.'
},
computed: {
fullMessage: function () {
return `${this.prefix} ${this.message}`; // استفاده از computed برای ترکیب دادهها
}
},
watch: {
fullMessage: function (newVal, oldVal) {
console.log(`پیام کامل تغییر کرد: از ${oldVal} به ${newVal}`); // نظارت بر تغییرات fullMessage
}
}
})
API واکنشگرایی Vue.js امکان بهروزرسانی خودکار دادهها را بدون نیاز به کدنویسی اضافی فراهم میآورد. ویژگیهایی مانند computed و watchers به شما کمک میکنند تا عملیات و محاسبات را بهطور خودکار انجام داده و واکنشگرایی را به اپلیکیشنهای Vue خود اضافه کنید.
computed برای محاسبات ساده و بهینهشده استفاده میشود که زمانی که دادههای وابسته به آن تغییر کنند، بهطور خودکار بهروز میشود.
watchers برای نظارت بر تغییرات دادهها و اجرای عملیات خاص بهکار میرود.
این ویژگیها ابزارهای قدرتمندی برای ساخت اپلیکیشنهای پویا و کاربرپسند هستند که میتوانند بهطور خودکار تغییرات دادهها را پیگیری کنند و به رابط کاربری شما بهطور مؤثری پاسخ دهند.
دستورات (Directives) در Vue.js
دستورات (Directives) یکی از ویژگیهای مهم و برجسته در Vue.js هستند که به شما این امکان را میدهند که به راحتی رفتار و ویژگیهای عناصر HTML را در برنامههای Vue خود تغییر دهید. این دستورات، بهصورت پیشفرض با علامت v- شروع میشوند و به شما این امکان را میدهند که منطق برنامهنویسی را به صورت declarative (اعلامی) در قالب HTML پیادهسازی کنید.
دستورات Vue.js معمولاً برای اعمال تغییرات در DOM استفاده میشوند. این دستورات بهطور مستقیم روی ویژگیها، کلاسها، استایلها، حلقهها، شرطها و فرمها کار میکنند و باعث میشوند که کد شما سادهتر و قابل فهمتر شود.
مهمترین دستورات Vue.js
در این بخش، به معرفی و توضیح برخی از مهمترین و پرکاربردترین دستورات Vue.js خواهیم پرداخت:
1. v-bind
دستور v-bind به شما این امکان را میدهد که ویژگیهای HTML را بهصورت واکنشگرا به دادههای Vue متصل کنید. به این ترتیب، وقتی مقدار دادهها تغییر کند، ویژگیهای HTML بهطور خودکار بهروزرسانی میشوند.
مثال:
<img v-bind:src="imageSrc" alt="Dynamic Image">
در اینجا، دستور v-bind:src باعث میشود که مقدار ویژگی src تصویر بهطور خودکار به داده imageSrc متصل شود. اگر imageSrc تغییر کند، src تصویر نیز بهروزرسانی میشود.
2. v-for
دستور v-for برای ایجاد حلقههای تکرار در Vue.js استفاده میشود. این دستور به شما این امکان را میدهد که یک لیست از دادهها را درون یک عنصر HTML تکرار کنید و برای هر عنصر در لیست، یک عنصر HTML جداگانه ایجاد کنید.
مثال:
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
در اینجا، v-for به شما این امکان را میدهد که از آرایه items برای ایجاد یک لیست از آیتمها استفاده کنید. برای هر عنصر در آرایه، یک li جدید ایجاد میشود که نام آن آیتم را نمایش میدهد.
3. v-if
دستور v-if به شما این امکان را میدهد که یک عنصر HTML را تنها زمانی که یک شرط خاص برقرار است، نمایش دهید. این دستور برای شرایطی که نیاز دارید فقط در صورت برقراری یک وضعیت خاص، قسمتی از صفحه را نشان دهید، استفاده میشود.
مثال:
<div v-if="isVisible">This content is visible</div>
در این مثال، محتوای داخل div تنها زمانی که داده isVisible درست (true) باشد، نمایش داده میشود. در غیر این صورت، محتوا مخفی میماند.
4. v-model
دستور v-model برای ایجاد یک دوطرفهبازخورد (two-way binding) بین دادهها و فرمها استفاده میشود. این دستور بهویژه برای تعامل با فرمها، مانند ورودیها، انتخابگرها، و چکباکسها بسیار مفید است. با استفاده از v-model، تغییرات در دادهها بهطور خودکار در ورودیهای فرم نمایش داده میشود و تغییرات در ورودیها نیز بهطور خودکار به دادهها اعمال میشود.
مثال:
<input v-model="message" placeholder="Type something">
<p>Message: {{ message }}</p>
در این مثال، دستور v-model باعث میشود که مقدار message بهطور خودکار با ورودی HTML مرتبط شود. وقتی کاربر متنی وارد میکند، مقدار message بهروز میشود و به همین ترتیب، اگر داده message تغییر کند، ورودی نیز بهطور خودکار بهروز خواهد شد.
5. v-show
دستور v-show مشابه با v-if است، اما تفاوت اصلی آن در نحوه پنهان کردن یا نمایش دادن عناصر است. در حالی که v-if عنصر را از DOM حذف میکند، دستور v-show فقط ویژگی CSS display را تغییر میدهد و عنصر همچنان در DOM باقی میماند.
مثال:
<div v-show="isVisible">This content is visible</div>
در اینجا، اگر isVisible درست باشد، محتوا نمایش داده میشود. در غیر این صورت، فقط ویژگی display آن تغییر میکند و محتوا پنهان میشود.
6. v-on
دستور v-on برای گوش دادن به رویدادها و اجرای متدها در هنگام وقوع آنها استفاده میشود. این دستور به شما این امکان را میدهد که به رویدادهای مختلف HTML مانند click, input, mouseover و غیره گوش کنید و بهطور واکنشگرا به آنها پاسخ دهید.
مثال:
<button v-on:click="changeMessage">Click me</button>
<p>{{ message }}</p>
در این مثال، دستور v-on:click به رویداد click دکمه متصل است و وقتی دکمه کلیک میشود، متد changeMessage اجرا میشود و مقدار message تغییر میکند.
7. دستورات سفارشی
Vue.js همچنین به شما این امکان را میدهد که دستورات سفارشی خود را ایجاد کنید. این ویژگی برای مواقعی مفید است که نیاز دارید عملکرد خاصی را به عناصر HTML خود اضافه کنید که بهطور پیشفرض در Vue وجود ندارد.
مثال:
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});
در اینجا، یک دستور سفارشی به نام focus ایجاد کردهایم که وقتی روی یک عنصر اعمال میشود، آن عنصر بهطور خودکار فوکوس میکند.
دستورات در Vue.js ابزارهایی هستند که به شما کمک میکنند تا بدون نیاز به نوشتن کد جاوااسکریپت اضافی، رفتار و ویژگیهای عناصر HTML را تغییر دهید. برخی از دستورات مهم شامل v-bind, v-for, v-if, v-model, v-show, و v-on هستند که برای اعمال تغییرات در DOM و مدیریت تعاملات کاربر استفاده میشوند. با استفاده از این دستورات، میتوانید کدهای خود را سادهتر، خواناتر و بهینهتر بنویسید.
عناصر خاص (Special Elements) در Vue.js
Vue.js برای مدیریت دقیقتر و سفارشیتر DOM از عناصری خاص استفاده میکند که به شما این امکان را میدهند که انتقالات، تزریق محتوا، و ساختارهای پیچیدهتری ایجاد کنید. این عناصر خاص در Vue میتوانند عملکردهای پیشرفتهای را برای تعامل با UI ارائه دهند و به شما این امکان را میدهند که تجربه کاربری بهتری را در اپلیکیشنهای خود پیادهسازی کنید.
در این بخش، به بررسی برخی از این عناصر خاص Vue.js خواهیم پرداخت، مانند transition, slot, و component. این عناصر برای مدیریت نحوه رندر کردن، تعاملات پیچیده، و ایجاد انیمیشنهای نرم در اپلیکیشنهای Vue استفاده میشوند.
1. <transition>
عنصر <transition> به شما این امکان را میدهد که افکتهای انیمیشن یا گذرا را به هنگام ورود یا خروج یک عنصر از DOM اعمال کنید. این عنصر میتواند برای تغییرات ساده مانند پنهان کردن یا نمایش دادن عناصر، تا انیمیشنهای پیچیدهتر مانند افکتهای فید، اسکالا و چرخش استفاده شود.
در Vue.js، هر زمان که یک عنصر وارد یا از DOM خارج میشود، Vue بهطور خودکار کلاسها یا افکتهای انیمیشن را برای شما اعمال میکند. برای استفاده از transition، میتوانید نامهای خاصی برای انیمیشنها تعریف کرده و از آنها برای تنظیم زمانبندی و نحوه اعمال انیمیشنها استفاده کنید.
مثال:
<transition name="fade"> <p v-if="show">This text will fade in and out</p> </transition>
در این مثال، ما از دستور v-if برای نمایش یا پنهان کردن عنصر <p> استفاده میکنیم و به آن یک افکت فید (fade) با استفاده از عنصر <transition> میدهیم. وقتی show تغییر کند، متن با افکت فید به آرامی ظاهر یا محو میشود.
CSS مربوط به افکت فید:
.fade-enter-active, .fade-leave-active {
transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
در اینجا، از CSS برای تنظیم انیمیشن محو شدن (opacity) استفاده شده است. کلاسهای fade-enter-active و fade-leave-active مسئول تنظیم زمان و ویژگیهای انیمیشن هستند، در حالی که کلاسهای fade-enter و fade-leave-to ویژگیهای شروع و پایان انیمیشن را تعریف میکنند.
2. <slot>
عنصر <slot> در Vue.js برای ایجاد مکانهایی در قالب کامپوننتها استفاده میشود که به شما این امکان را میدهد تا محتوای دینامیک را درون کامپوننتها تزریق کنید. این عنصر بهویژه برای ساخت کامپوننتهای عمومی و قابل استفاده مجدد مفید است که نیاز به محتوای خاصی دارند.
با استفاده از slot میتوانید محتوای درون یک کامپوننت را بهطور دقیقتری مدیریت کنید و این محتوا را از خارج کامپوننت به آن تزریق کنید.
مثال:
<template>
<div class="card">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'Card'
}
</script>
<!-- استفاده از کامپوننت -->
<Card>
<p>This is dynamic content inside the card!</p>
</Card>
در این مثال، کامپوننت Card یک slot دارد که به آن اجازه میدهد تا محتوای دینامیک را از خارج دریافت کند. محتوای درون تگ <Card> به طور خودکار درون تگ <slot> کامپوننت قرار میگیرد. این باعث میشود که کامپوننتها بیشتر قابل استفاده مجدد شوند و محتوای آنها متغیر باشد.
3. <component>
عنصر <component> در Vue.js به شما این امکان را میدهد که کامپوننتهای مختلف را بهصورت دینامیک رندر کنید. این عنصر بهویژه زمانی مفید است که بخواهید بر اساس وضعیتهای مختلف یا ورودیهای کاربر، کامپوننتهای متفاوتی را بارگذاری کنید.
با استفاده از component، میتوانید تصمیم بگیرید که کدام کامپوننت در شرایط خاص نمایش داده شود.
مثال:
<component :is="currentComponent"></component>
در اینجا، :is ویژگیای است که به شما اجازه میدهد یک کامپوننت خاص را براساس مقدار داده currentComponent بارگذاری کنید. اگر currentComponent برابر با ‘MyComponent’ باشد، کامپوننت MyComponent رندر میشود. این ویژگی بهویژه زمانی که بخواهید کامپوننتها را بهصورت پویا انتخاب کنید، بسیار مفید است.
تعریف currentComponent:
data: {
currentComponent: 'MyComponent'
}
با استفاده از این ویژگی، میتوانید کامپوننتها را بر اساس وضعیت برنامه یا دادههای ورودی رندر کنید.
عناصری مانند <transition>, <slot>, و <component> در Vue.js ابزارهای قدرتمندی هستند که به شما این امکان را میدهند تا UI خود را بهطور نرمتر، قابل انعطافتر و پیچیدهتر طراحی کنید. این عناصر به شما این امکان را میدهند که انتقالات روان، تزریق محتوا و ساختارهای قابل تنظیم در کامپوننتها ایجاد کنید. استفاده از این ویژگیها باعث میشود که اپلیکیشنهای شما انعطافپذیرتر و قابلیت نگهداری بهتری داشته باشند.
نتیجهگیری
در این مقاله، مرجع API Vue.js را بهطور جامع بررسی کردیم و جنبههای مختلف آن را از سطح مبتدی تا پیشرفته توضیح دادیم. Vue.js یکی از محبوبترین فریمورکهای جاوااسکریپت است که به توسعهدهندگان امکان میدهد تا اپلیکیشنهای وب پویا و واکنشگرا بسازند. با استفاده از APIهای مختلف Vue، شما میتوانید به راحتی کامپوننتها را مدیریت کرده، دادهها را واکنشگرا کنید، تغییرات در DOM را کنترل کنید و انیمیشنها و تعاملات پیچیدهای را به اپلیکیشنهای خود اضافه کنید.
از API عمومی و اپلیکیشن گرفته تا API کامپوننت، واکنشگرایی، دستورات و عناصر خاص، هرکدام از این بخشها ابزاری قدرتمند برای ساخت برنامههایی مقیاسپذیر و انعطافپذیر در اختیار شما قرار میدهند. این قابلیتها به شما کمک میکنند که تجربه کاربری بهتری را برای کاربران خود فراهم کنید و به توسعه اپلیکیشنهای پیچیدهتر بپردازید.
برای یادگیری بیشتر در مورد Vue.js و مرجع API آن، میتوانید به منابع معتبر مانند مستندات رسمی Vue.js و دورههای آموزشی آنلاین مراجعه کنید. این مستندات و منابع به شما کمک خواهند کرد تا بیشتر با امکانات و ویژگیهای پیشرفته Vue آشنا شوید و به توسعهدهندگان حرفهای تبدیل شوید.
اگر شما علاقهمند به یادگیری عمیقتر Vue.js و ویژگیهای پیشرفته آن هستید، پیشنهاد میکنیم که همزمان با تمرین و نوشتن کد، مستندات را مرور کرده و پروژههای عملی بسازید. این روند به شما این امکان را میدهد تا مهارتهای خود را در استفاده از APIهای Vue.js بهبود بخشید و اپلیکیشنهای قدرتمندتری بسازید.
