
در قسمت قبل با محیط Vue CLI آشنا شدیم و قسمت هایی از ساختار پوشه ها را بررسی کردیم اما فایلی به نام App.vue وجود دارد که هنوز بررسی نشده است. اگر یادتان باشد در قسمت های قبلی چندین بار به single file template اشاره کرده ام. این قابلیت به ما اجازه می داد کدهای خود را در فایل های مختلفی بنویسیم و سپس این فایل ها را کامپایل می کردیم و کدها به کدهای جاوا اسکریپت عادی تبدیل می شد. مهم ترین مزیت های این روش این بود که اولا نیازی به حضور کامپایلر نداشتیم بنابراین می توانستیم آن را حذف کنیم (کاهش حجم 30 درصدی)، دوما قابلیت های مختلف دیگری که در حالت های دیگر در دسترس ما نیست با single file template به ما داده می شود.
بی مقدمه به سراغ پوشه src می رویم. ابتدا فایل main.js را داریم. ما در این فایل یک شیء Vue جدید ساخته ایم:
import Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: h => h(App) })
در کد بالا el را مشاهده می کنید اما این el فقط محل بارگذاری برنامه ما را مشخص می کند نه اینکه بخواهیم قالب برنامه خود را درون آن بنویسیم. به جای این کار خصوصیت جدیدی را داریم که render نام دارد و کدهای جدید نوشته شده توسط ما را در محل مشخص شده توسط el بارگذاری می کند. در ضمن همانطور که مشخص است App.vue از درون تابع مشخص شده در render قرار می گیرد بنابراین نهایتا فایل App.vue است که در مرورگر بارگذاری می شود. حالا وارد فایل App.vue می شویم:
<template> <div id="app"> <img src="./assets/logo.png"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <ul> <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li> <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li> <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li> <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li> </ul> <h2>Ecosystem</h2> <ul> <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> </ul> </div> </template>
این کد دقیقا همان کدی است که در صفحه اصلی سرور دیده بودیم. یادتان باشد که فایل های vue. همیشه ساختار بالا را دارند: در ابتدا یک تگ <template> داریم و سپس کدهای HTML ما درون آن نوشته می شوند.
همچنین در همین فایل پس از این قسمت کدهای جاوا اسکریپت را در یک تگ <script> خواهیم داشت:
<script> export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script>
این قسمت، کدهای Vue همین فایل را دارد. کدهایی که در این قسمت نوشته می شوند هیچ ارتباطی با کدهای فایل های دیگر ندارند. بعدا در مورد این قسمت توضیح خواهم داد. در نهایت نیز تگ های style را برای استایل های CSS خواهیم داشت:
<style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
ما می توانیم هیچ استایلی ننویسیم اما حتما باید <template> را داشته باشیم تا چیزی به کاربر نمایش داده شود. من کل قسمت درون <template> را حذف کرده و به جایش یک تگ h1 قرار می دهم، سپس name و data را نیز از قسمت script و کل styles را حذف می کنیم:
<template> <h1>Hello World</h1> </template> <script> export default { } </script> <style> </style>
من در ادامه توضیح خواهم داد که Data و دیگر موارد حذف شده چه کاری انجام می دهند. فعلا می خواهم به شما بگویم که اگر کدها را به این شکل دشته باشید (و حتی اگر export default را نیز حذف کنید)، باز هم به کاربر نمایش داده خواهد شد. ما نیازی به script و style نداریم و تا زمانی که Template را داشته باشیم (چیزی برای نمایش به کاربران داشته باشیم) می توانیم کدها را کامپایل کنیم. حالا اگر کدها را ذخیره کرده و دستور npm run dev را اجرا نمایید (اگر از قبل در حال اجرا است نیازی به اجرای دوباره نیست)، همه چیز بدون خطا کامپایل می شود و اگر به آدرس localhost:8080 برویم فقط یک تگ h1 را می بینیم که به ما می گوید Hello World.
حالا Vue به فایل index.html نگاه می کند و هر چیزی که درون div با آیدی app باشد را پاک کرده و محتویات فایل App.vue را جایگزین آن می کند. نکته مهم اینجاست که بدانید شیء داخل script که Export شده است دقیقا همان شیء Vue است که قبلا با آن کار کرده ایم بنابراین می توانیم data یا methods و انواع خصوصیات را در آن داشته باشیم.
نکته نهایی در این قسمت این است که ما دو اسکریپت جداگانه npm برای کار با فایل هایمان داریم:
- دستور npm run dev: این دستور برنامه ما را در مموری کامپایل می کند و سپس روی سرور مجازی قرار می دهد. کامپایل شدن برنامه در مموری یعنی هیچ فایلی ایجاد نمی شود و کدهای ما درون خود مموری اجرا خواهند شد بنابراین هیچ تغییری در پوشه src نخواهیم داشت. معمولا از این دستور در هنگام کدنویسی و توسعه سایت استفاده می کنیم.
- دستور npm run build: اگر با webpack کار کرده باشید می دانید که این دستور کدهای ما را بهینه سازی کرده (اعمالی مثل minify سازی و غیره) و کدهای نهایی ما را به صورت کامپایل شده در پوشه dist تحویل می دهد. این دستور برای حالت production مناسب است؛ یعنی زمانی که تمام کدنویسی را انجام داده ایم و حالا می خواهیم کدهای نهایی پروژه را در پوشه dist دریافت کنیم.
از جلسه آینده شروع به کدنویسی کرده و به سراغ کامپوننت ها می رویم.
- نصب و راهاندازی فریمورک 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