
برای شروع این جلسه کد ساده زیر را داشته باشید (چه در jsfiddle و چه در محیط محلی خودتان). برای قسمت HTML:
<!-- Put this in the HTML section in JSFiddle! --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <p>{{ title }}</p> </div>
برای قسمت جاوا اسکریپت:
new Vue({ el: '#app', data: { title: 'Hello World!' } })
اگر یادتان باشد این مثال، همان مثال جلسه قبل است و فقط event آن را حذف کرده ام. در کد بالا syntax خاصی به حالت {{title}} داریم که به آن string interpolation می گوییم (این یک template در Vue است). سوالی که اینجا مطرح می شود این است که چطور می توانیم از چنین syntax ای در کد HTML استفاده کنیم و اینکه چرا علامت های { و } درون کد HTML ما دیده نمی شود؟
برای پاسخ دادن به این سوال باید نحوه کار template ها را درک کنید. اولین چیزی که باید به یاد داشته باشید این است که هنگام نوشتن کدهای HTML ما هیچ کد HTML ای نمی نویسیم! یعنی چه؟ یعنی کدهایی که در فایل HTML خود قرار می دهیم (در اصل آن قسمتی که با el به یک نمونه Vue متصل شده باشند) توسط Vue دریافت شده و در پشت پرده پردازش می شود. این پردازش بر اساس template engine فریم ورک Vue انجام می شود که فعلا با آن کاری نداریم. نکته مهم این است که Vue کدهای HTML شما را گرفته و درون حافظه خود آن ها را پردازش می کند. سپس یک فایل نهایی HTML می سازد و آن کدهای نهایی را به کاربر می دهد.
برای تست این موضوع می توانید کدهای بالا یا مثال قبل را باز کرده و روی تگ <p> کلیک راست و inspect کنید. با این کار کدهای HTML صفحه را می بینید و بین آن ها اثری از کدهای Vue نیست. این مسئله به شما کمک می کند که نحوه کار Vue را بهتر درک کنید. همچنین اگر با فریم ورک هایی مانند React کار کرده باشید می دانید که آن ها هم چنین چیزی را دارند و معمولا با نام Virtual DOM به آن اشاره می شود.
نکته بعدی که به درک ما از template فریم ورک Vue کمک می کند بحث دسترسی به خصوصیات data است. در قسمت قبل مشاهده کردیم که ما می توانیم بدون ذکر هیچ پیشوندی، به طور مستقیم به این خصوصیات دسترسی داشته باشیم:
<p>{{ title }}</p>
کد بالا صحیح است اما کد زیر غلط است:
<p>{{ data.title }}</p>
همین مسئله در مورد متد های موجود در قسمت methods نیز صادق است. به طور مثال من کد خودم را به شکل زیر ویرایش کنم:
new Vue({ el: '#app', data: { title: 'Hello World!' }, methods: { sayHello: function () { return 'Hello!'; } } })
در اینجا متدی به نام sayHello داریم که تنها کار آن برگرداندن رشته Hello است. حالا می توانم در قسمت HTML خود بدین صورت از آن استفاده کنم:
<div id="app"> <p>{{ sayHello() }}</p> </div>
همانطور که می بینید نیازی به گفتن methods.sayHello نیست و فقط sayHello کفایت می کند. حواستان باشد که پرانتزها را در جلوی نام تابع قرار دهید تا اجرا شود. اگر کد بالا را اجرا کنید عبارت Hello! را در مرورگر و درون تگ <p> مشاهده خواهید کرد. دقت کنید که مقدار وارد شده بین {{ }} باید مقداری باشد که توانایی تبدیل شدن به رشته (string) را دارا باشد.
توجه کنید که تمام این موارد مربوط به زمانی است که در حال کدنویسی در HTML باشیم. زمانی که درون خود جاوا اسکریپت در حال کدنویسی هستیم باید به شکل دیگری رفتار کنیم. به طور مثال اگر بخواهیم تابع sayHello به جای رشته Hello مقدار title را برگرداند نمی توانیم آن را به شکل زیر بنویسیم:
new Vue({ el: '#app', data: { title: 'Hello World!' }, methods: { sayHello: function () { return title; } } })
روش صحیح انجام این کار به شکل زیر خواهد بود:
new Vue({ el: '#app', data: { title: 'Hello World!' }, methods: { sayHello: function () { return this.title; } } })
همانطور که می دانید در جاوا اسکریپت عادی نمی توانیم چنین کاری انجام بدهیم چرا که کلیدواژه this در اینجا به data.title اشاره نمی کند بلکه به Scope خود تابع SayHello اشاره خواهد داشت. خوشبختانه Vue برای اینکه کار کدنویسی ما را راحت تر کند به ما اجازه می دهد که از this.title استفاده کنیم.
حالا بیایید کمی پیشرفته تر عمل کنیم. اگر در data خصوصیتی به نام link داشته باشیم که لینکی را در خودش داشته باشد:
new Vue({ el: '#app', data: { title: 'Hello World!', link: 'http://google.com' }, methods: { sayHello: function () { return this.title; } } })
حالا اگر بخواهیم این لینک را درون HTML خود نمایش بدهیم می گوییم:
<script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <p>{{ sayHello() }} - <a href="{{link}}">Google</a></p> </div>
با این کار خروجی زیر را می گیریم:
Hello World! – Google
البته Google به صورت یک لینک خواهد بود. حالا اگر روی این لینک کلیک کنیم مشکل ما حل می شود؟ خیر! با کلیک روی Google می بینید که آدرس آن یک آدرس عجیب و غریب است. مثلا لینکی که در jsfiddle به من داده می شود به صورت زیر است:
https://fiddle.jshell.net/_display/%7B%7Blink%7D%7D
اگر با URL ها آشنا باشید می دانید که 7B برابر با } است بنابراین آدرس بالا در ادامه سایت فعلی و به صورت encode شده برای URL ها خواهد بود. یعنی سعی دارد دقیقا به لینکی با آدرس زیر برود:
{{link}}
مسئله این است که ما نمی توانیم از {{}} برای هر چیزی در HTML استفاده کنیم. قبلا هم گفتم که زمانی می توانید از {{}} استفاده کنید که مقدار مورد نظر شما یک متن و رشته عادی باشد نه لینک و نه چیز دیگر. برای حل مشکل بالا باید از یکی از directive های Vue استفاده کنیم:
<div id="app"> <p>{{ sayHello() }} - <a v-bind:href="link">Google</a></p> </div>
v-bind به Vue می گوید که آرگومان پاس داده شده را به جای استفاده مستقیم، به مقدار مورد نظرش bind کن (بچسبان). آرگومان پاس داده شده href و مقدار آن خصوصیت link است (بدون علامت های { }) بنابراین Vue مقدار درون link را به خصوصیت href می چسباند و آن را در نهایت درون HTML نمایش می دهد. حالا اگر روی Google کلیک کنید واقعا به آدرس Google برده می شوید:
Hello World! – Google
- نصب و راهاندازی فریمورک 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