
همانطور که در جلسه قبل توضیح دادم، این جلسه به event ها اختصاص دارد. احتمالا شما هم حدس می زنید که کار با event ها در فریم ورک Vue با جاوا اسکریپت ساده تفاوت دارد و حدستان نیز درست است اما یادتان باشد که Vue فقط یک فریم ورک جاوا اسکریپتی است بنابراین پایه کار دقیقا یکی خواهد بود. برای شروع این جلسه به یک پروژه ساده نیاز داریم. کدهای قسمت HTML من به شکل زیر هستند:
<script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <button>Click me</button> <p>{{ counter }}</p> </div>
کدهای جاوا اسکریپت را نیز در کد زیر مشاهده می کنید:
new Vue({ el: '#app', data: { counter: 0 } })
در Data من یک خصوصیت counter وجود دارد که به طور پیش فرض روی صفر تنظیم شده است. این counter درون یک تگ <p> و در کدهای HTML من render می شود. هدف ما در این جلسه این است که یک event listener را به دکمه ساده HTML (که در کدهای بالا می بینید) متصل کنیم تا با هر بار کلیک روی این دکمه، به تعداد counter اضافه شود.
در جلسات اول این دوره آموزشی با directive ای به نام v-on آشنا شدید و به شما گفتم که این directive یک event listener است که برای دریافت داده از یک عنصر استفاده می شود. بر اساس این تعریف می توانید v-on را تقریبا برعکس v-bind تصور کنید؛ در v-bind داده ای را به عنصر مورد نظر می چسباندیم و در v-on داده ها را از عنصر دریافت می کنیم. آرگومانی که به این directive پاس داده می شود طبیعتا یک event است بنابراین برای شروع می گوییم:
<div id="app"> <button v-on:click="increase">Click me</button> <p>{{ counter }}</p> </div>
من از event کلیک کردن کاربر استفاده کرده ام و به Vue گفته ام اگر روی این دکمه کلیک شد، increase را (نام یک تابع) اجرا کن. حالا باید increase را برای پروژه خودمان تعریف کنیم بنابراین در کدهای جاوا اسکریپت می گوییم:
new Vue({ el: '#app', data: { counter: 0 }, methods: { increase: function () { this.counter++; } } })
تابع increase بسیار ساده است و فقط یک واحد به counter ما اضافه می کند. حالا اگر کدها را در مرورگر اجرا کنید و روی دکمه Click Me کلیک نمایید با هر کلیک یک واحد به counter ما اضافه می شود. امیدوارم این مثال، درک خوبی از نحوه کار listener ها به شما داده باشد.
تا این قسمت مسئله خاصی نداشتیم اما بیایید کمی کدها را پیچیده تر کنیم. به طور مثال همه می دانیم که هر event یک شیء event دارد که به صورت خودکار توسط جاوا اسکریپت ساخته می شود. یکی از خصوصیات موجود در این شیء مختصات کلیک کاربر یا اتفاق افتادن event هستند. من در قالب یک مثال این موضوع را به شما نشان خواهم داد. کدهای HTML خود را به شکل زیر تغییر بدهید:
<div id="app"> <button v-on:click="increase">Click me</button> <p>{{ counter }}</p> <p>Coordinates: {{ x }} / {{ y }}</p> </div>
و کدهای جاوا اسکریپت نیز بدین شکل تغییر می کنند:
new Vue({ el: '#app', data: { counter: 0, x: 0, y: 0 }, methods: { increase: function () { this.counter++; } } })
من می خواهم کاری کنم که هنگام hover کردن روی پاراگراف بالا (hover کردن حرکت دادن موس روی یک عنصر بدون کلیک کردن است) مختصات موس خودم به صورت محور های x و y نمایش بدهم. بر این اساس باید یک event listener داشته باشیم که روی پاراگراف ما تنظیم شده باشد و رویدادِ mousemove را در نظر بگیرد:
<div id="app"> <button v-on:click="increase">Click me</button> <p>{{ counter }}</p> <p v-on:mousemove="updateCoordinates">Coordinates: {{ x }} / {{ y }}</p> </div>
این کد با حرکت موس روی پاراگراف مورد نظر، متدی به نام updateCoordinates را اجرا می کند. البته این متد هنوز تعریف نشده است بنابراین:
new Vue({ el: '#app', data: { counter: 0, x: 0, y: 0 }, methods: { increase: function () { this.counter++; }, updateCoordinates: function (event) { this.x = event.clientX; this.y = event.clientY; } } })
باز هم می گویم که شیء event توسط خود جاوا اسکریپت ساخته شده و به صورت خودکار به تابع ما پاس داده می شود (ربطی به Vue ندارد و در جاوا اسکریپت ساده هم همین است). خصوصیات client و client هم از خصوصیات پیش فرض شیء Event در زبان جاوا اسکریپت هستند و موقعیت موس کاربر را مشخص می کنند. بنابراین کار این تابع تغییر x و y در هنگام حرکت موس روی <p> است. اگر این کد را در مرورگر اجرا کنید و موس خود را روی <p> ببرید، مقادیر x و y دائما به روز رسانی می شوند.
مسئله بعدی پاس دادن آرگومان های خودمان است. به طور مثال اگر به جای افزایش یک واحدی برای counter بخواهیم تعداد افزایش را از خودمان تعیین کنیم چطور؟ برای انجام این کار به راحتی می گوییم:
<button v-on:click="increase(2)">Click me</button>
یعنی عدد 2 را به عنوان یک آرگومان به این تابع پاس داده ایم. بر همین اساس کدهای جاوا اسکریپت خود را نیز تغییر می دهیم تا از آرگومان پاس داده شده استفاده کنیم:
methods: { increase: function (step) { this.counter += step; }, updateCoordinates: function (event) { this.x = event.clientX; this.y = event.clientY; } }
به همین راحتی نامی برای آرگومان خود انتخاب می کنیم (من Step را انتخاب کرده ام) و counter را به تعداد آن افزایش می دهیم. تا اینجا مشکلی نیست اما اگر بخواهیم شیء event را به همراه آرگومان خودمان دریافت کنیم چه کار باید کرد؟
Vue برای این مسئله راه حلی دارد. شیء Event در فریم ورک Vue با دستور خاصی به نام event$ در دسترس است بنابراین می توان گفت:
<button v-on:click="increase(2, $event)">Click me</button>
این نام عینا باید به همین شکل نوشته شود (رزرو شده است). حالا می توانیم آن را در کدهای جاوا اسکریپت خود دریافت کنیم:
increase: function (step, event) { this.counter += step; }
البته این یک مثال است تا شما را با نحوه کار آشنا کند در غیر این صورت دریافت یک آرگومان، زمانی که کاری با آن نداریم، روش استاندارد کدنویسی نمی باشد.
- نصب و راهاندازی فریمورک 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