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

چارچوب‌های front-end به طور گسترده هم از لحاظ اندازه و دامنه متفاوت هستند، که در آن Vue.js روی سازگاری تمرکز دارد. شما انتخاب می کنید که کل سایت خود را با استفاده از Vue.js درست کنید، و مثلا تنها یک عنصر واحد از سایت خود را فعال کنید، یا هر چیز دراین بین. به همین دلیل ، بسیار نزدیک به یک منحنی یادگیری سطحی است.

در صورت تمایل یه یادگیری کامل این فریم ورک قدرتمند میتونید آموزش Vue Js را در سایت تاپ لرن مشاهده کنید .

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

فریمورک های  front-end، مانند بسیاری از فریمورک ها به همراه (tasks) تسک های انتزاعی می آیند، بخش مشترکی که بین پروژه‌ها وجود دارد.Vue.js  به طور خاص به فرآیند ایجاد اجزای HTML که به طور پویا از طریق جاوا اسکریپت به روز می‌شوند، مطرح می‌شود.

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

برای مثال، فرض کنید که شما یک صفحه دارید که در آن یک لیست پویا از نام ها دارید. شما ممکن است یک کد داشته باشید که شبیه به این باشد:

هنگامی که HTML را به صورت دستی راه‌اندازی می‌کنید - علاوه بر این واقعیت که کد به سرعت در مدیریت نمونه‌های بزرگ‌تر سخت می‌شود - هیچ ارتباط واقعی بین داده‌ها و HTML تولید شده وجود ندارد. اگر ارایه اسامی تغییر کند، شما باید از آن اطلاع داشته باشید و دوباره لیست جدید را درست کنید. همه اینها فقط برای نمایش داده‌های پویا هستند، اگر می‌خواهیدevent  handlers ایجاد کنید مثلا on click handler به منظور حفظ دامنه شما کد خود را بیشتر و بیشتر تو در تو می کنید:

با Vue.js شما HTML را ازقالب جدا می‌کنید و تشخیص می دهد که بر اساس این داده ها چه چیزی را باید تولید کند، و Vue.js آن را به طور خودکار انجام می‌دهد.

این مثال در Vue.js شبیه موارد زیر است:

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

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

در هسته  Vue.js، همبستگی بین HTML و برخی داده‌ها را تعریف می‌کنید، و هر زمان که داده تغییر می‌کند HTML به روزرسانی می‌شود. روشی که این کار را انجام می‌دهد این است زمانی که از Vue.js یک نمونه می سازید که داده ها را به شکل یک شی جاوا اسکریپت به آن منتقل می‌کنید، این شی بعد از آن که تغییر می‌کند آن را بوسیله متدهای .getter , setter ای که دنبال می شدند جایگزین میکنیم.

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

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

ساخت اولین برنامه  Vue.js خود

نصب Vue.js به سادگی اضافه کردن یک کتابخانه است:

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

ابتدا یک div را تعریف می‌کنیم که الگوی HTML مان برای برنامه Vue.js مان خواهد بود. در داخل ما از  براکت برای اضافه کردن داده استفاده می کنیم.

داخل برنامه Vue.js ، ما به سادگی داده‌ها را تعریف می‌کنیم و div را به عنوان عنصری برای برنامه کاربردی مان هم برای رندر کردن و هم به عنوان قالب استفاده می کنیم. سپس ما متغیر count را یک‌بار در هر ثانیه افزایش خواهیم داد.

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

رویدادها و متدها (Events and Methods)

اکنون در بسیاری از برنامه‌ها داشتن واکنش DOM در هنگام تغییر داده ها ، تنها نیمی از داستان است، شما همچنین به راهی برای به روز رسانی داده‌ها نیاز دارید، Vue.js  حواس به این موضوع از طریق رویدادها و متدها هست. متدها تابع های ذخیره‌شده در محتوای برنامه Vue.js شما هستند.

بیایید مثال counter را به روز رسانی کنیم تا توانایی شروع و توقف تایمر را به جای اجرای ساده آن اضافه کنیم:

در قالب HTML، ما یک دکمه را برای شروع و توقف شمارنده اضافه کردیم تا این کار را انجام دهیم ، به متن روی دکمه نیاز داریم تا پویا باشد و ما به یک event handler برای زمانی که دکمه کلیک می‌شود نیاز داریم.

برای اعلام یک رویداد در Vue.js بر روی یک عنصر، شما به نام هر گونه از این رویدادهای HTML استاندارد  v - on: را اضافه می کنید، بنابراین رویداد mouseover به v – on: mouseover تبدیل می شود  یا رویداد keyup به v-on:keyup تبدیل می‌شود. در مثال ما از v-on:click برای رسیدگی به رویداد کلیک استفاده می‌کنیم.

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

در برنامه Vue.js، ما یک ویژگی جدید داریم که متغیر تایمر را در اختیار دارد ، و تعدادی متد. متد toggle که به دکمه وابسته است چک می کند که آیا این تایمرتنظیم شده‌است یا نه برای شروع یا توقف تایمر و یا از متد counterAction برای نمایش اقدام صحیح در دکمه، دوباره براساس متغیر تایمر استفاده می‌کند.

از آنجا که متد toggle ویژگی تایمر را تغییر می‌دهد، و متد counterAction - که در الگوی  Vue.js است - از ویژگی تایمر استفاده می‌کند، هر زمان که toggle صدا زده می‌شود ، متن دکمه را تغییر می‌دهد.

شایان‌ذکر است که حتی اگر یک مقدار اولیه برای تایمر نداریم، هنوز هم باید در هنگام ایجاد برنامه Vue.js تعریف شود. اگر این ویژگی را از ابتدا تعریف نکنید، ویژگی فعال نخواهد بود و باعث تغییر HTML در هنگام تغییرات نخواهد شد.

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

اجازه دهید مثال را به روزرسانی کنیم تا شامل ویژگی‌های کش باشد:

تفاوت اصلی در کش کردن، این است که متدی که محاسبه می کند به جای متد به عنوان یک properties رفرنس داده می شود، بنابراین در قالب HTML ، ما باید براکت ها را از counterAction حذف کنیم.

دوره آموزش جامع Vue Js