سایت هایی وجود دارند که تمام مطالب مرتبط با 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

نسخه کامل ۸۰ صفحه ای State of Vue.js

ممنون از پویا پارسا عزیز برای اطلاع رسانی

#چرا_vue


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

خب یکی از چیز هایی که معمولا توی مقایسه vue و react گفته میشه و react حرفی واسه گفتن داره ساخت app های موبایل هست که react native یکی از بهترین ها تو این زمینه هست اما نگران نباشید واسه vue هم چنین فریم ورک هایی هست شاید به اون قدرت نه ولی دارن رشد میکنن و نیاز های شما رو ی جورایی ۱۰۰% حل میکنن . الان قصد داریم فریم ورک هایی که واسه vue وجود دارند رو به شما معرفی کنیم ：


مورد اول weex : خب اگه قرار باشه چیزی react native رو بگیره باید منتظر رشد همین بمونیم
https://weex.apache.org

مورد دوم quasar ：یک فریم فروک خوب که فقط واسه vue هست داکیومنت خوبی هم به نظر داره
http://quasar-framework.org

مورد سوم native script : توی توضیحاتی که در سایتشون دادن با vue هم کار میتونید بکنید این فریم ورک هم جا افتاده هست
https://nativescript.org

مورد چهارم framework7 ：
یک فریم ورک خوب و کامل دیگه
که خروجی های خوبی میده روی انیمیشن ها بیشتر همه وقت گذاشتن مثل این که...پس میشه تجربه شبیه به native داشته باشه...
https://framework7.io

مورد پنجم onsen ：این فریم ورک با بقیه فریم ورک ها دیگه مثل react angulsr و ... هم کار میکنه که از vue هم پشتیبانی میکنه
https://onsen.io/vue/

موارد دیگه ای هم هستند ولی بیشتر ui هستند ولی اگر موردی جا افتاده بگید تا به لیست اضافه کنیم.

#vue_mobile_framework #app #mobile



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

خب امروز قصد معرفی یک پلاگین خوب و باحال برای vue رو داریم
معمولا از این فریم ورک ها واسه ساخت وب اپلیکیشن ها استفاده میشه پس واقعا بییاین و یک اپلیکیشن تحویل بدیم ! پلاگینی که میخوایم معرفی کنیم کارش به این صورت هست که شما میتونید واسه فعالیت هاتون کلید میانبر (short key) تعریف کنید به فرض شما توی داشبورد یک قسمت دارین به نام افزودن مطلب ، به وسیله این پلاگین میتونید یک کد میانبر یا کوتاه به فرض ctrl +n تعریف کنید که تا کاربر زد بره و صفحه افزودن مطلب باز کنه .... یا هر اتفاق دیگه که خودتون مدنظر دارین .
واسه وب اپلیکیشن ها قابلیت خیلی خوبی هست و توی سرعت کار افراد حرفه که با اپ ما کار میکنن میتونه خیلی تاثیر گذار باشه .
امیدوارم به دردتون خورده باشه ：)

لینک گیتهاب پروژه ：
https://github.com/iFgR/vue-shortkey

#short_key #plugin #components

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

اگه توی پروژه هاتون به پنل مدیریت یا داشبورد واسه کاربران نیاز دارید میتونید از پروژه های زیر استفاده کنید :

1-Vue Light Bootstrap Dashboard
پیشنمایش :
http://vuejs.creative-tim.com/vue-light-bootstrap-dashboard/#/
داکیومنت :
http://vuejs.creative-tim.com/vue-light-bootstrap-dashboard/documentation/#/
لینک پروژه :
https://github.com/cristijora/vue-light-bootstrap-dashboard
—------------------------------------------------------------

2-Vue Paper Dashboard
پیشنمایش :
http://vuejs.creative-tim.com/vue-paper-dashboard/#/admin/overview
داکیومنت :
http://vuejs.creative-tim.com/vue-paper-dashboard-docs/#/
لینک پروژه :
https://github.com/cristijora/vue-paper-dashboard
—---------------------------------------------------------—
این پست به زودی تکمیل میشه .....


#admin_template #dashboard #admin #قالب_مدیریت


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

🎄 قابلیت های جدید افزونه Vue Devtools 4.0

این یکی از بزرگ ترین آپدیت های این افزونه هست. اگر تا به حال از اون استفاده نکردید، این ابزار به شما کمک می‌کنه که در زمان توسعه وب اپلیکیشن خودتون رو داخل مرورگر راحت تر دیباگ کنید، دیتای کامپوننت هارو inspect کنید و تغییرات و وضعیت vuex رو به راحتی مشاهده کنید.

✅ قابلیت تغییر دیتای کامپوننت ها در زمان اجرا
✅ قابلیت ویرایش سریع که به شما اجازه تغییر ساده تر دیتا رو میده
✅ قابلیت باز کردن سورس کد به طور خودکار در ادیتور (*)
✅ قابلیت سوییچ کردن بین اسم اصلی کامپوننت یا اسمی که با اون رجیستر شده
✅ قابلیت انتخاب هر کامپوننت با منوی راست کلیک
✅ فیلتر های قوی تر برای کامپوننت و vuex
✅ و ...

* این قابلیت به طور خودکار با Nuxt.js سازگار هست. برای تمپلیت های وب پک نیاز به یکسری کانفیگ ساده هست)

👈 برای مطالعه توضیحات کامل این نسخه:

https://medium.com/the-vue-point/whats-new-in-vue-devtools-4-0-9361e75e05d0

👈 دریافت آخرین نسخه افزونه برای کروم :

https://chrome.google.com/webstore/detail/nhdogjmejiglipccpnnnanhbledajbpd

👈 دریافت آخرین نسخه افزونه برای فایرفاکس:

https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools

#Devtools
با تشکر از پویا پارسا

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

خب شاید بخواین توی پروژه هاتون با کلیک روی یک لینک برید به یک قسمت دیگه در همون صفحه ، با دستورات html میشه اما برای انیمشن ها مجبورید از js استفاده کنید که jquery این کار خیلی آسون کرده بود ! اما جالب نیست واسه این کار jquery به پروژه خودمون استفاده کنیم !
دایرکتیو زیر این کارو خیلی آسون براتون انجام میده و تنظیمات خوبی هم داره :
https://rigor789.github.io/vue-scrollto/#/


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

یک سری کامپوننت lightbox برای vue

1- https://github.com/littlewin-wang/vue-images
2- https://github.com/silencesys/silentbox
3- https://github.com/pexea12/vue-image-lightbox
4- https://github.com/vrajroham/vue-simple-lightbox

#lightbox #component

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

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

و راستی تولد یک سالگی گروه
و کانال vue هم هست ❤️
پارسال همین موقع ها بود که راه اندازی شد
و یک سال که درکنار هم هستیم و خوشحالم که روز به روز تعداد دوستان بیشتر میشه و خانواده vue فارسی بزرگتر میشه
ممنون از همه دوستان که فعالیت دارن و علم شون رو با بقیه در اشتراک میزارن