اولین چیزی که شاید بپرسید اصلا vue.js چیه ؟!

اول همه بگم تلفظ Vue مثل View هست چون یکسری دقیقا نمیدونم چی صداش بزنن !
یک فریم ورک جاوا اسکریپت سمت کاربر (front-end) هست که برای ساخت SPA (Single Page Application) بیشتر استفاده میشه البته تاکید میکنم بیشتر واسه این کار استفاده میشه .
تمرکز هسته ی اصلی Vueهمونطور که از اسمش مشخصه رو View هست توی MVC یا MVVM و فقط مسئول بخش نمایش هست ، اگر دوستان با react هم کار کرده باشن و آشنا باشن اون هم دقیقا به همین صورت هست . در کل میشه گفت جایگزین JQuery هستن تو پروژه با امکانات بیشتر.
اگه بازم نفهمیدین Vue چیه ولی میدونید یکی از فریم ورک های angular یاreact یاember یا backbone و از این دست فریم ورک ها چی هست Vue هم مشابه همین ها هست .
بزارید با یک مثال هم توضیح بدم ، فرض کنید یک سایت هواشناسی داریم که اطلاعات آب و هوا رو در اختیار ما قرار میده و ما باید یک درخواست بزنیم به سرور این سایت و اطلاعات آب و هوا رو دریافت کنیم و توی سایت خودمون نمایش بدیم اینجاست که vue وارد کار میشه و اطلاعات دریافتی رو نمایش میده البته اینو بگم هسته Vue کار request زدن به سرور رو انجام نمیده اما نگران نباشید شما میتونید با اضافه کردن پلاگین vue-resource خودتون request بزنید که درآینده از این دست پلاگین ها رو بیشتر معرفی میکنیم . امیدوارم توضیحات به حد کافی بوده باشه که شما با این فریم ورک دوست داشتنی آشنا شده باشید .
#vue_چیست

از این به بعد سعی میشه مزیت های vue گفته بشه نسبت به بقیه فریم ورک ها فقط یک نکته بگم اگر در حال حاضر react یا angular2 کار میکنید با خواندن این نوشته نمیخواد یهو پاشید بیایید vue کار کنید پرش بین فریم ورک ها اصلا خوب نیست اگه این که دیگه بنا به شرایطی مجبور باشید ، همه این فریم ورک ها خوب هستن ولی اگه تازه میخواین شروع کنید یا angular 1 کار هستین حتما vue رو به نظرم بزارید جزو لیست یادگیری
البته اگه react یا angular 2 رو کامل بلد هستین تاکیید میکنم کامل بلد هستین یادگیری vue رو هم پیشنهاد میدم در کنار این فریم ورک ها .
خوب اولین مزیتی که vue داره داکیومنت بسیار کامل و خوبش هست طوری که اکثرا ازش تعریف کردن و گفتن ما با نگاه کردن به همین داکیومنت تونستیم vue رو یادبگیریم.از مزیت های دیگه اش ساده بودن این فریم ورک هست که توی سرعت یادگیری خیلی تاثیر داره طوری که اکثرا گفته بودن با یک هفته کار کردن vue رو بلد شدن و دوستانی که angular 1 کار میکنن و میخوان مهاجرت کنن این زمان یک هفته به یکی و دو روز تبدیل میشه
پس میتونه یک انتخاب خیلی خوب واسه افرادی باشه که از angular 1 استفاده میکنن و قصد مهاجرت دارن .
#چرا_vue

یکی دیگه از مزیت های vue نسبت به سایر فریم ورک ها حجم کم اون هست که به صورت gzip در حدود ۲۳ کیلو بایت هست که برای ریکت و انگولار به ترتیب ۴۳ و ۱۱۱ کیلوبایت هست .
از مزیت های دیگه میشه به سرعت بسیار بالایی که داره اشاره کرد به صورتی که در بنچمارک ها سرعتی دو برابر ریکت داره .
در کل میشه گفت امکانات انگولار و سرعت ریکت یکجا جمع شده توی vue و نتیجش شده این چیزی که میبینید .
این لینک هم اومده vue رو با بقیه فریم ورک ها نقایسه کرده که دوست داشتین میتونید مطالعه کنید ：
https://vuejs.org/v2/guide/comparison.html
نکته جالبی که در وب هست vue رو به عنوان angular 2 بدون تایپ اسکریپت عنوان میکنن پس اگه از کد زدن با تایپ اسکریپت لذت نمی برید vue همون امکانات رو در اختیرتون قرار میده بدون تایپ اسکریپت البته این نکته رو هم بگم vue از تایپ اسکریپت و اگه اشتباه نکنم از jsx هم پشتیبانی میکنه.
#چرا_vue

خب شاید با خوندن این مطالب و تحقیقات خودتون تصمیم گرفته باشید شروع به یادگیری vue.js کنید . اما نمیدونید از کجا !؟
خب اولین چیزی که باید بدونید این که vue در حال حاضر ورژن 2 هست پس بهتره مطالبی که ورژن دو رو اموزش میدن دنبال کنید اما فک نکنید ورژن یک و دو زمین تا آسمون با هم فرق دارن میتونید اموزش های ورژن یک رو هم مطالعه بکنید و بعد قسمت مهاجرت از ورژن یک به دو مطالعه بکنید تا تغییرات رو متوجه بشید .

۱-اولین منبع یادگیری شما داکیومنت خود vue هست .

۲- یکی دیگه از منابع خوب که بروزرسانی هم میشه Awesome vue هست که توی همه زمینه بازم تکرار میکنم همه زمینه ها به شما مطلب معرفی میکنه که از این هم غافل نشید ：
https://github.com/vuejs/awesome-vue
۳-بعضی از دوستان عادت به دیدن فیلم های اموزشی دارن که خوشبختانه دوستان لاراولی در لاراکست اموزش ورژن دو رو به صورت رایگان اماده کردن و شما میتونید در لینک زیر مشاهده کنید که دیدن این فیلم ها هم خالی از لطف نیست ：
http://vuecasts.com/

منتظر منابع دیگه باشید و اگه حس میکنید مطالب مفید هستن به اشتراک بزارید ممنون
#یادگیری

یکی از پلاگین یا کتابخونه هایی که احتمالا توی vue بهش نیاز پیدا میکنید ، پلاگین ارسال درخواست یا request به سایت ها یا سرور های دیگه هست. که معمولا از دو کتابخونه زیر استفاده میشه ：
Axios و vue-resource
https://github.com/mzabriskie/axios
https://github.com/pagekit/vue-resource
در اوایل vue-resource توسط خود تیم vue پشتیبانی میشد که چند وقت پیش اعلام کردن این پلاگین رو دیگه پشتیبانی نمیکنن خودشون ولی همچنان توسط تیمهای دیگه گسترش پیدا میکنه و مشکلی نیست ازش استفاده کنید .
اما خودشون بعد این اتفاقات axios رو پیشنهاد دادن . دیگه انتخاب با خود شماست .

#معرفی #http_request

یکی از ابزار های خوبی که تیم vue برای توسعه دهندگان vue اماده کردن vue devtools هست که یک افزونه برای مرورگر کروم هست و به شما اجازه میده برنامه های اجرا شده رو راحت تر دیباگ کنید و ارور ها رو بهتر رفع کنید ... پس اگه میخواید با vue کار کنید حتما این ابزار رو نصب کنید
لینک افزونه ：
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

#معرفی #یادگیری

یکی از راه کار های یادگیری نگاه کردن به کد های بقیه هست و اگه این کد ها چارچوب و توسط برنامه نویس های معتبر نوشته شده باشن به شما هم الگو میدن . توی این سبک فریم ورک ها معمولا واسه شروع یادگیری از پروژه کوچک مثل todo list میتونید شروع کنید ：
Todomvc.com
و اما اگه دنبال پروژه بزرگ تر و سخت تر از این حرفا میگردید نسخه سایت hacker news رو که با vue و vuex و vue router زدن رو میتونید اینجا ببینید که سمت سرور هم اجرا میشه که یک مثال عالی و کامل هست ：
https://github.com/vuejs/vue-hackernews-2.0
اگه مطالب مفیدبودن به اشتراک بزارید ممنون .
#معرفی #یادگیری

اگه عادت به خواندن یا دیدن فیلم های آموزشی زبان اصلی ندارین و یا خوب متوجه نمیشید بهتر فیلم های آموزشی فارسی واسه شروع انتخاب کنید تا یک آشنایی نسبی داشته باشید تا بهتر این مطالب درک کنید .
پارس کلیک یک سری فیلم آموزشی به صورت رایگان گذاشته که واسه شروع خوبه و دیدنش خالی از لطف نیست . اصل فیلم ها در youtube هست که اونجا می تونید ببینید و واسه حمایتشون از اونجا دانلود کنید که یک بازدید براشون بخوره ، اما اگه دسترسی ندارید به youtube در آپارات و بعضی سایت ها هم افرادی این فیلم ها رو آپلود کردن که جستجو کنید پیداشون میکنید .
https://www.youtube.com/playlist?list=PL3Y-E4YSE4wbxnZDL-CDfIzp7CrdbSQ0U
#یادگیری

سرور ساید رندرینگ در ویو جی اس

#سئو
گوگل و بینگ جاوا اسکرپیت synchronous رو به خوبی ایندکس میکنن . اگه اپلیکیشنتون با یه لودینگ شروع میشه و بعد دیتا رو به صورت ای جکسی میگیره موتور های جست و جوی دیگه صبر نمیکنن که این کار تموم بشه ولی اگه براتون فقط همین دو تا سایت مهم هستن این مورد زیاد مهم نیست

کاربرانی با اینترنت ضعیف
ممکنه کاربراتون از جاهایی باشن که به هر دلیلی به اینترنت پرسرعت دسترسی نداشته باشن ، در این مورد کم کردن سایز اپلیکیشن و تعداد ریکوئست ها برای راحتی کاربر لازمه .
میتونید از (https://webpack.js.org/guides/code-splitting-require/) Webpack’s code splitting استفاده کنید که کاربر مجبور نشه کل اپلیکیشن رو دانلود کنه تا یه صفحه رو ببینه ولی بازم به اندازه یه صفحه html از قبل رندر شده سریع نیست .

شبکه های اجتماعی
ممکنه کاربرها از جاهای مختلف به شما لینک بدن (مثل فیسبوک ، توییتر، تلگرام و ...) که بعد از وارد کردن لینک سرورهاشون یه ریکوئست به سایت شما میزنن و چیزایی مثل title description و ... رو همون پایین لینک نشون میدن که اگه استاتیک باشن همیشه یه چیز ثابت می مونه در بهترین حالت .

با توجه به مسائل بالا استفاده از سرور ساید رندرینگ برای سایت هایی که سئو و سرعت و ... براشون مهمه به شدت توصیه میشه

فریم ورکی توسط کامینیوتی ویو جی اس ساخته شده که کار سرور ساید رندرینگ رو خیلی راحت تر و سریع تر میکنه که اینجا میتونید ببینیدش . https://nuxtjs.org

نویسنده : بردیا راستین
منبع : https://vuejs.org/v2/guide/ssr.html
#یادگیری #معرفی

سایت هایی وجود دارند که تمام مطالب مرتبط با vue رو یکجا جمع میکنن که قصد دارم چند تاشو معرفی کنیم :
1- http://vuejsexamples.com/
2- https://vuejsfeed.com/
3- https://codepen.io/tag/vuejs/
امیدوارم استفاده کنید از مطالبش و اگه شما هم چنین سایت هایی میشناسید به ما معرفی کنید تا به لیست اضافه کنیم .
#معرفی

شاید برای شما هم شده باشه که یک متغییر تعریف کرده و توی html به صورت {{ name }} نشونش داده باشید اما تا صفحه رو رفرش یا بروزرسانی میکنید به خصوص ctrl+f5 میزنید تو لود شدن صفحه متغییر دقیقا به همین صورت
{{ name }}
میبینید توی صفحه ولی با بارگزاری کامل صفحه مقدار متغییر نشون میده شاید شما خوشتون نیاد کاربر هاتون این تجربه رو داشته باشند
اینجاست که دایرکتیو v-cloak به کار میاد . کارش اینه تا زمانی که instance کامل بارگزاری نشده چیزی نمایش نده . استفاده ازش هم خیلی راحت مثل زیر ：
html
<div v-cloak>
{{ message }}
</div>
—---------------—
css
[v-cloak] {
display: none;
}

نکته ： اگه از دایرکتیو v-text و v-html هم استفاده کنید همین کار رو انجام میده .

https://vuejs.org/v2/api/#v-cloak

#یادگیری #نکات #v_cloak

لینک گروه ：
https://t.me/joinchat/AAAAAEGmHfikBfgSlaOKxA
لینک کانال ：
https://telegram.me/vue_js

نکته ای که هست هنگامی که شما محصول نهایی خودتون رو میخواهید انتشار بدین و روی سایت قرار بدین اگه فردی رو مرورگر خودش dev tools مخصوص vue رو داشته باشه میتونه مقدار متغییر ها یا اگه ارور داشته باشید رو ببینه که بهتره این امکانات غیر فعال بشه . برای غیر فعال کردن کافیه کد های زیر رو به main.js خود اضافه کنید ：
Vue.config.productionTip = false;
Vue.config.devtools = false;

کد اول ارور ها و راهنمایی ها رو دیگه تو کنسول نمایش نمیده و
کد دوم داخل تب vue که با dev tools اضافه شده مقدار متغییر رو نمایش نمیده امیدوارم مفید بوده باشه ....
اشتراک یادتون نره

لینک گروه ：
https://t.me/joinchat/AAAAAEGmHfikBfgSlaOKxA
لینک کانال ：
https://telegram.me/vue_js

#یادگیری #نکات

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

ببخشید اگه این چند وقت خیلی فعال نبودیم ولی دوباره شروع میکنم به گزاشتن مطلب و معرفی ......
و یک خبر خوب اگه مشکله خاصی پیش نیاد و همه چی طبق برنامه پیش بره یک date picker شمسی برای vue دارم اماده میکنم .... اگه به نتیجه رسید همین جا به اشتراک میزارم

لینک گروه ：
https://t.me/joinchat/AAAAAEGmHfikBfgSlaOKxA
لینک کانال ：
https://telegram.me/vue_js

شاید پیش اومده باشه در پروژه ها بخواین وقتی که پروژه در حال بارگزاری یا لود اطلاعات هست یک ایکون لودینگ رو به کاربران نشون بدین که الان قصد معرفی همین component رو دارم . بهتره پیشنمایش این component رو ببینید تا بهتر متوجه بشید :
http://greyby.github.io/vue-spinner/
همچین میتونید طبق نیاز خودتون رنگ و سایزش رو شخصی سازی کنید

#معرفی #Loading

لینک گروه ：
https://t.me/joinchat/AAAAAEGmHfikBfgSlaOKxA
لینک کانال ：
https://telegram.me/vue_js

سری فیلم اموزشی vue 2 که توسط دوست عزیزمون @Developeer از youtube دانلود و اپلود شده برای دوستانی که مشکل دانلود از youtube رو دارند .
حدود ۴۰ قسمت تا حالا اماده شده که در صورت اومدن قسمت های جدید اون ها هم اضافه میشه .
به تمام ریز و درشت vue پرداخته و در قسمت های اخری کار با router رو شروع کرده ...

#یادگیری

لینک دانلود ：
Ioteam.ir:8080

لینک اصلی یوتوب ：
https://www.youtube.com/watch?v=5LYrN_cAJoA&list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa


لینک گروه ：
https://t.me/joinchat/AAAAAEGmHfikBfgSlaOKxA
لینک کانال ：
https://telegram.me/vue_js

چند روز پیش نظرسنجی گذاشتیم تا ببینیم دوستان چه ادیتور یا IDE رو برای برنامه نویسی vue استفاده میکنن که دو ادیتور VsCode و WebStorm(phpstorm) بیشترین رای رو اوردن . حالا سعی داریم به مرور پلاگین هایی رو معرفی کنیم تا کد زدن با این ادیتور ها برای ما راحت تر بشه .
1 – webstorm or phpstorm :
خب چون این نرم افزار ها IDE هستن امکانات زیادی رو با خودشون دارن و ی جورایی نیاز نیست شما اصلا چیزی نصب کنید و اگه از ورژن های اخر اون ها استفاده میکنید خودشون به صورت پیسش فرض از vue پشتیبانی میکنن اما اگه از ورژن های خیلی قدیمی استفاده میکنید این پلاگین ها به شما کمک میکنه :
https://plugins.jetbrains.com/plugin/9442-vue-js
https://plugins.jetbrains.com/plugin/8057-vue-js

2- VsCode Editor :
ادیتوری که خودم استفاده میکنم سبک و با امکانات . اگر توی مخزن پلاگین های این ادیتور سرچ کرده باشید میبینید تعداد زیاد پلاگین واسه vue وجود داره :

https://marketplace.visualstudio.com/search?term=vue&target=VSCode&category=All%20categories&sortBy=Relevance

اما خوب نیازنیست تمام اون ها رو نصب کنید پلاگین Vetur به نظرم بهتر و تکی کلی کار براتون انجام میده که حتما توضیحات نصبش رو بخونید چون یک سری پیشنیاز داره ...

همچنین واسه weex هم پلاگینی وجود داره ! weex همون پروژه ساخت اپ موبایل با vue هست .

یک پلاگین دیگه هم هست به نام vuejs extension pack که اومده پلاگین های خوب رو یک جا جمع کرده و کار آسون کرده که همون vetur هم جزو هست :
https://marketplace.visualstudio.com/items?itemName=mubaidr.vuejs-extension-pack

توی روزای آینده واسه بقیه ادیتور ها رو هم معرفی میکنیم . اگه شما از ادیتور هایی که معرفی نشدن استفاده میکنن و پلاگین های خوب اون ادیتور رو میشناسید به من بگید تا بهتر معرفی انجام بشه چون خیلی با اون ها کار نمیکنم . ممنون

#Editor #ide #plugin

لینک گروه ：
https://t.me/joinchat/AAAAAEGmHfikBfgSlaOKxA
لینک کانال ：
https://telegram.me/vue_js

خب cheat sheet ها همونطور که از اسمشون مشخص هست به شما یک دسترسی سریع میدن هرجا گیر کردین ی تقلب کوچک بکنید و کارتون رو حل کنید . توی برنامه نویسی هم cheat sheet های مخصوص خودشو داره که الان cheat sheet vue 2.3 بهتون میخوایم مرفی کنیم .
یک نسخه سایت داره که کامل تره و هر دستور با کلیک کردن یک توضیحی میده و یک نسخه افلاین که به صورت pdf هست .
میتونید چاپ کنید و بزنید به دیوار محل کارتون یا شرکتتون و ازش استفاده کنید .
واسه یادگیری هم خوب چون شاید با خیلی هاش آشنا نباشید !
نسخه سایت :
https://vuejs-tips.github.io/cheatsheet/
نسخه pdf :
https://vuejs-tips.github.io/cheatsheet/vuejs-cheatsheet.pdf


لینک گروه ：
https://t.me/joinchat/AAAAAEGmHfikBfgSlaOKxA
لینک کانال ：
https://telegram.me/vue_js

گزارش State of Vue.js نتیجه یکی از جامع ترین و به روز ترین نظرسنجی ها از توسعه دهنده ها و بیزینس های موفقی هست که از این فریم ورک استفاده می‌کنند.
#چرا_vue

در لینک زیر میتونید خلاصه ای از این گزارش رو مطالعه کنید. که قطعا کمک خوبی برای تصمیم گیری در مورد انتخاب و جلب توجه بقیه هم تیمی هاتون برای این انتخاب میکنه:

https://www.monterail.com/blog/state-of-vuejs-report-summary

#چرا_vue

لینک گروه vue.js ：
https://t.me/joinchat/AAAAAEGmHfikBfgSlaOKxA
لینک کانال vue.js ：
https://telegram.me/vue_js