توضیحات

فریم ورک Vue js یا ویو جی اس یکی از محبوب ترین فریم ورک های جاوااسکریپت است که با هدف توسعه رابط کاربری (UI) در سال 2014 به عنوان یک فریم ورک متن باز معرفی شد و طی سال های اخیر استفاده از آن به شدت رو به رشد بوده است.

از Vue js برای ساخت و طراحی رابط کاربری نرم افزار ها و اپلیکیشن های تحت وب و موبایل استفاده می شود. همچنین میتوانید وب سایتی پیاده کنید که تک صفحه ای ( اصطلاحا spa یا single page application ) باشد.

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

به عنوان یک فریمورک مدرن  Vue.js می‌تواند نیازهای متفاوتی را برآورده کند. این فریمورک برای داشتن کارایی بهتر از یک DOM مجازی استفاده می‌کند. (DOM مجازی، حالتی مفهومی و البته انتزاعی از یک DOM واقعی است). اهمیت این ماجرا در این است که فریمورک با استفاده از چنین تکنیکی سبک‌تر و در نهایت برای اجرا سریع‌تر می‌شود.

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

همچنین دوستان دوره nuxt.js (ناکست جی اس) در سایت قرار گرفت که پیشنهاد میکنم حتما بعد از این دوره مشاهده کنید.

 

دوره های پیشنهادی، بعد از گذراندن این دوره :

پیش نیاز این دوره :


javascript جاوا اسکریپت vuejs ویو جی اس

مدرس دوره علی شیخ
مدت دوره 11:02:05
تعداد ویدیو 69

وضعیت دوره : کامل شده
قیمت دوره : رایگان

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • استاد سلام
    استاد یه سوال ازتون دارم
    استاد من میخوام یه فریمورک جاوااسکریپت رو یاد بگیرم ولی گیج شدم
    به نظر شما آلپاین قدرتمند تره یا ویو ؟

    • سلام وقت بخیر.
      این دو کارشون متفاوت هست، هر دو را یاد بگیرید.

  • سلام
    من میخوام یک مقدار از درون تگ a رو بگیرم که عدد هست اما با v-model نمیتونم چون فقط برای input کار میکنه
    اگر مثل این مثال اینپوتی نداشتیم و خواستیم مقدار را بگیریم باید از چه دایرکتیوی استفاده کنیم؟
    تشکر

    • سلام وقت بخیر.
      میتوانید از ref استفاده کنید. حتما داکیومنت هم بخونید.

  • عرض سلام و وقت بخیر
    عذر میخوام من سوالی در رابطه با nuxt و vue داشتم
    من بخش بک اند و ارتباط با سرور یک وبسایت رو با جنگو رست و nuxt انجام دادم ولی الان که پروژه رو روی هاست گذاشتم و قصد دارم که اون رو سئو کنم مشکلی وجود داره که اطلاعات و دیتا بعد از قالب وبسایت روی وبسایت قرار میگیره و خزنده های گوگل متون و عکس ها رو که از سرور ارسال میشه رو نمیتونن دریافت کنن و اطلاعات داینامیک بعد از لود شدن صفحه روی صفحه قرار میگیرن و همین دلیلی هست که سایت از نظر سئو رنک خوبی نمیتونه بگیره
    ممنون میشم اگر مقدور هستش راهنمایی بفرماییید تا چطور کاری کنم که اطلاعات و دیتا همزمان با قالب و لود شدن صفحه روی صفحه قرار بگیرند

    • سلام وقت بخیر.
      Vue یک فریمورک js سمت فرانت هست و کدهای vue توی مروگر دانلود و اجرا میشه، پس توی سورس کدی که به مروگر ارسال میشه فقط یک div به ای دی app هست و بقیه کارها زمانیکه مروگر کدهای vue را دانلود کرد اجرا میشه به این موضوع
      csr (client side rendering) گفته میشه
      حالا شما میتوانید ساختار صفحه را ایجاد و بعد به مروگر ارسال کنید که بهش
      ssr (server side rendering) گفته میشه که با فریمورک nuxt خیلی ساده میتوانید انجام بدید.

    • سلام وقت بخیر.
      اطلاعی در خصوص مشکل با axios ندارم. اما خودش یکسری توابع برای دریافت اطلاعات ایجاد کرده و شما نیازی به axios ندارید.

  • استاد عزیز سلام
    استاد من یه سوال و راهنمایی برای ادامه راهم از شما دارم
    استاد من پروژه هامو با لاراول و بوت استرپ تمرین و پیاده سازی میکنم و همه چی صفر تا صد برنامه نویسی و از سایت شما آموزش دیدم
    الان میبینم که برای طراحی سایت به دانش جاوا اسکریپت و ajax هم نیازه
    من دوره جاوااسکریپت شمارو دیدم و تمرین کردم
    برای بحث ajax شما کدوم فریمورک رو معرفی میکنید که من یادش بگیرم و توی پروژه هام استفاده بکنم ازش ؟

    • سلام وقت بخیر.
      برای فرانت اند، بله باید با جاوااسکریپت آشنا باشید، من فریمورک alpine که دوره اش به همراه پیش نیاز هاش که توی وب سایت هست را پیشنهاد میکنم.

  • سلام استاد ، به نظر شما با توجه به اینکه در لاراول و vuejs به جای webpack از vite استفاده شده نیاز هست که webpack رو یاد بگیریم؟ یا میتونیم به جاش vite رو یاد بگیریم؟

    • سلام وقت بخیر.
      یادگیریش سخت نیست و خالی از لطف نیست، اما در کل بله میتوانید یادش نگیرید.

  • سلام استاد خسته نباشید ممنون از آموزش خوبتون
    توی قسمت vue cli از قسمت اکوسیستم لینکشو میارید ولی دیگه تو داکیومنت ویو قسمت cli نیست
    و به جاش npm init vue@latest هستش که از vite استفاده میکنه
    تفاوت این دو مورد به غیر اینکه تو این دستور vite جایگزین webpacke شده چیه؟

    • سلان وقت بخیر.
      یک روش دیگه هم توی vue 3 اضافه شده که میتوانید استفاده کنید. روش vue 2 هم میتوان توی vue 3 استفاده کرد.
      کامل در موردش توی دوره گفته شده

  • سلام استاد محترم - با تشکر از رحمات جنابعالی.
    دو سوال کلی در مورد فریم ورک های فرانت اند دارم:
    1- آیا می توان یک برنامه رو به صورت آف لاین و بدون استفاده از ابزار هایی مانند npm هم دولوپ کرداز این جهت می پرسم که نرم افزار من در یک شبکه داخلی باید کار کنه و دسترسی به اینترنت نداره . راهی و جود داره که وابستگی ها رو دستی وارد یک برنامه فرانت اند کنیم؟
    2- آیا می توان هم برنامه فرانت اند و بک اند رو روی یک پروژه دولوپ کنیم. مثلا من که با spring boot کار بک اند رو انجام میدم مجبورم برای فرانت یک پروژه دیگه رو روی ip دیگه بالا بیارم . میشه که هر دو داخل یک پروژه پکیج بشن چه موقع دولوپ چه موقع اجرا.
    با تشکر مجدد

    • سلام وقت بخیر.
      در مورد سوال اولتون، شاید بشه توی یک سیستم دیگه که اینترنت داره پکیج نصب کنید و پوشه node_modules را کپی کنید و مشکلی پیش نیاد، احتمالا بشه و باید تست کنید.
      سوال دومتون هم میشه با دادن پورت های مختلف به سرور و فرانت انجام داد.

    • سلام وقت بخیر.
      هیچ دوره ای کامل نیست، اما ما تمام تلاشمون را کردیم که دوره کامل باشه، بقیش کار، تمرین و تجربه و چالش هست.

  • سلام استاد وقت بخیر من وقتی میخوام یک فایل vue بسازم یا مثال همون فایل hello-world حذف میکنم و home.vue میسازم زمانی که تو اپ ایمپورت میکنم این ارور رو میده
    Component name "Home" should always be multi-word vue/multi-word-component-names
    دقیقا همون کاری ک شما تو ویدیو انجام دادین منم انجام دادم
    نمیدونم ارورش چیه
    بازم ممنون بابت اموزش های خوب شما

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

  • سلام وقت بخیر استاد ممنون بابت اموزش خهای خوبتون
    من npm رو نصب کردم سراسری برای کامپوننت های جدا اما یه فایلی با پسوند vue ایجاد میکردم ارور میداد ! البته yarn رو نصب کردم npm جواب نمیداد
    بعد اینک تا اون cmd باز نباشه خروجی کار رو نمیتونیم ببینبم از از صفحه html اگه صفحه cmd رو ببندیم چطوری دوباره اجرا کنیم

    • سلام وقت بخیر.
      ممنون از شما، حتما حتما در ابتدا پیش نیاز های دوره را ببینید کار کنید و به خوبی آشنا بشید بعد این دوره را مشاهده کنید.

  • سلام استاد وقت بخیر امیدوارم حالتون خوب باشه
    استاد ببخشید من یه سوال داشتم من الان ref رو بلد هستم
    اما خواستم بدونم در چه زمان هایی مناسبه که از ref استفاده کنیم
    در این شرایط زمان استفاده کردن از ref هارو نمیدونم اگر میشه یه توضیح بدید
    سپاس

    • سلام وقت بخیر.
      ممنون از شما، برای تعاریف متغیرهاتون توی کامپوننت استفاده میکنید.دوره را کامل ببینید که پروژه پیاده سازی و ازش استفاده شده تا بهتر درک کنید.

  • سلام خسته نباشید
    من اولین بار بود که از دوره های پیجتون استفاده کردم و دوره ویو کامل راهم انداخت چ تونستم پروژم رو کامل و بدون نقص بالا بیارم.
    فقط مشکلی که هست بعد از اپلود روی سرور وقتی روی اینسپکت المنت میزنم توی قسمت سورس ها قسمت وب پک تمامممم فایل های توی فولدر sec پروژه رو و کامپوننت هام رو نمایش میده و این اصلا خوب نیست.. میشه یه راهنمایی بکنید که چطور میتونم نمایش محتویاتی وب پک رو به کاربران غیر فعال کنم؟ ممنون

    • سلام وقت بخیر.
      ممنون از شما
      دلیلش این هست که vue-cli توی حالت production به صورت پیش فرض فایل های source map که webpack ایجاد میکنه را حذف نمیکنه و شما توی تب source مشاهده میکنید.نیاز هست که این مورد را غیرفعال کنید برای اینکار فایلی به نام vue.config.js در پوشه root یا اصلی پروژه ایجاد میکنید که باهاش میتونید کانفیگ های مختلف vue-cli را داخلش قرار بدید و توی این فایل گرینه productionSourceMap: false را اضافه میکنید، به این شکل

      module.exports = {
      
      productionSourceMap: false
      };

      و دوباره دستور npm run build را اجرا کنید.

    • سلام وقت بخیر.
      این مورد مانند ارسال فایل با جاوااسکریپت هست که پیش نیاز این دوره هست و فرقی نداره، کافیه سرچ کنید آپلود فایل با جاوااسکریپت، اصلا پیچیده نیست
      در کل شما باید از کلاس FormData استفاده کنید. مثال

      const formData = new FormData()
      
      formData.append('myFile', files[0])

      fetch('/saveImage', {
      method: 'POST',
      body: formData
      })
      .then(response => response.json())
      .then(data => {
      console.log(data)
      })
      .catch(error => {
      console.error(error)
      })

      در اینجا files[0] میشه همون فایلی که از input مورد نظر دریافت کردید

    • سلام وقت بخیر.
      چیز خیلی سختی نیست، پس یادش بگیرید.من توی دوره گفتم بخاطر اینکه شاید توی پروژه ای، جای ببینید و براتون سوال بشه

    • سلام وقت بخیر.
      والا همینجور که نمیشه گفت، باید ببینید ارور دارید یا خیر، درست کد ها را نوشتید و ....
      با سورس کدی که در اختیارتون هست مقایسه کنید.

    • سلام وقت بخیر
      فهمیدم مشکل از کجاست
      این کدها مشکلمو برطرف کرد

         import Vue from 'vue'
      
      import CompositionApi from '@vue/composition-api'
      Vue.use(CompositionApi)

    • چک کنید که ورژن چند vue را نصب کردید توی package.json باید ورژن ۳ را نصب کرده باشید.