
حالا که با فیلترها آشنا شدیم نوبت به mixin ها می رسد. برای شروع این جلسه وارد پوشه Src شده و یک کامپوننت جدید به نام list.vue بسازید. محتوای این فایل به شکل زیر است:
<template> <div> <h1>Filters & Mixins</h1> <input v-model="filterText" /> <ul> <li v-for="fruit in filteredFruits">{{ fruit }}</li> </ul> </div> </template> <script> export default { data() { return { fruits: ["Apple", "Banana", "Mango", "Melon"], filterText: "" }; }, computed: { filteredFruits() { return this.fruits.filter(element => { return element.match(this.filterText); }); } } }; </script> <style> </style>
همانطور که می بینید این کد دقیقا شبیه به کدهای فایل app.vue است با این تفاوت که قسمت های مربوط به فیلترهای کوچک و بزرگ کردن متون را حذف کرده ام و فقط کدهای مخصوص لیست میوه ها باقی مانده است. در این مرحله وارد فایل App.vue شده و List.vue را وارد آن کنید:
<script> import List from "./List.vue"; export default { data() { return { text: "Hello there!", fruits: ["Apple", "Banana", "Mango", "Melon"], filterText: "" }; }, filters: { toUppercase(value) { return value.toUpperCase(); } }, computed: { filteredFruits() { return this.fruits.filter(element => { return element.match(this.filterText); }); } }, components: { appList: List } }; </script>
من در اینجا List.vue را import کرده و سپس آن را به عنوان یک کامپوننت محلی ثبت کرده ام. حالا می توانیم از این کامپوننت درون قسمت template استفاده کنم:
// بقیه کدها // <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"> <h1>Filters & Mixins</h1> <p>{{ text | toUppercase | to-Lowercase }}</p> <hr /> <input v-model="filterText" /> <ul> <li v-for="fruit in filteredFruits">{{ fruit }}</li> </ul> <hr /> <app-list></app-list> </div> // بقیه کدها //
حالا اگر مرورگر را باز کنید، هر دو لیست را خواهید دید.
در حال حاضر مشکلی که وجود دارد کدهای تکراری در هر دو کامپوننت هستند. در واقع ما دو کامپوننت را ایجاد کرده ایم و به هر دو نیاز داریم اما data آن ها به صورت جداگانه و تکراری در هر دو فایل تعریف شده است و طبیعتا مدیریت آن ها مشکل خواهد بود. اگر ما یک filter سراسری تعریف کرده بودیم می توانستیم با استفاده از آن، هر دو فایل را فیلتر کنیم اما در حال حاضر چنین امکانی نداریم. چرا؟ به دلیل اینکه توضیح دادیم filter ها کدهای بهینه ای نیستند. البته این موضوع مخصوص به مبحث filter ها نیست و در بسیاری از برنامه های واقعی کدهای تکراری را پیدا خواهید کرد. در این حالت دوست داریم قابلیتی وجود داشته باشد که بتوانیم قسمتی از کدهای یک کامپوننت را در کامپوننت های دیگر به اشتراک بگذاریم تا از تکراری شدن کدها و خطای code duplication دوری کنیم.
اگر بخواهیم data و همچنین computed را در هر دو فایل داشته باشیم اما کدها را تکراری ننویسیم باید از mixin ها استفاده کنیم. برای انجام این کار وارد پوشه src شده و فایل جدیدی به نام fruitMixin.js ایجاد کنید و ثابت خودمان را export می کنیم. این ثابت باید یک شیء جاوا اسکریپتی باشد که تمام داده های مورد نیاز ما را (در این مثال، data و computed را) داشته باشد. محتویات این فایل:
export const fruitMixin = { data() { return { fruits: ["Apple", "Banana", "Mango", "Melon"], filterText: "" }; }, computed: { filteredFruits() { return this.fruits.filter(element => { return element.match(this.filterText); }); } } }
حالا می توانیم به List.vue رفته و این فایل را در آنجا import کنیم:
<script> import { fruitMixin } from "./fruitMixin"; export default { // بقیه کدها //
سپس می توانیم تمام data و computed را با fruitMixin جابجا کنیم. برای این کار کدهای قبلی این کامپوننت را حذف کرده و به جای آن می گوییم:
<script> import { fruitMixin } from "./fruitMixin"; export default { mixins: [fruitMixin] }; </script>
Mixins یک خصوصیت پیش فرض در فریم ورک Vue است که mixin های شما را مشخص می کند. این خصوصیت یک آرایه است که در آن باید نام تمام mixin های خود را وارد کنید. من اینجا فقط یک mixin داشتم بنابراین فقط همان را وارد کرده ام.
همین کار را می توان با App.vue نیز انجام داد، البته درون App.vue یک خصوصیت دیگر به نام text نیز داریم:
export default { data() { return { text: "Hello there!", fruits: ["Apple", "Banana", "Mango", "Melon"], filterText: "" }; }, // بقیه کدها //
بنابراین نمی توانیم همه آن را حذف کنیم بلکه می گوییم:
export default { data() { return { text: "Hello there!" }; }, filters: { toUppercase(value) { return value.toUpperCase(); } }, components: { appList: List } };
یعنی فقط مواردی را که درون mixin خود داریم حذف کرده ایم. سپس به سادگی mixin را وارد این فایل کرده و از خصوصیت mixins برای ثبت آن استفاده می کنیم:
<script> import List from "./List.vue"; import { fruitMixin } from "./fruitMixin"; export default { mixins: [fruitMixin], data() { return { text: "Hello there!" }; }, filters: { toUppercase(value) { return value.toUpperCase(); } }, components: { appList: List } }; </script>
اگر کدها را ذخیره کرده و به مرورگر بروید، تمام برنامه را بدون نقص مشاهده می کنید. توجه داشته باشید که در این فایل یک data داریم و درون mixin خودمان نیز یک data دیگر داریم بنابراین با وارد کردن آن به این فایل دو data خواهیم داشت که غیر مجاز است اما Vue هوشمندانه عمل می کند و خودش data های ما را تبدیل به یک Data می کند تا به خطا برنخوریم.
در قسمت بعد وارد جزئیات بیشتری از mixin ها می شویم.
- نصب و راهاندازی فریمورک 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