آموزش VueJs – version3 تمام کمال بشتابید !!

آموزش VueJs – version3 تمام کمال بشتابید !!

لوگوی فریم‌ورک vue js ما تو این آموزش ابتدا سعی کردیم یک دید کلی نسبت به vuejs پیدا کنیم سپس بیشتر عمیق شدیم که با توجه به سر فصل هر مبحث ، راحت میتونید به اون قسمت دسترسی پیدا کنید و مسلط بشین و اگر نکته ای جا مونده یا توضیح بخشی کامل یا بد بود خوش حال میشیم کامنت بزارید 🙂 و همچنین مارو تو تکمیل هرچی بهتر این آموزش یاری کنید یا اگر تجربه جالبی داشتین ذکر کنید. جدیدترین فریم‌ورک نسبت به reactjs و angular هست. توی سال 2014 توسط ایوان یو (evan you)، مهندس سابق گوگل توسعه داده شد. سایت‌های 9gag، گیت‌لب و لاراول از این فریم‌ورک استفاده میکنند. تفاوت سه فریم‌ورک محبوب جاوااسکریپت : (React | angular | vue): ( اگه هدفدار اومدی سمت vue و میخوای سری یاد بگیری این بخشارو اسکیپ کن 🙂 ) هرکدام از این فریم‌ورک ها را یک توضیح مختصری میدهیم : . فریم‌ورک React : React که توسط فیسبوک معرفی شده است یک کتابخانه متن‌باز JavaScript است. که برای ساخت رابط کاربری‌ تعاملی و stateful و همچنین رابط‌های کاربری قابل استفاده مجدد معرفی شده است . برای رندر کردن رابط‌های پیچیده با ویژگی‌های زیاد خوب عمل می‌کند.همچنین با کمک دام مجازی ( virtual DOM ) می‌توان وب اپلیکیشن‌های بسیار پایدار ساخت. مزایا : فریم‌ورک React از DOM مجازی به توسعه دهندگان React کمک می کند تا بدون ایجاد تأثیر بر سایر قسمت های رابط کاربری ، به راحتی هرگونه تغییر در برنامه را انجام دهند. React به کاربران امکان استفاده مجدد از کامپوننت را می دهد. این باعث می شود توسعه برنامه آسانتر و کارآمدتر شود.React از Redux استفاده می کند ، که ذخیره سازی و مدیریت استیت‌ها را در برنامه های بزرگ ساده می کند. Unidirectional data binding کد را پایدار ساخته و توسعه برنامه در آینده پشتیبانی می‌کند زیرا جریان داده به یک جهت هدایت می شود. فریم‌ورک Angular : Angular یک فریمورک متن‌باز است که توسط گوگل ارائه شده است که دارای معماری Model-View-Controller (MVC) است و توسعه ، نگهداری و آزمایش را برای توسعه دهندگان آسانتر می‌کند. برای ساخت برنامه‌های وب پیچیده و تعاملی فوق‌العاده است ،اما برای برنامه‌های تک صفحه‌ای محبوبیت زیادی ندارد . مزایا : وب اپلیکیشن‌های ساخته شده با Angular ، بدون در نظر گرفتن سیستم عامل ، در هر محیطی درون مرورگر اجرا می شوند. Two-Way data binding اطمینان حاصل می‌کند که وقتی داده‌ها در مدل تغییر می‌کنند بلافاصله تغییرات بر روی برنامه اعمال می‌شود ، و هنگامی که داده ها در نما ( View ) تغییر کند ، مدل نیز به روز می شود. فریم‌ورک Vue : یکی از مهمترین مزایای Vue سایز کم آن است. مستندات با جزئیات زیاد . این کار به توسعه دهندگان اجازه می‌دهد تا با استفاده از گره مجازی یک قالب با یک فایل HTML، فایل JavaScript ، و فایل Pure JavaScript بنویسند. معماری MVVM آن ، کار با بلوک های HTML را بسیار آسان می کند. حال در مورد تفاوت های بیشتر این فریم‌ورک ها میتوان ده ها صفحه نوشت ولی ما به اختصار توضیحی دادیم و یک ویدیو جالب و کوتاه در مورد این ویدیو ها از mosh hamedani وجود داره دوست داشتید تماشا کنید .( متاسفانه باید از فیلترشکن استفاده کنید 🙁 ) https://www.youtube.com/watch?v=i8xsbYgMiBs&t=235s خوب ، اگر نمودار و آنالیز گوگل را مشاهده کنیم ،می‌بینیم Angular تا سال ۲۰۱۶ بسیار محبوب بود ، اما از سال ۲۰۱۷ به بعد ، جستجوهای برای React و Vue به طور پیوسته در حال رشد هستند.میزان جستوجو فریم‌ورک های React Vue Angular بر اساس google trends از 2015 تا 2020 میزان رشد Vue نسبت به سایر بسیار خوب بوده برای استفاده از فریم‌ورک Vue راه های متفاوتی وجود داره که ما به دو مورد از آن اشاره میکنیم : 1) استفاده از (CDN (Content Delivery Network و اضافه کردن آن به فایل html در انتهای body قبل از اسکریپت های دیگه : <script src=&quothttps://unpkg.com/[email protected]&quot>2) روش دیگه دانلود vue/cli است که با پکیج منیجر های npm و yarn قابل دانلوده (قبلش باید npm یا yarn داشته باشی دوست عزیز ) و یک ui مناسب و یک خط فرمان command line ایجاد میکنه :yarn global add @vue/cli
# OR
npm install -g @vue/cliحال در command line : 1) ابتدا Vue Create app را مینویسیم که کلمه app میتواند هرچی باشد و اسم فایلی که به صورت دیفالت به پسوند vue ساخته میشود است . 2) حال دو گزینه برایتان میاد که برای استارت کار گزینه دیفالت رو میزنیم . 3) حال npm run sreve را میزنی که در localhost:8080 اپ دیفالت vue بالا بیاید اگر مشکلی در npm run sreve وجود داشت npm install را میزنی که تمامی dependencies های package.jsoرا دانلود کنه سپس ادامه میدهیمهوررراااا نصبش تمام شد ایزی :)اگر به روش نصب دوم علاقه دارید میتونید نحوه نصب آن با تصویر از نوشته زیر بهره ببرید : https://virgool.io/vuejs-community/%D9%85%D9%82%D8%AF%D9%85%D9%87-vuejs-xh3hdkb0fnzy برای استفاده از ui داده شده توسط Vue/cli بعد از Vue Create app با نوشتن vue ui یک ui مناسب خواهیم دید که در نصب پیکج های وابسته و انالیز اپ کمک مان خواهد کرد.قبل از شروع کردن ما از vscode استفاده کردیم و اینکه از extension vetur برای auto complete و خوشگلی کد ازاین extension بهره بردیمو برای مشاهده بعضی از نکات و درخت مجازی vue , از extension vue.js devtools در مرورگر کروم استفاده کردیم .بریییم که شروع کنیم ببینیم این Vue Vue که میگن چیه :)ما در ادامه از روش اول برای نصب استفاده کردیم حال برای اینکه متوجه بشوید که چه تفاوتی بین استفاده از Vue به جای Vanila javascript ابتدا یک اپ دفترچه هدف هارو (شبیه به to do list ) ایجاد کردیم :حال برای نوشتن این اپ کوچیک با جاوااسکریپت خام کد زیر نوشته شده است:حالا میایم این اپ رو با vue مینویسیم :خب ابتدا پکیج سبک Vue رو اون پایین قبل از فایلی که من نوشتم اد میکنیم سپس میام از کدای نوشته شده در vue لذت میبریم اول یک instance یا همون ی نمونه از Vue میگیریم و از اونجایی که ابجکته ی چیزایی توش تعریف شده که باید اونارو با توجه به نیازمند استفاده کنیم حالا این vue میاد key به اسم data تعریف کرده که متغیر هامونو توش نگه میداریم که value ی فانکشن که به صورت بالا با توجه به مثال پیاده سازی کردیمش. ( البته چه…data: function یا …}()data فرقی نداره ) حالا باید مشخص کنیم این نمونه vue داره به چی اشاره میکنه که با mount در اخر مشخص کردیم . حالا ی key دیگه داره به اسم method که فانکشن هامونو فعلا تو این تعریف کردیم حالا برای اینکه بتونیم با html کار کنه باید ی تغییراتی رو تو html بدیم میام اونجا که هدفمون رو مینویسیم رو با زدن دکمه اضافه کنیم به بقیه هدفامون . این بخش فقط هدف گفتن تفاوت Vue با جاوااسکریپت خام بود اگه جایی رو نفهمیدی بیخیال برو ادامه رو بخون :)از کدهای بالا تقریبا میفهمیم که Vue چه ویژگی هایی به ما میده که به طور کلی میشه گفت میشه 1 ) داخل تگ های html با {{ }} یک متغیر جاوا اسکریپتی بزاریم و ی ویژگی بزرگ دیگه اش اینکه به ما attribute خاصی میده که واقعا کد نویسی فرانتو برامون راحت میکنه واقعا این ویژگی ها بسیار جذاب هستند. حالا بریم ببینیم سنیتکس این فریم‌ورک چیه ( اخ جوننز ) همانطور گفتیم داشتن دو ویژگی : 1)نوشتن داخل تگ های html و 2) داشتن attribute های خفن تو vue این فریمورک رو قدرتمند تر کردهحالاهمانطور گفتیم میتونیم داخل {{ }} میتونیم با استفاده از key هایی که در data داریم یا حتی با فانکشن های که در متد داریم ( البته این حرکت خوبی نیست که در ادامه توضیح میدم ) اطلاعات بدیم اونجا همانطور که دیدیم در نمونه Vue ما یک فانکشن به اسم data داریم که متغیر هامونو توش نگه میداریم ی key دیگه تو vue داریم به اسم method که توش میایم فانکش هامونو مینویسیم که در ادامه میگه همشون نه 🙁 (??what)) خب فعلا این بخشای Vue کافیه یاد گرفتیم ؛ حالا ببینم این attribute های که vue برامون ساخته چیه ؟ خب (همه attribute های Vue با -v شروع میشه ) <span v-once>This will never change: {{ msg }}</span>خب v-once میاد ی بار متغییر msg میگیره دیگه نمیگیره ( این رو گره های داخلی تاثیر میزاره )خب تا حالا شاید براتون این سوال پیش اومده باشه که شاید بیایم کد های جاوااسکریپتی یا tag های html رو داخل {{ }} و احتمالا امنیت برنامه به خطر بیفته و ی injectionیی رخ بده فک کردی Vue فکرشو نکرده https://codepen.io/team/Vue/pen/yLNEJJM تو کد بالا که اومدیم میبینیم که تو p اول اومده اون تگ هارو نوشته و باهاشون کاری نکرده ولی تو p دوم اومده از attribute به اسم v-html استفاده کرده که برابر فانکش یا متغیری میتوان قرار داد حالا با ازمون خطا میتونیم بفهمیم نمیشه {{ }} رو تو attribute ها استفاده ،حال چیکار کنیم اینجاس که اسم v-bind میاد attr که باعث میشه attr های خود تگ های html رو value شون رو تغییر بدیم ی چنتا مثال بزنیم <div v-bind:id=&quot’list-‘ + id&quot></div><div v-bind:id=&quotdynamicId&quot></div><a v-bind:href=&quoturl&quot> … </a>که به ترتیب list و dynamicId و url میتونن فانکشن یا متغیر باشن حالا v-bind رو میشه خلاصه نوشت میتونین به بخش v-bind shourthand vue مراجعه کنید.پس از گذر از bind میرسیم به خان event ها که معمولی برای button و input ها استفاده میشه مثلا میخوایم که دکمه کلیک شد فانکشنی رخ بده اینکارو با attr به اسم v-on که میشه دقیقتر بنویسیم که چه اتفاقی افتاد مثلا v-on:click یا v-on:mouse فلان بشه و با توجه با اینکه فرض به اینکه با تقریب خوبی جاوااسکریپت مسلط هستید میدونید ی event رو برمیگردونه و بقیه ماجرا …حالا اینا اگه تو فرم بودن مثل جاوااسکریپت خام ابتدا از درخواستی که فرم میفرسته جلوگیری میکنیم و ادامه میدیم معمولا با http request هامونو تو فریمورک Vue با framework axios انجام میدیم که توضیحاتش تو این مقاله نمیگنجه .حالا بیایم کلاس های متغییری به تگ هامون بدیم ؛ برای این کار ی attr دیگر به اسم :class وجود داره<div :class=&quot{ active: isActive }&quot></div>خب بعضی وقتا میخوایم تگ های html با توجه به یک شرطی واکنشی متفاوت داشته باشن اینجاست که attrبه اسم v-if به میون میاد .<h1 v-if=&quotawesome&quot>Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>بعضی وقتا هم میخوای ی لیستی از داده هارو از بک اند بگیریم و تو فرانت نشون بدیم اینجاس که بازم vue به کمکون اومده با attr به اسم v-for میتونی این کارو به راحتی با توجه به مثال بکنیم :<ul id=&quotarray-with-index&quot>
<li v-for=&quot(item, index) in items&quot>
{{ parentMessage }} – {{ index }} – {{ item.message }}
</li>
</ul>که میاد از ارایه به اسم itmes که در هر index اون یک ابجکت ذخیره شده را به نمایش میزاره خب برگردیم به موضوعی که گفتیم چرا خوب نیست همش متد بنویسیم فک کنید برای دوتا input دوتا فانکشن نوشتین که داخلشون console log ه ی جمله ای میبینی که با انجام یکی دیگه از فانکشنا اون یکی کنسول لاگه هم کار میکنه (اینجا رو سپردم به خودتت ببینم چیکار میکنی ) حالا این هم داخل معماری vue دلیلی داره و برای رفع این مشکل اومده ی key دیگه تو ابجکت Vue تعریف کردن به اسم computed به طور خلاصه دلیل وجود computed این دلیله و اینکه وقتی تو computed فانکشین مینویسیم حتما باید در استفاده پاس با رفرنس باشه و پرانتزاشون بزاریم در صورتی که در متد این موضوع اهمیت نداشت و اسم خاصی نسبت به متیغیر های دیتا داشته باشه چون ابتدا vue میاد متیغیر هارو میگرده اگه نبود میاد computed رو میگرده و ادامه کار …حالا ی key دیگه به صورت دیفالت تو Vue هست به اسم watch که میایم توش فانکشن هایی مینویسیم که هم اسم یکی از متغیر های data است و با تغییر هر کدوم از متغیر ها این فانکشن ها هم میان کاری رو انجام میدن . چه جالب !!استفاده از کامپوننت‌ها، یک راه ساده برای ایجاد کد دوباره قابل‌ استفاده برای برنامه‌های Vue.js است. کامپوننت‌ها را میتوان مانند المان‌هایی مانند تگ‌های HTML دید که میتوانند توسط نمونه اصلی Vue یا کامپوننت های دیگر استفاده شود.برای ایجاد یک کامپوننت در Vue، کافی است که رویه component از constructor ر Vue قطعه کدی مانند کد زیر، آن را تعریف کرد:Vue.component(‘some-component’, {
/* data, methods, etc. go here */
});مرسوم است که در نام‌گذاری کامپوننت، تمام حروف نام، از حروف کوچک انگلیسی باشند و کلمات با خط‌ فاصله از هم جدا شوند.همانطور که میبینید، رویه Vue.component دو ورودی میگیرد. ورودی دوم، object ای است که پیکربندی و تنظیمات آن کامپوننت با آن انجام میشود. تقریبا تمام چیزهایی که میتوانیم به سازنده (constructor) Vue بدهیم. البته دو استثنای el و data وجود دارد.تگ data را نیز ورودی میدهیم ولی متفاوت با شیوه‌ای که به سازنده Vue میدهیم. بجای این که data یک شئ باشد (object)، data ورودی ما به Vue.component باید تابعی باشد که یک شئ برمیگرداند.Vue.component(‘some-component’, {
data: function() {
return {
heading: ‘Some Component’
};
}
});الزام این کار به این است که ما شاید یک کامپوننت را چندین و چند بار در مکان های مختلف استفاده کنیم و احتمالا رفتار مطلوب ما از یک کامپوننت این است که برای خود و مستقلا عمل کند تا این که چند نمونه از یک کامپوننت، منابعی اشتراکی از شئ را استفاده کنند.چند راه برای مشخص کردن یک قالب برای یک کامپوننت وجود دارد.یک راه این است که محتوای قالب را داخل یک تگ با نام همان کامپوننت قرار دهیم. برای این کار لازم است که خصوصیت inline-template را به آن تگ اضافه کنیم.<some-component inline-template>
<div>
<h1>{{heading}}</h1>
<p>This is a component</p>
</div>
</some-component>این روش از ارزش پایینی برخوردار است چرا که در اغلب اوقات ما نیاز داریم تا از کامپوننت ها مکررا استفاده کنیم و این بسیار اذیت کننده است که لازم باشد هر دفعه کد قالب را از نو بنویسیم.یک راه دیگر این است که از تگ برای قالب‌مان استفاده کنیم.<script id=&quotsome-template&quot type=&quottext/x-template&quot>
<div>
<h1>{{ heading }}</h1>
<p>This is a component!!!</p>
</div>Vue.component(‘some-component’, {
data: function() {
return {
heading: ‘Some Component’
};
},
template: ‘#some-template’
});همچنین میتوانیم خصوصیت template را مستقیما به رشته‌ی حاوی متن قالب‌مان هنگام ایجاد یک کامپوننت نسبت دهیم. مانند زیر.Vue.component(‘some-component’, {
data: function() {
return {
heading: ‘Some Component’
};
},
template: ‘<h1>{{heading}}</h1>’
});توجه شود که در تمام قالب‌های بالا، تنها یک المان بلافاصله داخل قالب قرار گرفته و تمام المان های دیگر درون آن قرار دارند. این از الزامات قالب های Vue است.ابزار Vuex یک الگوی مدیریت state + کتابخانه برای برنامه های Vue.js است. این ابزار همچنین با افزونه‌ی رسمی devools Vue ادغام می شود.بیایید با یک برنامه‌ی شمارنده‌ی ساده در vue شروع کنیم:این یک برنامه با سه بخش زیر است:بخش state، منبع اطلاعاتی که برنامه ما را هدایت می‌کندبخش view، نگاشتی از اطلاعات بخش stateبخش actions، روشهای ممکن تغییر state در پاسخ به ورودی‌های کاربر در viewاین یک نمایش ساده از مفهوم “جریان یک‌طرفه‌ی داده” است:با این حال ، وقتی چندین مؤلفه با یک state مشترک داشته باشیم، سادگی به سرعت از دست می‌رود:ممکن است viewهای متفاوت به یک state یکسان وابسته باشندممکن است actionهای متناظر با viewهای متفاوت، لازم داشته باشند که state یکسانی را تغییر دهندپس چرا ما stateهای مشترک این مؤلفه‌ها را استخراج و در یک global singleton مدیریت نمی‌کنیم؟با این کار درخت مؤلفات ما به یک view بزرگ تبدیل می‌شود و هر مؤلفه‌ای می‌تواند به state دسترسی داشته باشد و یا actionها را راه بیندازد؛ مهم نیست کجای درخت قرار داشته باشد.با تعریف و تفکیک مفاهیم مربوط به مدیریت state و اجرای قوانینی که استقلال بین viewها و stateها را حفظ می‌کنند، ساختار و قابلیت نگهداری بیشتری به کد خود می‌دهیم.این ایده‌ی اصلی پشت Vuex است، با الهام از Flux، Redux و The Elm Architecture. برخلاف سایر الگوها، Vuex همچنین یک کتابخانه است که به طور خاص برای Vue.js طراحی شده است.مفهوم Vuex به ما کمک می‌کند تا با پرداخت هزینه‌ی مفاهیم بیشتر و تکرار واضحات، state مشترک را مدیریت کنیم. این یک trade-off بین بهره‌وری کوتاه‌مدت و بلندمدت است.اگر تا به حال ‌SPA در مقیاس بزرگ توسعه نداده‌اید و مستقیما به داخل Vuex شیرجه بزنید، ممکن است برایتان بسیار طولانی و وحشتناک جلوه کند. این کاملا طبیعی است؛ اگر برنامه‌ی شما ساده باشد بدون Vuex به خوبی سر خواهید کرد.در مرکز هر برنامه Vuex یک store است. “store” در واقع ظرفی است که state برنامه‌ی شما را نگه می‌دارد. دو مورد وجود دارد که فروشگاه Vuex را از یک global object ساده متفاوت می‌کند:1) وقتی مؤلفه‌های Vue می‌خواهد state را از آن بازیابی کنند، در صورت تغییر state در store، آنها به طور کارآمد به‌روز می‌شوند.2) نمی‌توان مستقیما ‌state را در store تغییر دهید. برای تغییر state، تنها راه commit کردن mutation است. با این کار می‌توان مطمئن شد که هر تغییر state یک رکورد قابل پیگیری از خود به جا می‌گذارد، که به ما کمک می کند تا برنامه‌های خود را بهتر بشناسیم.پس از نصب Vuex، بیایید یک store ایجاد کنیم. این کار بسیار ساده است، فقط یک شی state اولیه و برخی mutationها را ارائه دهید:import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
})اکنون می‌توان با دستور store.state به شی state دسترسی پیدا کرد و با روش store.commit، تغییرات را روی آن ایجاد کرد:store.commit(‘increment’)

console.log(store.state.count) // -> 1
برای دسترسی به این this.$store در مؤلفه‌های Vue، باید store ایجاد شده را به نمونه Vue ارائه دهید.new Vue({
el: ‘#app’,store: store
store: store
})اکنون می‌توان در متدهای مؤلفه یک mutation را commit کرد:methods: {
increment() {
this.$store.commit(‘increment’)
console.log(this.$store.state.count)
}
}باز هم، دلیل اینکه ما به جای تغییر مستقیم store.state.count از mutation استفاده می‌کنیم، این است که ما می‌خواهیم به طور صریح آن را ردیابی کنیم. این قرارداد ساده تصمیمات شما را صریح‌تر می‌کند، بنابراین در هنگام خواندن کد می‌توانید در مورد تغییرات state برنامه‌ی خود بهتر استدلال کنید.حالا در آخر بگیم با این vue میشه ی بخشی از پروژه بزرگی رو نوشت یا کلا وب اپمون رو با vue نوشت باز ی ویژگی دیگه از vue (البته اینو بگم هر فریم‌ورکی ی هدفایی رو دنبال میکنه نمیشه همه قابلیت همه رو داشته باشه ) .تشکر فراوان در اخر از هم تیمی های عزیزم امیرمحمد قاسمی و علی اصغر قناتی که باعث این مقاله به اسم بنده در ویرگول جمع بشه . معلومه داک خوده vue بوده و جایی مشکل داشت که خیلی کم بود رو یا گوگل کردیم یا فیلم های خفن یوتیوب رو استفاده کردیم که ی چنتاشون پایین میزارم براتون : https://v3.vuejs.org/guide/introduction.html https://cli.vuejs.org/guide/installation.html https://youtu.be/Wy9q22isx3U https://youtu.be/5lVQgZzLMHc و در آخر اگه میخوای خیلی خیلی خوب Vue رو یاد بگیری کد بزن کدای پروژه های اپن سورس vue رو ببین و بهترین کورس یودمی تو این موضوع : Udemy – Vue – The Complete Guide (w Router, Vuex, Composition API) 2020-12 :)) رو تو سایتای ایرانی مجانی ببین

Author: admin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *