سلام دوستان عزیز
از اونجایی توی این مدتی که با vue.js کار کردم گروه یا کانال مرتبط با vue.js ندیدم یا پیدا نکردم تصمیم گرفتم یک گروه برای گفتگو ، سوالات ، مشکلات و در کنارش یک کانال هم برای معرفی منابع یا نکات اموزشی خوب و .... درست کنم و با هم یک جامعه کاربری برای این فریم ورک خوب درست کنیم
لینک گروه ：
https://t.me/joinchat/AAAAAEGmHfj2ZXQr4gENVw

لینک کانال ：
https://telegram.me/vue_js

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

اولین چیزی که شاید بپرسید اصلا 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