مقدمه #

VUE (تلفظ شده /vjuː /، مانند View) یک چارچوب JavaScript برای ساختن رابط های کاربر است. این کشور در بالای استاندارد HTML ، CSS و JavaScript ساخته شده است و یک مدل برنامه نویسی اعلانی و مبتنی بر مؤلفه را ارائه می دهد که به شما در توسعه کارآمد رابط های کاربر کمک می کند ، چه ساده و چه پیچیده ای.

در اینجا یک مثال حداقل وجود دارد:

نتیجه

مثال بالا دو ویژگی اصلی VUE را نشان می دهد:

ارائه اعلامی: VUE HTML استاندارد را با نحوی الگوی گسترش می دهد که به ما امکان می دهد تا به طور اعلام کننده خروجی HTML را بر اساس حالت جاوا اسکریپت توصیف کنیم.

واکنش پذیری: VUE به طور خودکار تغییرات حالت JavaScript را ردیابی می کند و در صورت وقوع تغییرات ، DOM را به روز می کند.

شما ممکن است از قبل سؤال داشته باشید - نگران نباشید. ما هر جزئیات کوچک را در بقیه مستندات پوشش خواهیم داد. در حال حاضر ، لطفاً در کنار هم بخوانید تا بتوانید درک سطح بالایی از آنچه VUE ارائه می دهد داشته باشید.

بقیه مستندات آشنایی اساسی را با HTML ، CSS و JavaScript فرض می کنند. اگر کاملاً تازه وارد توسعه Frontend هستید ، ممکن است بهترین ایده برای پرش به یک چارچوب به عنوان اولین قدم خود نباشد - اصول را درک کنید و دوباره برگردید! می توانید سطح دانش خود را با این نمای کلی JavaScript بررسی کنید. تجربه قبلی با سایر چارچوب ها کمک می کند ، اما لازم نیست.

چارچوب مترقی #

VUE یک چارچوب و اکوسیستم است که بیشتر ویژگی های مشترک مورد نیاز در توسعه جلو را در بر می گیرد. اما وب بسیار متنوع است - چیزهایی که ما در وب می سازیم ممکن است از نظر شکل و مقیاس به شدت متفاوت باشد. با توجه به این نکته ، VUE به گونه ای طراحی شده است که انعطاف پذیر و به صورت تدریجی قابل تصویب باشد. بسته به مورد استفاده شما ، VUE به روش های مختلفی قابل استفاده است:

• تقویت HTML استاتیک بدون قدم ساخت
• تعبیه به عنوان مؤلفه های وب در هر صفحه
• برنامه تک صفحه ای (SPA)
• Fullstack / Rendering سمت سرور (SSR)
• JAMSTACK / SITE SITE (SSG)
• هدف قرار دادن دسک تاپ ، موبایل ، وب و حتی ترمینال

اگر این مفاهیم را مرعوب می کنید ، نگران نباشید! این آموزش و راهنما فقط به دانش اساسی HTML و JavaScript نیاز دارد ، و شما باید بدون اینکه متخصص در هر یک از این موارد باشید ، بتوانید دنبال کنید.

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

با وجود انعطاف‌پذیری، دانش اصلی در مورد نحوه عملکرد Vue در همه این موارد استفاده به اشتراک گذاشته می‌شود. حتی اگر اکنون فقط یک مبتدی هستید، دانشی که در این راه به دست می‌آورید همچنان مفید خواهد ماند که شما برای دستیابی به اهداف بلندپروازانه‌تر در آینده رشد می‌کنید. اگر یک کهنه کار هستید، می توانید راه بهینه را برای استفاده از Vue بر اساس مشکلاتی که می خواهید حل کنید انتخاب کنید، در حالی که همان بهره وری را حفظ می کنید. به همین دلیل است که ما Vue را "چارچوب مترقی" می نامیم: این چارچوبی است که می تواند با شما رشد کند و با نیازهای شما سازگار شود.

اجزای تک فایل #

در اکثر پروژه‌های Vue با ابزار ساخت، ما مؤلفه‌های Vue را با استفاده از یک قالب فایل شبیه به HTML به نام Single-File Component (همچنین به عنوان فایل‌های *. vue که به اختصار SFC نیز شناخته می‌شود) می‌نویسیم. Vue SFC، همانطور که از نام آن پیداست، منطق کامپوننت (جاوا اسکریپت)، قالب (HTML) و سبک ها (CSS) را در یک فایل محصور می کند. در اینجا مثال قبلی است که با فرمت SFC نوشته شده است:

SFC یکی از ویژگی‌های تعیین‌کننده Vue است و اگر مورد استفاده شما ضمانت راه‌اندازی ساخت را داشته باشد، روش توصیه‌شده برای نگارش اجزای Vue است. شما می توانید در مورد چگونگی و چرایی SFC در بخش اختصاصی آن اطلاعات بیشتری کسب کنید - اما در حال حاضر، فقط بدانید که Vue تمام تنظیمات ابزارهای ساخت را برای شما انجام خواهد داد.

API Styles #

اجزای Vue را می توان در دو سبک API مختلف ایجاد کرد: Options API و Composition API.

Options API #

با Options API، منطق یک جزء را با استفاده از یک شی از گزینه‌ها مانند داده‌ها، روش‌ها و mounted تعریف می‌کنیم. ویژگی های تعریف شده توسط گزینه ها در این توابع داخلی نمایش داده می شوند که به نمونه جزء اشاره می کند:

Composition API #

در اینجا همان مؤلفه است، دقیقاً با همان الگو، اما با استفاده از Composition API و در عوض:

کدام را انتخاب کنیم؟#

هر دو سبک API به طور کامل قادر به پوشش موارد استفاده رایج هستند. آنها رابط های مختلفی هستند که دقیقاً توسط یک سیستم زیربنایی تغذیه می شوند. در واقع، Options API در بالای Composition API پیاده سازی شده است! مفاهیم اساسی و دانش در مورد Vue در دو سبک مشترک است.

Options API حول مفهوم "نمونه مؤلفه" متمرکز است (همانطور که در مثال مشاهده می شود)، که معمولاً با یک مدل ذهنی مبتنی بر کلاس برای کاربرانی که از پس زمینه زبان OOP هستند، هماهنگی بیشتری دارد. همچنین با انتزاع کردن جزئیات واکنش و اعمال سازماندهی کد از طریق گروه‌های گزینه، برای مبتدیان دوست‌دارتر است.

Composition API حول اعلان متغیرهای حالت واکنشی مستقیماً در محدوده تابع و ترکیب حالت از چندین تابع با هم برای رسیدگی به پیچیدگی متمرکز است. بیشتر آزاد است و برای استفاده موثر نیاز به درک نحوه عملکرد واکنش پذیری در Vue دارد. در عوض، انعطاف پذیری آن، الگوهای قدرتمندتری را برای سازماندهی و استفاده مجدد از منطق امکان پذیر می کند.

می‌توانید درباره مقایسه بین این دو سبک و مزایای بالقوه Composition API در سؤالات متداول Composition API اطلاعات بیشتری کسب کنید.

اگر تازه وارد Vue هستید، توصیه کلی ما در اینجا آمده است:

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

برای مصارف تولیدی:

اگر از ابزارهای ساخت استفاده نمی‌کنید یا قصد دارید از Vue عمدتاً در سناریوهای کم پیچیدگی استفاده کنید، از Options API استفاده کنید. افزایش پیشرونده

اگر می‌خواهید برنامه‌های کامل را با Vue بسازید، از Composition API + Single-File Components استفاده کنید.

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

هنوز سوالی دارید؟#

مسیر یادگیری خود را انتخاب کنید #

توسعه دهندگان مختلف سبک های یادگیری متفاوتی دارند. با خیال راحت یک مسیر یادگیری را انتخاب کنید که متناسب با اولویت شما باشد - اگرچه توصیه می کنیم در صورت امکان، تمام محتوا را مرور کنید!

آموزش را امتحان کنید

برای کسانی که ترجیح می دهند چیزها را به صورت دستی یاد بگیرند.

این راهنما شما را در تمام جنبه های چارچوب با جزئیات کامل راهنمایی می کند.