
همانطور که در قسمت قبل توضیح دادم، <transition> به ما اجازه می دهد بین هر تعداد عنصری که خواستیم منتقل شویم (چه دو عنصر مانند مثال بالا و چه ده عنصر یا 100 عنصر) اما در نهایت فقط یکی از آن ها باید نمایش داده شود و نمی توانیم چندین عنصر را با هم نمایش دهیم. با این حساب اگر بخواهیم به یک لیست (ul) انیمیشن اضافه کنیم باید چه کار کنیم (مثلا حذف آیتم ها و اضافه شدن آیتم های جدید دارای انیمیشن باشد)؟ راه حل ساده ما استفاده از کامپوننت خاصی به نام <transition-group> است. این کامپوننت خاص که از کامپوننت های تعریف شده توسط تیم Vue می باشد به ما اجازه می دهد به چندین عنصر در صفحه در آن واحد انیمیشن اضافه کنیم به طوری که همه آن ها در حال نمایش باشند. هدف نهایی ما برای آشنایی با <transition-group>
برای شروع به فایل App.vue می رویم و یک ul تعریف می کنیم:
// بقیه کدها // <transition name="fade" mode="out-in"> <component :is="selectedComponent"></component> </transition> <hr /> <ul class="list-group"> <li class="list-group-item"></li> </ul> // بقیه کدها //
کلاس هایی که می بینید چند کلاس ساده بوت استرپ هستند. در مرحله بعد باید در data خود یک آرایه ساده به نام numbers تعریف کنیم:
<script> export default { data() { return { show: false, load: true, alertAnimation: "fade", elementWidth: 100, selectedComponent: "app-success-alert", numbers: [1, 2, 3, 4, 5] }; },
من می خواهم از این آرایه برای گردش در یک حلقه و نمایش <li> ها استفاده کنیم، بنابراین به سادگی با یک v-for این کار را می کنیم:
<ul class="list-group"> <li class="list-group-item" v-for="number in numbers">{{ number }}</li> </ul>
در مرحله بعد باید یک دکمه داشته باشیم تا با کلیک روی آن آیتم های مختلف را حذف و اضافه کنیم. یادتان باشد که هدف نهایی ما در این جلسه اضافه کردن Transition به تمام آیتم های لیست است. ایجاد یک دکمه کار ساده ای است:
<hr /> <button class="btn btn-primary" @click="addItem">Add Item</button> <br /> <br /> <ul class="list-group"> <li class="list-group-item" v-for="number in numbers">{{ number }}</li> </ul>
همانطور که می بینید با کلیک روی این دکمه متدی به نام addItem اجرا خواهد شد (هنوز آن را تعریف نکرده ایم) و آیتم های جدید را اضافه خواهد کرد. برای حذف آیتم ها نیز می توانیم یک listener به خود آن ها اضافه کنیم:
<ul class="list-group"> <li class="list-group-item" v-for="(number, index) in numbers" @click="removeItem(index)" style="cursor: pointer" >{{ number }}</li> </ul>
همانطور که می دانیم اگر در v-for بخواهیم به ایندکس نیز دسترسی داشته باشیم باید از ساختار بالا استفاده کنیم. همچنین هنگامی که روی یک آیتم از لیست کلیک می شود متدی به نام removeItem حذف می شود و با استفاده از ایندکس تشخیص می دهد که روی کدام عنصر کلیک شده است. در نهایت یک استایل ساده را نیز به آن اضافه کرده ام تا cursor را روی pointer بگذاریم (یعنی وقتی موس را روی یکی از آن ها می بریم، نشانگر موس به شکل دست در بیاید).
در مرحله بعد باید متد های خودمان را تعریف کنیم. من با متد removeItem شروع می کنم:
removeItem(index) { this.numbers.splice(index, 1); }
یعنی ایندکس را به آن می دهیم تا دقیقا همان ایندکس را از آرایه numbers حذف کند. از آنجایی که لیست ما بر اساس آرایه numbers نمایش داده می شود، اگر عنصر از numbers حذف شود دیگر در لیست ما نمایش داده نخواهد شد. برای متد addItem می خواهم که مکان اضافه شدن هر آیتم به صورت تصادفی باشد. قبل از انجام این کار باید نمونه ای از کار دستور splice را به شما نشان بدهم (این دستور یک دستور ساده جاوا اسکریپتی است و اختصاصی به Vue ندارد). فرض کنید آرایه ای به شکل زیر داشته باشیم:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
سپس از دستور splice به شکل زیر استفاده کنیم:
fruits.splice(2, 0, "Lemon", "Kiwi");
این کد می گوید:
- ایندکس 2 را در نظر بگیر (می شود عنصر سوم).
- 0 عنصر را حذف کن.
- Lemon و Kiwi را در ایندکس پاس داده شده قرار بده.
بنابراین نتیجه نهایی کد بالا می شود:
Banana, Orange, Lemon, Kiwi, Apple, Mango
یعنی splice علاوه بر حذف کردن می تواند عناصر را به آرایه اضافه کند. با این حساب می توان گفت:
addItem() { const pos = Math.floor(Math.random() * this.numbers.length); this.numbers.splice(pos, 0, this.numbers.length + 1); }
در ابتدا pos (مخفف position، به معنی «موقعیت») را تعریف کرده ایم. pos همان ایندکسی خواهد بود که عنصر جدید را به آن اضافه خواهیم کرد. برای محاسبه آن نیز یک عدد تصادفی (math.random) را در طول آرایه ضرب کرده ایم (this.numbers.length) و نهایتا عدد نهایی را به پایین گِرد کرده ایم (math.floor). این کار به ما عددی بین 0 و بالاترین ایندکس موجود در آرایه را می دهد. در مرحله بعد splice را روی numbers صدا می زنیم. کد بالا می گوید در ایندکسی برابر با pos را بگیر. آرگومان دوم عدد 0 است که یعنی هیچ عنصری را حذف نکن. آرگومان سوم می گوید 1 واحد به طول آرایه اضافه کن و عدد جدید را به عنوان آیتمی جدید در ایندکسی برابر با pos در آرایه numbers اضافه کن. در واقع با اضافه کردن یک واحد به طول آرایه (آرگومان سوم) مطمئن می شویم که اعداد تکراری را به آرایه اضافه نخواهیم کرد.
در حال حاضر کدهای ما بدون مشکل کار می کنند و می توانید آن ها را در مرورگر تست کنید. حالا که لیست خود را تکمیل کرده ایم، در قسمت بعد باید انیمیشن های خود را به آن اضافه کنیم.
- نصب و راهاندازی فریمورک VueJS
- مثالی قویتر و نصب محلی Vue
- درکی ساده از Tamplateها در Vue
- درک بهتر Directiveها + برخی از Directiveهای مشهور
- تعامل با Event Listenerها
- قدرت Vue با انواع Modifierها
- مبحث two-way-binding و پاسخ به تغییرات
- خصوصیات محاسبهشده (Computed Properties)
- روش جایگزین خصوصیات Computed
- استایلدهی پویا با اشیاء
- استایلدهی پویا اسمی بدون استفاده از کلاسها
- ایجاد شرط با v-if
- نمایش لیستها با v-for
- گردش درون اشیاء
- رهگیری عناصر در v-for
- اولین پروژه تمرینی – آمادهسازی اولیه
- پیادهسازی منطق شروع بازی
- تکمیل دکمه Attack
- کدنویسی متدهای باقیمانده در بازی
- نمایش log و اتمام پروژه
- آشنایی و تعامل بیشتر با شیء Vue
- نحوه مدیریت دادهها در شیء Vue
- استفاده از ref$ در قالبهای HTML
- آشنایی با Mount کردن Templateها
- نحوه بهروزرسانی DOM و چرخه زندگی شیء Vue
- استفاده از Lifecycleها در عمل
- راهاندازی سرور محلی Vue
- آشنایی با Vue CLI
- درک بهتر فایلهای Vue
- آشنایی با کامپوننتها
- ساخت کامپوننتها
- استفاده از کامپوننتها و قوانین آن
- ارتباط بین کامپوننتها با Props
- اعتبارسنجی Props
- رویدادهای شخصیسازیشده
- ارتباط بین کامپوننتهای خواهر و برادر
- استفاده از یک شیء سراسری Vue
- آشنایی با Slotها
- بررسی جزئیات بیشتری از Slotها
- قابلیتی جدید به نام Dynamic Components
- مرگ کامپوننتهای پویا
- فصل جدید و پروژه جدید
- پروژه Quote – پاسدادن دادهها با Prop
- پروژه Quote – تکمیل ثبت Quote
- تکمیل پروژه Quoteها
- فصل جدید، کار با فرمها
- کار با عناصر Textarea
- عناصر Checkbox و Radiobutton
- کار با منوهای آبشاری و جزئیات v-model
- تعریف عناصر شخصیسازیشده
- نگاهی عمیقتر به Directiveها
- ساخت یک Directive شخصی
- ثبت محلی Directiveها + قدمی پیشرفتهتر
- آشنایی با Filterها
- جایگزینی برای Filterها
- آشنایی با Mixinها
- جزئیات تکمیلی در مورد Mixinها
- آشنایی با انیمیشنها در Vue
- استفاده عملی از Transition و Animation
- ترکیب Transition و Animation
- استفاده از کلاسهای CSS مختلف
- تبدیل عناصر مختلف به یکدیگر با انیمیشن
- اعمال انیمیشن با جاوا اسکریپت
- کدنویسی متدهای مربوط به hookهای جاوا اسکریپتی
- تکمیل انیمیشن جاوا اسکریپتی + کامپوننتهای پویا
- ساخت یک لیست برای انیمیشنهای گروهی
- اضافهکردن انیمیشن به لیست ساختهشده
- مینی پروژه فصل – سوالات ریاضی
- تکمیل پروژه و اضافهکردن انیمیشن
- فصل جدید، درخواستهای HTTP
- ارسال اطلاعات به Firebase
- دریافت دادهها از Firebase
- آشنایی با Interceptorها در Vue-Resource
- آشنایی با مفهوم Resource در Vue-Resource
- جزئیات تکمیلی Resourceها
- فصل جدید، آشنایی با Routing
- آشنایی با Routing Modes و اضافهکردن لینکها
- استایلدهی لینک فعال
- ایجاد Navigation با کد و پارامترهای URL
- واکنش به تغییرات URL و پارامترهای آن
- ساخت URLهای پویاتر با Named Routes
- مباحث Query Parameter و Redirection
- مبحث Redirect و اضافهکردن انیمیشن
- پاسدادن # و کنترل عملیات اسکرول
- محافظت از Routeها با استفاده از Gaurdها (قسمت اول)
- محافظت از Routeها با استفاده از Gaurdها (قسمت دوم)
- بارگذاری Routeها به صورت lazy
- فصل جدید، آشنایی با VueX
- نحوهی پیادهسازی اولیهی پکیج VueX
- آشنایی با Getterها در VueX
- اتصال خودکار Getterها به خصوصیات
- حل مشکل ترکیب Getterها و Computed Props
- آشنایی با مبحث Mutation در VueX
- آشنایی با Actionها در Mutations
- درک عملیاتهای پشت صحنه در mapActions
- خلاصهی جلسات قبل + معرفی مشکلی جدید
- اعمال two-way-binding در VueX
- ماژولار کردن مدیریت State در VueX
- استفاده از Namespaceها در VueX
- فصل جدید، پروژهی نهایی دوره
- پیادهسازی Header یا Navigation سایت
- ایجاد ساختار برای قسمت سهام (stocks)
- اضافهکردن منطق دکمهی Buy
- پیادهسازی VueX روی پروژه
- تعریف Mutationهای ماژول Portfolio در VueX
- پیادهسازی Getters برای ماژول Portfolio در VueX
- تکمیل کامپوننت Portfolio و نمایش سهام
- اعتبارسنجی برای فروش سهام و استفاده از فیلترها
- نمایش Funds و اعتبارسنجی برای خرید سهام
- پایان دادن به روز + اضافه کردن انیمیشن به صفحات
- پیادهسازی drop-down و راهاندازی Firebase
- ذخیره و دریافت قیمتها با درخواستهای PUT و GET
- تکمیل دکمهی Load Data و کار با Vue dev Tools
- خروجیگرفتن نهایی از برنامه برای قرارگیری روی سرور
- فصل پیوست ۱: استفاده از axios به جای vue-resource
- فصل پیوست ۱: درخواست GET در axios
- فصل پیوست ۱: استفاده از Interceptorها در Axios
- فصل پیوست ۲: احراز هویت در برنامههای SPA
- فصل پیوست ۲: ساخت کاربر جدید با ایمیل و رمز عبور
- فصل پیوست ۲: دریافت توکن احراز هویت در مرورگر
- فصل پیوست ۲: تکمیل منطق برنامه و کدهای باقیمانده
- فصل پیوست ۲: پیوست توکن به درخواستهای خروجی
- فصل پیوست ۲: بهینهسازی برنامه و Path Guard
- فصل پیوست ۲: اضافهکردن مکانیسم logout از حساب
- فصل پیوست ۲: پیادهسازی logout خودکار از حساب
- فصل پیوست ۲: ذخیرهی دادهها در localStorage
- فصل پیوست ۲: پیادهسازی فرآیند login خودکار
- فصل پیوست ۳: فصل جدید، اعتبارسنجی دادههای کاربر
- فصل پیوست ۳: ارائهی فیدبک اعتبارسنجی در UI
- فصل پیوست ۳: آشنایی با Validatorهای عددی
- فصل پیوست ۳: آشنایی با Validatorهای رمز عبور
- فصل پیوست ۳: آشنایی با requiredUnless
- فصل پیوست ۳: اعتبارسنجی آرایههای پویا
- فصل پیوست ۳: ثبت فرم و اعتبارسنجیهای ناهمگام
- فصل پیوست ۴: نسخهی 3 از Vue CLI
- فصل پیوست ۴: آشنایی با پروژه در CLI جدید
- فصل پیوست ۴: استفاده و کار با پلاگینها در CLI جدید
- فصل پیوست ۴: آشنایی با Environment Variables
- فصل پیوست ۴: خروجی گرفتن از برنامه نهایی
- فصل پیوست ۴: شخصیسازی بیشتر Build
- فصل پیوست ۴: استفاده از GUI