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

چرا از یک فریم ورک فرانت اند استفاده کنیم؟

فریم‌ورک‌های فرانت‌اند، مانند اکثر فریم‌ورک‌ها به وظایف مشترک انتزاعی می‌رسند، وجه مشترکی که بین پروژه‌ها پیدا می‌کنید. Vue.js به طور خاص به انتزاع می آید process ایجاد اجزای HTML که به صورت پویا از طریق جاوا اسکریپت به روز می شوند. برخی از نکات دردناکی که Vue.js برای شما حل می کند، ایجاد HTML پویا، اتصال اقدامات عناصر HTML به داده های شما و حفظ محدوده و زمینه و پیگیری زمانی است که HTML نیاز به رندر مجدد خودکار دارد. به عنوان مثال فرض کنید شما یک دارید page جایی که شما یک لیست پویا از اسامی دارید. ممکن است کدی را نوشته باشید که چیزی شبیه به این است:

هنگامی که HTML را به صورت دستی ایجاد می کنید – علاوه بر این واقعیت که مدیریت کد در نمونه های بزرگتر به سرعت دشوار می شود – هیچ ارتباط واقعی بین داده ها و HTML تولید شده وجود ندارد. اگر آرایه نام‌ها تغییر کرد، باید از آن آگاه باشید و لیست را دوباره رندر کنید. همه اینها فقط برای نمایش داده های پویا است، اگر می خواهید کنترل کننده های رویداد مانند یک را اضافه کنید روی کنترل کننده کلیک کنید، به منظور صرفه جویی در دامنه، کد خود را بیشتر و بیشتر در تودرتو ادامه خواهید داد:

با Vue.js شما HTML را به عنوان یک الگو جدا می‌کنید که نشان می‌دهد بر اساس چه چیزی باید تولید شود روی داده های داده شده، و Vue.js آن را به طور خودکار ارائه می کند. همین مثال در Vue.js به شکل زیر است:

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

DOM مبتنی بر داده

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

اولین برنامه Vue.js خود را ایجاد کنید

نصب Vue.js به سادگی شامل کتابخانه است:

اکنون همانطور که اشاره کردم یک برنامه Vue.js از یک شی داده و یک الگوی HTML تشکیل شده است که داده ها را در آن جاسازی می کند. بنابراین برای اولین برنامه ما که Vue.js را در عمل می بیند، اجازه می دهد به آن اضافه کنیم body:

ابتدا a را تعریف می کنیم div که الگوی HTML ما برای برنامه Vue.js ما خواهد بود. در داخل ما از پرانتزهای دوتایی برای درون یابی داده ها در HTML استفاده می کنیم. در داخل برنامه واقعی Vue.js ما به سادگی داده ها را تعریف می کنیم و آنها را به هم وصل می کنیم div به عنوان عنصری برای برنامه که هم به آن رندر می شود و هم از آن به عنوان الگو استفاده می کند. بعد، برای شعله ور شدن اضافه، متغیر count را افزایش می دهیم روی برنامه ما یک بار در ثانیه این تمام چیزی است که برای ایجاد یک برنامه Vue.js وجود دارد، با باز کردن آن در مرورگر خود، خواهید دید page هر بار که ویژگی داده را به روز می کنیم به طور خودکار به روز می شود.

رویدادها و روش ها

اکنون در اکثر برنامه‌ها، واکنش DOM به تغییر داده‌ها تنها نیمی از داستان است، شما همچنین به راهی برای به‌روزرسانی داده‌ها نیاز دارید، Vue.js با رویدادها و روش‌ها از این موضوع مراقبت می‌کند. متدها توابع ذخیره شده ای هستند که در زمینه برنامه Vue.js شما اجرا می شوند. بیایید مثال شمارنده خود را به روز کنیم تا به جای اجرای ساده تایمر، قابلیت شروع و توقف آن را اضافه کنیم:

در قالب HTML، یک دکمه برای شروع و توقف شمارنده اضافه کردیم، برای انجام این کار به متن نیاز داریم. روی دکمه پویا باشد و برای زمانی که روی دکمه کلیک می‌شود به یک کنترلر رویداد نیاز داریم. برای اعلام یک رویداد در Vue.js روی یک عنصر، نام هر رویداد استاندارد HTML DOM را با آن پیشوند قرار می دهید v-روی:، بنابراین mouseover رویداد می شود v-روی:mouseover یا keyup رویداد می شود v-روی:keyup. در مثال ما از آن استفاده می کنیم v-روی:click ویژگی برای رسیدگی به click رویداد. چیزی که ممکن است متوجه شده باشید این است که برای متن دکمه، ما متدی را فراخوانی می کنیم که بر خلاف ارجاع صرف به یک ویژگی ذخیره شده است. در بسیاری از موارد، داده‌هایی که ذخیره می‌کنید لزوماً در قالبی نیستند که می‌خواهید نمایش دهید روی را page. در اینجا می توان از روش ها استفاده کرد process داده‌ها و تمام واکنش‌پذیری‌هایی که از ویژگی‌ها دریافت می‌کنید هنگام استفاده از روش‌ها اعمال می‌شوند، اگر داده‌های اساسی تغییر کنند، الگو بر اساس آن به‌روزرسانی می‌شود. در برنامه Vue.js، اکنون یک ویژگی جدید داریم که متغیر تایمر و چند روش را در خود نگه می دارد. این toggle روشی که به رویداد کلیک دکمه محدود شده است، بررسی می کند که آیا این اتفاق می افتد یا خیر timer ویژگی تنظیم شده است، شروع یا متوقف کردن تایمر به ترتیب و counterAction روش برای نمایش عملکرد صحیح در دکمه، دوباره بر اساس استفاده می شود روی متغیر تایمر از آنجا که تغییر وضعیت روش تغییر می کند تایمر اموال، و اقدام متقابل متد – که در قالب Vue.js است – در هر زمان از ویژگی timer استفاده می کند تغییر وضعیت نامیده می شود الگو متن دکمه را دوباره رندر می کند. شایان ذکر است که حتی اگر مقدار اولیه ای برای آن نداریم تایمر ویژگی، هنوز باید هنگام ایجاد برنامه Vue.js اعلام شود. اگر ویژگی را از ابتدا اعلام نکنید، ویژگی واکنشی نخواهد بود و باعث نمی شود که HTML در هنگام تغییر دوباره ارائه شود. در مثال ما، نمایش یک بار در ثانیه زمانی که تایمر در حال اجرا است، به روز می شود، و بنابراین یک بار در ثانیه ما تعویض هنگامی که دکمه دوباره ترسیم شود، متد نیز فراخوانی می شود. Vue.js به ما این امکان را می‌دهد که این کار را با ذخیره کردن نتیجه یک متد بهینه کنیم و تنها در صورتی که داده‌های زیربنایی استفاده شده در روش تغییر کرده باشند، روش را فراخوانی کنیم. اگر از یک ویژگی محاسبه‌شده در مکان‌های مختلف استفاده کنید، این نیز مفید است روی را page، به جای اینکه مقدار را چندین بار پردازش کنید، با کش کردن مقدار، می توانید مقدار زیادی از سربار را کاهش دهید. بیایید مثال را به‌روزرسانی کنیم تا ویژگی‌های حافظه پنهان را در بر بگیرد:

تفاوت اصلی علاوه بر ذخیره سازی، این است که روش های زیر computed بر خلاف متدها به عنوان ویژگی ها ارجاع می شوند، بنابراین در قالب HTML باید براکت ها را از آن حذف می کردیم اقدام متقابل.