آموزش Alpine JS vs. 3 برای مبتدیان. alpine.js v3 جدید را یاد بگیرید!

سرفصل ها و درس ها

Alpine JS Quick Start - Learning Part 1 Alpine JS Quick Start - Learning Part 1

• نسخه جدید Alpine.js V3: یک مقدمه کوتاه The new version Alpine.js V3 : a short introduction

• آماده سازی: ویرایشگر، پلاگین ها، مرورگر Preparation: Editor, Plugins, Browser

• مواد درسی قسمت 1 Course Materials Part 1

• نحوه استفاده از این دوره به کارآمدترین روش How to use this course the most efficient way

• شی و محدوده: شیء شما در کجا قابل مشاهده است؟ Object and Scope: Where is your object visible?

• x-bind (:) - ویژگی های HTML را دستکاری کنید x-bind (:) - manipulate HTML attributes

• x-model: مقدار شی را به مقدار ورودی تنظیم کنید x-model: set object value to input value

• x-show/x-if: پنهان کردن یا نمایش عناصر به دو روش مختلف x-show / x-if: Hide or show elements 2 different ways

• x-on/x-ref/$refs x-on / x-ref / $refs

• بهبودهایی در Alpinejs نسخه 3 در شنوندگان رویداد (x-on) Improvements in Alpinejs Version 3 on event listeners (x-on)

• خلاصه مطالبی که تا الان یاد گرفتید Recap of what you learned so far

زمان تمرین Time to practice

• بخش عملی شماره 1 - مقدمه + فایل های تمرین Practical Section #1 - Introduction + exercise files

• چالش مثال برگه ها Tabs example challenge

• راه حل چالش زبانه ها Tabs challenge solution

• چالش ماشین حساب ساده Simple calculator challenge

• راه حل ساده ماشین حساب Simple calculator solution

• چالش لغزنده رنگ Color Slider challenge

• محلول لغزنده رنگ Color Slider solution

آموزش قسمت 2 Learning Part 2

• بخش مقدمه Section Introduction

• فراخوانی تابع در Alpinejs Function Calls in Alpinejs

• توابع با خواص + @submit.prevent Functions with properties + @submit.prevent

• اجزا و پارامترها + نمونه فایل خارجی Components and parameters + external file example

• Refactor Color Slider مثال Refactor Color Slider Example

• Refactor Tabs مثال Refactor Tabs Example

• انتقال با اصلاح کننده ها در x-show Transitions with modifiers on x-show

• انتقال با x-transition Transitions with x-transition

• x-cloak: پنهان کردن عناصر تا زمانی که بارگذاری Alpine تمام شود x-cloak: Hiding elements until Alpine finishes loading

• x-for: حلقه ها در Alpinejs x-for: Loops in Alpinejs

• Loops + index/HTML-Output: Refactoring Tabها کاملاً انعطاف پذیر Loops + index / HTML-Output: Refactoring Tabs to be totally flexible

• x-init: داده ها را در جزء آلپاین خود تزریق کنید x-init: Inject data in your alpine component

• RECAP: استفاده از توابع RECAP: Usage of functions