مقدمه بر vue قسمت دوم

در ادامه پست قبلی در این قسمت نحوه ایجاد یک کامپوننت برای استفاده در header یک صفحه را آموزش می دهیم.

ساختار فایل های کامپوننت

فایل های کامپوننت دارای سه قسمت هستند

۱- قسمت template: در این قسمت دستورات به زبان html قرار می گیرد قسمت های قابل نمایش در یک سایت در این قسمت قرار می گیرند. در این قسمت تعیین می شود چه تگ هایی و در چه موقعیت هایی از مولفه قرار گیرند.

۲- قسمت script : در این قسمت دستورات js قرار می گیرد که به منظور ایجاد پویایی در وب استفاده می شود.

۳- قسمت style: دستورات css به منظور ایجاد نمای زیباتر از تگ ها استفاده می شود در این قسمت رنگ، ضخامت، تصویر پس زمینه و خیلی ویژگی های دیگر یک عنصر را تعیین می کنیم. در این پروژه ما با این قسمت کار نداریم و از style موجود در وب استفاده می کنیم.

ساختار کامپوننت Header

توضیح در مورد قسمت های template

۱- در این برنامه برای css از کتابخانه bootstrap استفاده می کنیم. بعضی از کلاس ها را توضیح می دهم

۲- کلاس row برای ایجاد کردن یک سطر استفاده می شود. درون این عنصر چند عنصر از کلاس col قرار می گیرد مزیت استفاده از این کلاس این است که در دستگاه های مختلف متناسب عناصر بزرگ یا کوچک می شوند.

۳- خط ۶ و ۱۷ در این خط عنصر row را به دو قسمت مجزا تبدیل می کنیم با استفاده از کلاس col-sm-8 تعیین می کند ستون اول دارای ۸ خانه و کلاس col-sm-4 تعداد ۴ خانه واحد است.

۴- خط ۱۲ و ۱۳ عناوین بالا سمت راست در هدر را تعیین می کند. مقادیر آنها به صورت پویا از قسمت اسکریپت دریافت می شود.

۵- خطوط بین ۱۷ تا ۳۵ برای ترسیم قسمت سمت چپ یعنی دکمه خروج، کامپوننت اطلاعات کاربر و دکمه خانه است.

بخش script

در بخش script دستورات جاوا اسکریپت برای ایجاد پویایی کامپوننت قرار دارد.

خط ۴۶ نام کامپوننت را تعیین می کند

خط ۴۷ درون کامپوننت header یک کامپوننت دیگر برای نمایش اطلاعات کاربر استفاده می شود که در این قسمت قرار می گیرد.

خط ۵۲ و ۵۳ داده هایی که تعیین کننده نام و زیر عنوان برنامه است.

دریافت کد برنامه

برای دریافت فایل کامل بر روی لینک زیر کلیک کنید

این پست به مرور تکمیل می شود و فایل ها به مرور بر روی وب آپلود می کنم

در قسمت سوم نحوه ایجاد منو بر روی صفحه را بیان می کنم