با استفاده از Blazor میتوان برنامههای وب تعاملی را با کمک زبان #C تهیه کرد که پیشتر برای نوشتن آنها به جاوا اسکریپت نیاز بود. به این ترتیب میتوان برای تهیهی قسمتهای front-end و backend پروژهی خود، از زبانی که به آن تسلط دارید استفاده کنید. یکی از مزایای آن امکان به اشتراک گذاری کدهای سمت سرور و کلاینت است؛ با توجه به اینکه هر دو به یک زبان تهیه میشوند. وضعیت توسعهی برنامههای وب، پیش از ارائهی Blazor
عموما برای ...
در بخش قبل با تعدادی از UI Component های vutify آشنا شدیم. در ادامه به بررسی و یادگیری تعدادی دیگر از این UI Componentها میپردازیم. کامپوننت v-card این کامپوننت یک کامپوننت همه کاره است. cardها میتوانند حاوی محتوا و اقداماتی در مورد یک موضوع واحد باشند. card ها ممکن است حاوی یک عکس، متن و یک لینک در مورد یک موضوع باشند. هر card دارای این سه جزء یا کامپوننت اساسی است: v-card-title , v-card-text , v-card-action ک ...
کاربران امروزه با عناصری که به نحوی
خاص درون صفحه عمل میکنند، آشنا شدهاند. بنابراین انتخاب مناسب برای اتخاذ این عناصر زمانی
مناسب است که به تکمیل کارآیی و رضایت کاربر
کمک کند. یک کامپوننت در واقع از دو بخش تشکیل شدهاست: 1 - اول اینکه چگونه به نظر میرسد
( UI ). 2 – دوم اینکه چگونه کار میکند ( UX ) . این عناصر رابط ( component ) شا ...
در قسمتهای قبلی ( ^ , ^ , ^ ) نحوهی ارتباط بین کامپوننتها بررسی شد؛ روش دیگری هم برای به اشتراک گذاری دادهها بین کامپوننتها وجود دارد که با استفاده از کتابخانهای بنام Vuex پیاده سازی میشود. وقتی برنامهی شما وسعت پیدا میکند و ارتباط بین کامپوننتها بیشتر و پیچیدهتر میشود، روشهای قبلی ( ^ , ^ , ^ ) کارایی لازم را ندارند و یا اینکه به سختی میشود دادههای به اشتراک گذاشته شدهی بین کامپوننتها را مدیریت نمود. در اینجا میتوان ا ...
در بخش قبل با نصب فریم ورک vuetify و بخشی از کامپوننتهای آن آشنا شدیم . Order : بهوسیلهی order میتوان ترتیب قرارگیری آیتمهای Grid را مشخص کرد. فرض کنید یک ردیف سه ستون داریم و میخواهیم زمانیکه این آیتمها در مروگر نمایش داده میشوند، ترتیب قرارگیری آنها متناسب با نیاز ما باشد که با استفاده از دستور order این کار صورت میپذیرد. نکته: این کار برای بحث seo مورد استفاده قرار میگیرد.
...
برای طراحی ui برنامههایی که با فریم ورک vue.js توسعه داده میشوند، داشتن یک css framework مناسب، جهت زیبا سازی برنامه، یکی از انتخابهای مهم میباشد. در این سری از آموزشها، نحوهی بکارگیری فریم ورک Vuetify را یاد خواهیم گرفت. چرا vuetify ؟ دلایل زیادی برای استفاده از این framework وجود دارد که از جمله آنها میتوان به مواردی از قبیل رابط کاربری خوب برای طرح بندی صفحه برنامه، پشتیبانی از تمام مرورگرها، پشتیبانی از ...
وقتی از یک زبان برنامه نویسی شیء گرا مثل سی شارپ استفاده میکنیم، تا جای ممکن سعی خواهیم کرد از نوشتن کدهای تکراری خودداری کنیم ( ^ , ^ ) . مثلا یک Super Class داریم که توسط چندین Sub Class مورد استفاده قرار میگیرد و یا از الگوهایی مانند Repository استفاده میکنیم. در Vue.js امکانی فراهم شده تا بتوان کدهایی با قابلیت استفادهی مجدد ایجاد کرد. mixin میتواند شامل تمام قابلیتهای یک کامپوننت از قبیل بخشهایی مثل توابع، دیتا و ... باشد. ...
در قسمتهای قبلی( ^ و ^ ) نحوهی ارتباط بین کامپوننتها در Vue.js بررسی و مزایا و معایب آنها بیان شد. روش دیگری هم برای ارسال اطلاعات از کامپوننتِ Parent به فرزندانش وجود دارد که با استفاده از Dependency Injection یا به اختصار DI مقدور میباشد و در ورژن +2.2 معرفی شد که نحوهی ارتباط بین کامپوننتِ Parent و فرزندانش را آسان نمود. پیشتر برای ارتباط از Parent به Child، از Props استفاده میکردیم، ولی اگر قرار بود در چند سطح این ارتباط ...
در قسمت قبلی ، نحوه ارتباط بین کامپوننتهای Parent و Child را مورد بررسی قرار دادیم و اینکه چگونه دادههایشان را به اشتراک میگذارند؛ اما چند موضوع در روش قبلی مورد بحث میباشد: 1) مدیریت nested componentها برای استفاده از چنین روشی مشکل است. 2) اگر تعداد دادههای اشتراکی زیاد باشد، مدیریت آنها با استفاده از props گیج کننده میباشد. 3) اگر دو کامپوننت مجزا (Sibling Component) قصد به اشتراک گذاری اطلاعاتی را داشتند تکلیف چی ...
برنامههای Vue.js ای از چندین کامپوننت برای بخش بندی هر قسمت تشکیل میشوند و این بخش بندی برای مدیریت بهتر تغییرات، خطایابی، نگهداری و استفاده مجدد ( reusable) میباشد. فرض کنید تعدادی کامپوننت در برنامه داریم و اطلاعات این کامپوننتها بهم وابسته میباشند؛ بطور مثال یک کامپوننت انتخاب دسته بندی را داریم و به محض تغییر این مقدار، میخواهیم لیستی از محصولات پیشنهادی یا پرفروشِ آن دسته بندی، در کامپوننت پایین صفحه نمایش داده شود و یا خرید ...