Vue.js چیست و چه کاربردی دارد؟

پیدایش Vue.js به سال 2013 بر میگردد. یک توسعه‌ دهنده جاوا اسکریپت که در Google کار می‌کند، Evan You، اولین فعالیت ها را برای ویو جی اس در جولای 2013 انجام داد و اولین نسخه رسمی آن را در فوریه 2014 به عنوان فریم ورک ارائه کرد.

ایوان با الهام از قابلیت‌های AngularJS، چارچوب جاوا اسکریپت دیگری که اتصال داده‌های دو طرفه و رابط‌های پویا را فعال می‌کرد، قصد داشت تا چیزی بسازد که قابلیت‌های AngularJS را در قالبی سبک‌ تر ارائه دهد. به نقل از ایوان:

«فکر کردم، اگر بتوانم بخشی را که واقعاً در مورد انگولار دوست داشتم استخراج کنم و چیزی بسیار سبک بسازم، چه اتفاقی می‌افتد».

در این پست، ما اصول اولیه Vue.js را توضیح می‌دهیم، از جمله اینکه Vue.js چیست، چه کارهایی می‌ توانید با آن انجام دهید و سایت ها و برنامه هایی که بر روی این چارچوب اجرا می‌شوند را ارائه می‌کنیم تا اطلاعات کافی در مورد این فریم ورک به دست آورید.

Vue.js چیست؟

Vue.js (یا به صورت ساده Vue) یک چارچوب سبک از زبان جاوا اسکریپت برای ایجاد رابط های کاربری وب است. Vue HTML و CSS استاندارد را گسترش می دهد تا مجموعه ای از ابزارهای قدرتمند را برای ساختن قسمت فرانت اند برنامه های کاربردی وب ایجاد کنید.

کتابخانه اصلی Vue که در چارچوب model-view-viewmodel (MVVM) عمل می‌کند، بر روی لایه viewmodel تمرکز کرده و هماهنگ‌ سازی واکنشی بین لایه‌ های مدل و view را از طریق اتصال داده دو طرفه فراهم می‌کند. این امر ایجاد برنامه های وب مدرن را بر اساس مدل برنامه تک صفحه ای (SPA) ساده می کند.

اتصال داده‌ها به Vue اجازه می‌ دهد تا به‌ صورت پویا عناصر HTML را که به اشیاء Vue مرتبط هستند، به‌ روزرسانی کند. این کار به توسعه دهندگان امکان این را می دهد تا برنامه های کاربردی وب را ایجاد کنند که می توانند در مرورگر کاربر اجرا شوند و یک تجربه تعاملی ارائه دهند که نیازی به بازخوانی صفحه ندارد. با قابلیت به روز رسانی HTML و CSS نمایش داده شده در مرورگر در پاسخ به رویدادهای جاوا اسکریپت زیربنایی، توسعه دهندگان می توانند از Vue برای ایجاد همه چیز از چت زنده تا بازی های ویدیویی متحرک در یک مرورگر استفاده کنند.

البته در نظر داشته باشید که برای کار با کتابخانه ویو جی اس، با توجه به اینکه این کتابخانه با زبان برنامه نویسی جاوا اسکریپت توسعه داده شده است، باید دوره آموزش جاوا اسکریپت را مشاهده کرده باشید و کار با این زبان برنامه نویسی را فرا گرفته باشید.

کاربرد های ویو جی اس Vue.js

به طور سنتی، ایجاد برنامه های کاربردی وب به شکل تعاملی به معنای ایجاد راه حل هایی برای ماهیت ایستا صفحات وب ارائه شده در یک مرورگر است. قبل از ظهور فریم‌ ورک‌های جاوا اسکریپت مانند AngularJS (و در نهایت Vue و سایر چارچوب‌ها مانند React)، فرآیند به‌ روزرسانی اطلاعات در مرورگر بدون بارگیری مجدد صفحه، به کد های جاوا اسکریپت زیادی نیاز داشت.

با Vue، Document Object Model (DOM) به نمونه view مرتبط می شود و قطعه view-model MVVM را ایجاد می کند. این بخش امکان ایجاد صفحات وب و SPA های بسیار تعاملی را فراهم می کند که می توانند عملیات پیچیده را بدون بارگیری مجدد صفحه در مرورگر انجام دهند.

با پیوند دادن DOM و نمای مدل، مناطق خاصی از یک صفحه وب را می توان بدون تأثیر بر کل صفحه، رندر و به روز کرد. این امکان را برای عناصر تعاملی فراهم می‌کند، خواه ویژگی‌های ساده باشند، مانند چت‌های آنلاین که با ورود پیام‌های جدید به‌ روزرسانی می‌شوند، یا موارد استفاده پیچیده‌تر مانند رابط‌های گرافیکی متحرک پیشرفته که کاملاً در یک مرورگر کار می‌کنند.

Vue با استفاده از اتصال دو طرفه داده، به HTML ارائه شده در لایه نمایش مرورگر اجازه می دهد تا به طور خودکار در لحظه تغییر کند تا تغییرات در مدل اصلی را منعکس کند. به عنوان مثال، تغییر متغیر در انتهای پشتی می تواند به طور خودکار باعث تغییر در رابط شود.

مطلب مرتبط: نود جی اس Node.js چیست؟

ویژگی ادغام افزایشی (Incremental Integration)

یکی از جنبه های جذاب Vue توانایی آن برای ادغام تدریجی در یک برنامه است. از آنجایی که هدف اولیه ویو جی اس، این بود که تا حد امکان فشرده و کم حجم باشد، منطقی است که تمام ویژگی‌های بالقوه غیرضروری یک فریم ورک را بر شما تحمیل نکند.

می توانید آنچه را که نیاز دارید از Vue انتخاب کنید و به سرعت آن را در برنامه های خود ادغام کنید. در ابتدایی ترین شکل خود، vue.js از یک کتابخانه واحد تشکیل شده است که فقط بر روی لایه نمایش تمرکز می کند. Vue که توسط مجموعه ای از کتابخانه های اختیاری دیگر پشتیبانی می شود، می تواند به عنوان یک کتابخانه منفرد یا به عنوان یک چارچوب کامل با قابلیت های مختلف بسته به هدف، استفاده شود. توسعه‌ دهندگان این گزینه را دارند که به‌ تدریج به کتابخانه‌های Vue جدید مهاجرت کنند یا آن‌ طور که برای پروژه‌ هایشان لازم است، استفاده کنند.

ادغام افزایشی یکی از عوامل متمایز کننده اصلی است که vue js را از سایر چارچوب های جاوا اسکریپت مانند AngularJS و React متمایز می کند. Vue وفادار به فلسفه سبک وزن بودن و بر داشتن حداقل ردپا و سهولت در راه اندازی تمرکز دارد.

نحوه استفاده از Vue.JS

بیایید نگاهی به کد بسیار ساده Vue بیندازیم تا بفهمیم چگونه با HTML تعامل می‌کند و یک صفحه استاتیک را به صفحه‌ ای پویا و تعاملی تبدیل می‌کند.

Vue یک نحو بسیار ساده دارد که بلافاصله برای هر کسی که تجربه کار با جاوا اسکریپت و HTML را داشته باشد آشنا خواهد شد. در این مثال، ما یک صفحه ساده ایجاد می کنیم که به کاربر اجازه می دهد یکی از دو دکمه را فشار دهد و تعداد دفعاتی که هر دکمه فشار داده شده را می شمارد.

در ادامه به صورت کامل نحوه عملکرد این کد ارائه شده است:

1. تعریف HTML

ابتدا چند HTML اساسی را تعریف می کنیم. ما یک div با شناسه خروجی ایجاد می کنیم. این به Vue می‌گوید که بین این div و یک شی Vue که بعداً تعریف خواهیم کرد، پیوند داده ایجاد کند. Vue از براکت‌های تو در تو برای محصور کردن داده‌ها از اتصال دو طرفه‌ اش استفاده می‌کند، بنابراین ما در اینجا، ایجاد یک div که با تغییر شی زیربنایی به‌صورت پویا به‌ روزرسانی می‌شود، اضافه می‌کنیم.

2. ساخت 2 دکمه

بعد، با استفاده از تابع دکمه HTML دو دکمه ایجاد می کنیم. ما مشخص می کنیم که وقتی روی آنها کلیک می شود، باید توابع جاوا اسکریپت به نام های button1() و button2() را فعال کنند.

3. تعریف یک شی Vue

با شروع جاوا اسکریپت در تگ <script>، یک شی Vue به نام buttonObject تعریف می کنیم. ما از el برای اتصال آن به #output استفاده می کنیم تا به عنصر HTML موجود ما که در div تعریف شده است، لینک شود. سپس مقداری داده اولیه را به صورت متن به آن اضافه می کنیم. در حال حاضر، این بخش یک روش نگهدارنده مکان خواهد بود.

4. ایجاد متغیرهایی برای ردیابی کلیک دکمه

ما دو متغیر تعریف می کنیم تا تعداد دفعات فشار دادن دکمه ها را ردیابی کنیم و به طور پیش فرض آنها را صفر در نظر میگیریم.

دو تابع ایجاد می شود: button1() و button(2). هر یک از این موارد، دکمه مربوطه را یک عدد ارتباط می دهد، سپس متن را در buttonObject ما تغییر می دهد تا کاربر بداند کدام دکمه را فشار داده و چند بار آن را فشار داده است.

از آنجا که ما buttonObject.text را به div در بالای اسکریپت پیوند دادیم، هر بار که دکمه ای فشار داده می شود، صفحه به طور خودکار متن را تغییر می دهد و تعداد دفعات فشار دادن دکمه را به کاربر نشان می دهد.

خروجی برنامه باید به شکل زیر باشد:

این مثال ساده قابلیت های اساسی Vue را نشان می دهد. با اتصال داده، می‌توانیم بخش‌هایی از صفحه را در پاسخ به ورودی‌های کاربر و تغییرات در کد جاوا اسکریپت به‌ روزرسانی کنیم.

نمونه هایی از برنامه های Vue.js

هیچ کمبودی در برنامه های وب محبوب وجود ندارد که به Vue برای ایجاد رابط های کاربری، متکی هستند. در اینجا برخی از محبوب ترین نمونه ها آورده شده است:

• نتفلیکس
• Chess.com
• GitLab
• گرامر
• VICE ویدیو

افزایش توانایی کدنویسی با vue.js

اکنون که متوجه شدید Vue چیست و چه کاری انجام می دهد، به خوبی در راه ایجاد SPA پویا و برنامه های کاربردی وب تعاملی هستید. Vue با پشتیبانی اکوسیستم گسترده ای از کتابخانه ها برای عملکردهای خاص، قابلیت هایی را برای ایجاد لایه های نمای پویا از طریق اتصال دو طرفه داده ارائه می دهد. Vue توسعه دهندگان فرانت اند را در مسیری سریع قرار می دهد تا همه چیز را از برنامه های کاربردی وب تعاملی ساده گرفته تا رابط های کاربری گرافیکی پیچیده برای برنامه های کاربردی وب با همه توصیفات ایجاد کنند.

از آنجایی که Vue می تواند به صورت تدریجی یکپارچه شود، به راحتی می توانید آنچه را که دوست دارید از Vue بگیرید و به پروژه جاوا اسکریپت بعدی خود اضافه کنید.

فرقی نمی‌کند شما یک توسعه‌ دهنده باسابقه باشید که امیدوار است با یک چارچوب سبک وارد برنامه‌ نویسی شود، یا یک تازه‌ وارد در توسعه فرانت‌ اند هستید که امیدوار است از برنامه های ساده شروع کند، Vue کار شما را ساده می‌کند و میانبرهای زیادی برای شروع ارائه می‌کند.

اگر به کتابخانه های جاوا اسکریپت علاقه دارید، پیشنهاد می کنیم تا در این مطلب، محبوب ترین کتابخانه های جاوا اسکریپت را مطالعه کنید.