
به فصل جدید خوش آمدید! در این فصل در رابطه با filter ها و mixin ها صحبت خواهیم کرد، البته در این جلسه با filter ها شروع می کنیم. Filter ها یک syntax (نحو) خاص هستند که به ما اجازه می دهند داده های نمایش داده شده برای کاربر را تغییر دهیم. توجه کنید که filter ها داده های درون data را تغییر نمی دهند بلکه مقدار نمایش داده شده درون مرورگر تغییر خواهد کرد. به طور مثال فیلتری وجود دارد (ما هم آن را خواهیم ساخت) که رشته ای را گرفته و تمام حروف آن را به حروف بزرگ انگلیسی تبدیل می کند. توجه داشته باشید که Vue فیلترهای از قبل آماده شده ندارد و شما باید خودتان فیلترهای خودتان را بسازید. همچنین در ادامه در مورد روشی جایگزین برای filter ها صحبت خواهیم کرد.
برای این جلسه می توانید از فایل آماده ارائه شده در ابتدای فصل قبل استفاده کنید. یعنی یک پروژه ساده بدون کدهای اضافی که دارای یک فایل main.js و یک فایل app.vue می باشد. محتوای app.vue بدین شکل می باشد:
<template> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"> <h1>Filters & Mixins</h1> </div> </div> </div> </template> <script> export default {}; </script> <style> </style>
حالا تصور کنید چنین رشته ساده ای را به عنوان data برنامه خودمان داشته باشیم و سپس آن را با string interpolation (همان روش همیشگی استفاده از {{ }}
) در برنامه نمایش بدهیم:
<template> <div class="container"> <div class="row"> <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 }}</p> </div> </div> </div> </template> <script> export default { data() { return { text: "Hello there!" }; } }; </script> <style> </style>
ما با اجرای دستور npm run dev می توانیم عبارت hello there را درون مرورگر ببینیم اما بعضی از اوقات می خواهیم بدون تغییر مقدار این رشته در data، آن را به نوع دیگری به کاربر نمایش بدهیم. من اینجا می خواهم همه Hello there را با حروف بزرگ نمایش بدهم (یعنی HELLO THERE). همانطور که گفتم این کار با تعریف یک filter حل می شود. برای تعریف فیلترها باید خصوصیت filters را درون شیء Vue خود تعریف کنید:
<script> export default { data() { return { text: "Hello there!" }; }, filters: { } }; </script>
دستور بالا باعث ثبت یک filter محلی برای ما می شود که فقط در این کامپوننت قابل استفاده است اما اگر خواستید فیلترهای خود را به صورت سراسری ثبت کنید باید به فایل main.js رفته و آنجا از دستور Vue.filter استفاده کنید (در ادامه آن را به شما نشان خواهم داد).
اولین مقداری که باید به خصوصیت filters بدهیم، نام فیلتر ما است. من نام فیلتر خودم را To-uppercase می گذارم. انتخاب نام فیلتر مانند انتخاب نام کامپوننت ها می باشد، یعنی هم می توانیم به صورت رشته ای عمل کنیم:
<script> export default { data() { return { text: "Hello there!" }; }, filters: { "to-uppercase"(value) { } } }; </script>
و هم می توانیم از روش camel case و بزرگ کردن حروف به جای علامت خط فاصله استفاده کنیم:
<script> export default { data() { return { text: "Hello there!" }; }, filters: { toUppercase(value) { } } }; </script>
هر دو روش نام گذاری صحیح هستند و کاملا به سلیقه شما بستگی دارند. نکته بعدی اینجاست که این تابع همیشه یک مقدار یا value می گیرد. این Value همان داده ای است که می خواهیم آن را تغییر بدهیم، بنابراین باید آن را درون این تابع تغییر داده و نهایتا مقدار مورد نظرمان را return کنیم. از آنجایی که هدف من تغییر رشته به حروف بزرگ بود از دستور toUppercase در جاوا اسکریپت استفاده می کنم:
<script> export default { data() { return { text: "Hello there!" }; }, filters: { toUppercase(value) { return value.toUpperCase(); } } }; </script>
حالا برای اعمال کردن این فیلتر روی متن نمایش داده شده از کاراکتر pipe (علامت |
) و سپس نام filter استفاده می کنیم بنابراین:
<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 }}</p> </div>
حالا اگر مرورگر را باز کنید عبارت HELLO THERE! را خواهید دید.
حالا اگر بخواهیم فیلتر خود را به صورت سراسری تعریف کنیم به فایل main.js رفته و می گوییم:
import Vue from 'vue' import App from './App.vue' Vue.filter('to-lowercase', function (value) { return value.toLowerCase(); }); new Vue({ el: '#app', render: h => h(App) })
همانطور که می بینید استفاده از این دستور ساده است. باید Vue.filter را صدا زده و در آرگومان اول نامی برایش انتخاب کنید. سپس در آرگومان دوم همان تابع همیشگی را داریم. در نهایت برای استفاده از آن به فایل App.vue برگشته و می گوییم:
<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> </div>
همانطور که می بینید ما می توانیم فیلترها را به هم chain (زنجیر) کنیم، یعنی آن ها را پشت سر هم بیاوریم. روند اجرای این فیلترها نیز از چپ به راست است بنابراین در کد بالا Text ابتدا به toUppercase داده می شود (به عبارت HELLO THERE تبدیل می شود) و سپس HELLO THERE به فیلتر بعدی (to-lowercase) داده می شود. بنابراین نتیجه نهایی مشاهده شده در مرورگر، عبارت hello there خواهد بود.
احتمالا شما هم با من هم عقیده هستید که استفاده از فیلترها کار بسیار آسانی است اما در برخی اوقات روش های بهتری از استفاده از آن ها وجود دارد. در قسمت بعد، در رابطه با راه جایگزین استفاده از فیلترها صحبت خواهیم کرد.
- نصب و راهاندازی فریمورک 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