قسمت دوم : تسلط بر Template Syntax در Vue.js؛ ساخت دکمهای منعطف و قابل شخصیسازی
در این ویدیو، به صورت عملی به ساخت یک کامپوننت دکمه سفارشی در Vue.js میپردازیم و در فرآیند آن با قابلیت های بخش template در یک کامپوننت Vue آشنا میشویم؛ با استفاده از ویژگیهای قدرتمندی مانند $attrs و کتابخانهی استایلینگ Tailwind CSS، دکمهای ایجاد میکنیم که بتوان آن را به راحتی سفارشیسازی کرد و در پروژههای مختلف استفاده نمود.
مباحثی که در این ویدیو پوشش داده میشود:
آشنایی با app.config: یاد میگیریم چگونه تنظیمات جهانی اپلیکیشن Vue.js را پیکربندی کنیم.
درک عمیق از $attrs: با استفاده از $attrs، به دکمههای خود امکان میدهیم تا هر اتریبیوتی را که به آنها داده میشود، به ارث ببرند.
سفارشیسازی ظاهر دکمه با Tailwind CSS: با استفاده از کلاسهای Tailwind CSS، دکمههای خود را با رنگها، اندازهها و سبکهای مختلف طراحی میکنیم.
ایجاد حالتهای مختلف برای دکمه: دکمههایی با حالتهای فعال، غیرفعال، بارگذاری، موفقیت و شکست ایجاد میکنیم.
استفاده از v-if و v-else برای نمایش محتواهای شرطی: یاد میگیریم چگونه با استفاده از این دایرکتیوها، محتواهای مختلف را بر اساس شرایط نمایش دهیم.
بهینهسازی کد با استفاده از Object.hasOwn: با استفاده از این متد، بررسی میکنیم که آیا یک آبجکت خاص دارای خاصیت خاصی است یا خیر.
در پایان این ویدیو، شما قادر خواهید بود:
کامپوننتهای دکمه سفارشی و قابل استفاده مجدد در Vue.js ایجاد کنید.
از $attrs برای ایجاد کامپوننتهای منعطف استفاده کنید.
با استفاده از Tailwind CSS، ظاهر دکمههای خود را به صورت دلخواه تغییر دهید.
درک عمیقتری از Template Syntax در Vue.js به دست آورید.
این ویدیو برای چه کسانی مناسب است:
توسعهدهندگانی که میخواهند با Vue.js شروع کنند.
توسعهدهندگانی که میخواهند مهارتهای خود را در ساخت کامپوننتهای سفارشی بهبود بخشند.
افرادی که به دنبال ایجاد رابطهای کاربری زیبا و کاربرپسند هستند.