توضیحات

alpine.js یک فریمورک جاوااسکریپت است که میتواند جایگزین بسیار مناسب برای جی کوئری باشد. alpine.js به صورت رسمی برای فریمورک livewire که مربوط به لاراول است ساخته شد و به منظور نوشتن کدهای نشانه گذاری (markup-driven) سمت کاربر (client side) با استفاده از زبان برنامه نویسی جاوااسکریپت، طراحی و تولید شده است. alpine.js سینتکس مشابهی به vue.js دارد و یادگیری و کار کردن با آن بشدت ساده هست.حتما ویدیو معرفی دوره را مشاهده کنید.
برای آشنایی بیشتر با alpine.js و همچنین مشاهده مینی پروژه های که توی این دوره پیاده سازی میشود، حتما ویدیو معرفی که در پایین قرار گرفته را مشاهده کنید.

قسمت های 1, 2, 3 و4 برای نمونه بصورت رایگان قرار داده شده

مباحثی که در این دوره گفته میشود شامل :
آشنایی با alpine.js

  • alpine چیست
  • افزودن alpine به پروژه

directives

  • x-data
  • x-init
  • x-if, x-claok, x-show
  • x-transition
  • x-on
  • x-bind
  • x-text, x-html
  • x-model
  • x-ref, x-for
  • x-effect, x-ignore
  • x-teleport

magics

  • ref, $refs$
  • watch$
  • dispatch$
  • nextTick$
  • root$
  • id$

Globals

  • ()Alpine.data
  • ()Alpine.store

Plugins

  • intersect
  • persist
  • trap
  • collapse
  • morph

مینی پروژه ها

  • modal
  • dropdown
  • tab
  • accordion
  • carousel
  • multiselect
  • api

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


طراحی وب javascript جاوااسکریپت alpinejs آلپاین

مدرس دوره علی شیخ
مدت دوره 06:52:21
تعداد ویدیو 37

وضعیت دوره : کامل شده
قیمت دوره : 349,000 331,000 تومان
% 5 تخفیف

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

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

  • استاد اونجوری که من متوجه شدم یعنی بعد از جوا اسکریپت آلپاین رو یاد بگیرم برای راحتی کار با جوا اسکریپت درسته؟ میشه بجای این فریم ورکReact.js, Vue و کتابخونه از این الپاین استفاده کرد ؟؟

    • سلام وقت بخیر.
      بله، قدم بعدی آشنایی و کار با آلپاین هست.
      در خصوص react و vue نحوه کار آنها فرق میکنه و برای پروژه های spa مناسب هست. بازم برای آشنایی بیشتر میتونید ویدیو معرفی و چند قسمت ابتدای دوره اشون را مشاهده کنید.

    • سلام وقت بخیر.
      نمیدونم چقد با این مواردی که فرمویدی آشنا هستید اما بصورت کلی alpine جایگزین jquery هست و مناسب پروژه های که یکسری بخش هاش نیاز به js داره و برای این موارد تایپ اسکریپت استفاده نمیشه وب پک هم که اصلا کامپایلر هست.

  • واقعا آموزش هاتون عالیه. اکثر مدرسان روند آموزش رو طولانی میکنندو یک اموزش 5 ساعته رو ساعت طول میدن ولی من شما رو تحسن می کنم فقط اصل مطالب رو توضیح میدن و خیلی روان و شیوا توضیح میدین.

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

    • سلام وقت بخیر.
      توی ویدیو معرفی و همچنین توضیحات دوره گفته شده که مثال api زده میشه با fetch

    • بله درسته
      راستش من بیشتر دنبال اینم که با کلیک روی منو دیگه کل صفحه رفرش نشه(شامل هدر و فوتر و منو ....) و فقط یک div دارای محتوا از یک صفحه html یا php فراخوانی بشه.نمی دونم اصلا آلپاین اینو داره یا نه
      چون jquery رو می دونم که می شه این کار رو کرد.
      یا پیشنهاد دیگه ای هم دارین ممنون می شم بگید اصلا چی استفاده کنم

    • سلام وقت بخیر.
      ببینید مبحث fetch مربوط به js هست و طبیعتا همین داستان توی فریمورک ها و کتابخانه های js هم هست.
      پیشنهاد بنده آلپاین هست و اگه وارد دوره اش بشید توی توضیحاتش، پیش نیاز هاش نوشته شده و حتما باید اول اونها را ببینید و بعد دوره اش را شروع کنید.

    • سلام وقت بخیر.
      چه مواردی، موارد آپدیتی را بفرمایید تا بررسی بشه?

    • سلام دوباره
      تغییرات : اضافاه شدن : x-id x-modelable
      el $data $store$
      ()alpine-bind
      و در پلاگین ها : mask focus
      همه اینا اضافه شدن

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

  • سلام وقت بخیر
    من میتونم بدون دیدن دوره Asynchronous وارد آلپاین بشم ، بیشتر برای مواردی مثل نوبار یا جایگزین کردن یک بزار مثل select2 آلپاین رو لازم دارم و در اصل می‌خوام از لایووایر استفاده کنم به جای فریم ورک های js

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

  • سلام استاد
    ایا منطقی هست که در پروژه های SPA که با Vue یا React پیاده سازی شده اند از Alpine هم استفاده بشه ؟
    یا همونطور که قرار هست Alpine جای JQuery رو بگیره فقط در پروژه ای MPA استفاده میشه ؟

    • سلام وقت بخیر.
      خیر، نیازی نیست.همون vue یا react کارهای js مورد نظر شما را انجام میده
      از دو فریمورک توی یک پروژه استفاده نکنید.

  • سلام استاد
    با alpine میشه یک سایت کامل فروشگاهی رو با php بالا اورد؟
    و یک مسئله دیگه اینگه قابلیت spa هم در قالب یک کتابخانه جداگانه به alpine اضافه شده نظری در این مورد دارید؟

    • سلام وقت بخیر.
      alpine فریمورک js در سمت فرانت هست و php زبان برنامه نویسی بک اند هست و هیچ ربطی با هم ندارند!!
      در ابتدا طبق چارت آموزشی دوره ها را مشاهده کنید تا بهتر فرانت و بک اند را درک کنید.
      در مورد سوال دومتون، برای ساخت پروژه های spa از فریمورک vue و یا کتابخانه react که برای این کار هست استفاده کنید.

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

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

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

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

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

    • سلام وقت بخیر.
      شما زمانی که موس بیرون میاد (توی event مربوطه) باید دوباره ایتم اول را اکتیو کنید.

  • سلام خسته نباشید

    آلپاین برای راحت تر کردن کار بسیار مفیده، ولی برداشتی که داشتم این بود که توی طراحی بخصوص برای زیبایی کار به اندازه jquery قوی نیست و دستمون برای مانور باز نیست، حالا سوالی که داشتم اینکه میشه هم زمان هم از آلپاین و هم از jquery درون یک پروژه استفاده کرد؟

    ممنون بابت آموزش خوبتون

    • سلام وقت بخیر.
      ممنون از شما و نظرتون?
      برای زیبایی که کلا بحث css هست، به هر حال بله میتوانید پکیج های مختلفی را توی پروژه داشته باشید اما خب از یکیش استفاده کنید.

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

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

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

  • سلام دوباره استاد خسته نباشید!
    استاد من داخل x-for یه دکمه دارم که به تعداد تکرار x-for اون هم تکرار شده حالا میخوام وقتی رو یکیش کلیک کردم فقط همون کلاسش عوض شه و رو بعدی کلیک کردم دوباره فقط همون کلاسش عوض شه میشه اینم راهنمای کنید

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

  • سلام استاد خسته نباشید!
    من دوتا Alpine.data() دارم تو یه صفحه میخوام از داخل این یکی Alpine.data() یک variable رو مقدارش رو true بکنم داخل اون یکی Alpine.data() راهی هست؟

  • سلام
    براي پروژه هاي بزرگتر مثل سبد خريد و و و سيستم لاگين و فروشگاه اينترنتي و اين دست پروژه ها ميشه با آلپاين كار كرد يا بهتره از فريمورك ها و كتابخانه هاي قوي تري مثل react و vue استفاده كرد؟

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