
در قسمت قبل موفق شدیم که router خود را راه اندازی کنیم. حالا زمان آن شده است که کامپوننت های سایت را تک به تک کدنویسی کنیم. اگر به فایل index.html خود نگاه کنید، متوجه می شوید که من از CDN بوت استرپ برای استایل دهی استفاده کرده ام:
<head> <meta charset="utf-8"> <title>Stock Trader</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head>
بنابراین برای تعریف header نیز کافی است که به وب سایت بوت استرپ رفته و header نمونه آن را برداریم. برای مشاهده header نمونه باید به آدرس زیر سر بزنید:
https://getbootstrap.com/docs/3.4/components/#navbar
در آنجا یک header نمونه به شکل زیر می بینید:
<template> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </template>
وب سایت ما بسیار ساده تر از آن است که به این همه کد نیاز داشته باشد (مثلا ما قسمت search را نداریم) بنابراین این کدها را درون Header.vue کپی کنید (قبل از کپی کردن، تگ h1 درون فایل را حذف کنید) تا قسمت های ناخواسته را با هم حذف نماییم. مثلا قسمت button در ابتدای کد را حذف می کنم چرا که نمی خواهم این پروژه را برای گوشی های هوشمند بهینه سازی کنم. قسمت button این قسمت است:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
سپس یک تگ <a> را داریم که کلاس navbar-brand را دارد:
<a class="navbar-brand" href="#">Brand</a>
از آنجایی که برنامه ما SPA است نباید از لینک های عادی استفاده کنیم. اگر یادتان باشد در فصل routing توضیح دادم که به جای تگ های <a> برای جا به جایی بین کامپوننت ها از تگ های router-link استفاده می کنیم:
<router-link to="/" class="navbar-brand">Stock Trader</router-link>
بنابراین آن را به شکل بالا تغییر داده ام. دکمه Stock Trader قرار است اولین صفحه ما باشد بنابراین to را روی / گذاشته ام. در قسمت بعدی یک Div با آیدی navbarSupportedContent را داریم اما به این آیدی نیازی نیست بنابراین فقط id را حذف کنید. سپس یک <li> را داریم که منوی Drop-down ما را می سازد:
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> // بقیه کدها //
کل این <li> را حذف کنید چرا که به آن نیازی نداریم. همچنین در قسمتی از کد که به شکل زیر است، کلاس Active را داریم:
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
حتما کلاس active را از آن حذف کنید. در مرحله بعد یک <ul> را داریم که کلاس nav navbar-collapse را داشته و درون خود دو <li> دارد. هر دو <li> را حذف کرده و مانند من از router-link استفاده کنید:
<ul class="nav navbar-nav"> <router-link to="/portfolio" active-class="active" tag="li"><a>Portfolio</a></router-link> <router-link to="/stocks" active-class="active" tag="li"><a>Stocks</a></router-link> </ul>
با استفاده از خصوصیت tag به router-link گفته ایم که باید در نهایت به تگ <li> تبدیل شود. سپس با خصوصیت active-class (می توانید آن را به صورت activeClass نیز بنویسید) گفته ایم که کلاس active چه کلاسی باشد. از آنجایی که ما از بوت استرپ استفاده می کنیم، کلاس active را روی active گذاشته ام که یکی از کلاس های پیش فرض خود بوت استرپ است. در این باره در فصل های گذشته مفصلا صحبت کردیم.
در مرحله بعد کل قسمت form را حذف کنید:
<form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
ما هیچ قسمتی برای جست و جو نداریم بنابراین نیازی به کد بالا نیست و باید حذف شود. سپس کد زیر را داریم:
<ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li>
من می خواهم از <li> برای End Day استفاده کنم بنابراین فعلا آن را به شکل زیر می نویسیم اما بعدا آن را تغییر می دهیم:
<li><a href="#">End Day</a></li>
در مرحله بعد یک <li> با کلاس dropdown داریم. من می خواهم یک منوی کوچک dropdown (آبشاری) داشته باشم اما نمی خواهم فایل جی کوئری و جاوا اسکریپت بوت استرپ را فقط به خاطر یک dropdown وارد برنامه کرده و آن را سنگین کنم. بنابراین منطق آن را خواهیم نوشت اما فعلا کار نمی کند. تنها قسمت هایی که باید در اینجا ویرایش شوند، نام drop down است که باید به save & load تغییر پیدا کند:
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Save & Load <span class="caret"></span></a>
سپس از بین لینک ها (<li> ها) فقط دو لینک را می خواهیم چرا که فقط load و save را داریم:
<ul class="dropdown-menu"> <li><a href="#">Save Data</a></li> <li><a href="#">Load Data</a></li> </ul>
بنابراین کدهای نهایی ما برای Header.vue تا این قسمت بدین شکل هستند:
<template> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <router-link to="/" class="navbar-brand">Stock Trader</router-link> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <router-link to="/portfolio" active-class="active" tag="li"> <a>Portfolio</a> </router-link> <router-link to="/stocks" active-class="active" tag="li"> <a>Stocks</a> </router-link> </ul> <ul class="nav navbar-nav navbar-right"> <li> <a href="#">End Day</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" > Save & Load <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <a href="#">Save Data</a> </li> <li> <a href="#">Load Data</a> </li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> </template>
گرچه که بعدا به این قسمت برمی گردیم تا برخی از موارد را تصحیح کنیم. حالا به فایل App.vue برگشته و از این کامپوننت در App.vue استفاده می کنیم:
<template> <div class="container"> <app-header></app-header> <div class="row"> <div class="col-xs-12"> <router-view></router-view> </div> </div> </div> </template> <script> import Header from "./components/Header"; export default { components: { appHeader: Header } }; </script> <style> </style>
همانطور که می بینید ابتدا Header.vue را درون این فایل import کرده ام. سپس آن را به عنوان یک کامپوننت محلی ثبت کرده ام (در قسمت components). دلیل ثبت این کامپوننت به صورت محلی این است که هیچ قسمتی از برنامه من به جز App.vue از کامپوننت Header.vue استفاده نمی کند. در نهایت آن را در قسمت template اضافه کرده ام. همچنین برای بهتر شدن ظاهر برنامه یک Div با کلاس row و div دیگری با کلاس col-xs-12 اضافه کرده ام که همگی کلاس های ساده بوت استرپ هستند. حالا یک قدم دیگر باقی مانده است. باید در همین فایل (App.vue) یک استایل را برای body برنامه در نظر بگیریم که padding و خصوصیات بیشتری را به آن اضافه کنیم:
<style> body { padding: 30px; } </style>
کدها را ذخیره کرده و به مرورگر بروید. باید لینک های Stock Trader و Portfolio و Stocks در بالای صفحه به خوبی کار کنند و شما را به آدرس های زیر ببرند:
- Stock Trader به لینک http://localhost:8080/
- Portfolio به لینک http://localhost:8080/portfolio
- Stocks به لینک http://localhost:8080/stocks
همچنین با رفتن به این صفحات باید نوشته <h1> درون هر کامپوننت را مشاهده کنید (مثلا The Portfolio Component و The Home Component).
- نصب و راهاندازی فریمورک 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