کداکسپلور | CodeExplore
7.87K subscribers
1.91K photos
279 videos
103 files
1.62K links
با کد اکسپلور یاد بگیر، لذت ببر و بروز باش ⚡️😉

سایت کد‌اکسپلور:
CodeExplore.ir
👨🏻‍💻 ارتباط با ما :
@CodeExploreSup
گروه :
@CodeExplore_Gap
تبلیغات در کد اکسپلور :
@CodeExploreAds
Download Telegram
✌️ویوو جی اس چیست؟!🤨

🔹ویو جی‌اس (انگلیسی: Vue.js‎)(معمولاً ویو نام برده می‌شود، تلفظ شبیه view) یک چارچوب متن باز جاوااسکریپت است که برای نوشتن و آماده‌سازی رابط کاربری از آن بهره برده می‌شود. از آنجا که در طراحی ویو اصل همخوانی با کتابخانه‌های جاوااسکریپت در نظر گرفته شده‌است، استفاده از آن برای توسعه دهندگان وب راحت است.😎

🔹در حال حاظر ویو جی اس بیتشرین تعداد ستاره در گیت هاب را بین سایر چارچوب های جاوا اسکریپت دارد که این نشان دهنده محبوبیت بالای این چارچوب می باشد. این اتفاق برای ویو جی اس یک اتفاق بزرگ می باشد زیرا رقبای اون توسط شرکت های بزرگی نظیر گوگل و فیسبوک پشتیبانی می شوند💪😉

#vue_js
☕️ @CodeExplore
143🔥1
دوستان بیاید نگاهی بندازیم به ویژگی های vue3.4😎🔥

#vue_js
☕️ @CodeExplore
🔥12❤‍🔥43
دوستان شما با استفاده از لیست زیر می تونین به سوالات مصاحبه جاوااسکریپت و فریم ورک هاش می تونین دسترسی داشته باشید

JavaScript 👉
🌐 https://github.com/sudheerj/javascript-interview-questions

Vue 👉
🌐 https://github.com/sudheerj/vuejs-interview-questions

React 👉
🌐 https://github.com/sudheerj/reactjs-interview-questions

Angular 👉
🌐 https://github.com/sudheerj/angular-interview-questions

🔥🔥🔥🔥🔥🔥🔥🔥

البته دوستان می دونیم که ریکت فریم ورک نیست و کتابخونه هست ، ولی کلیت رو در نظر گرفتم و گفتم فریم ورک :)

#javascript #react #angular #vue #library #framework
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
11🔥4❤‍🔥1
تو این پست یک مقایسه کامل از زبان‌های قالبی استفاده شده توسط React، Vue، Angular و Svelte رو داریم🤩

+ این تجزیه و تحلیل جالب قطعاً شما رو شگفت زده می‌کنه. (این پست رو از دست ندید)😎

🔵 🟠 🌲 🏤  Comparing JavaScript Frameworks: Templates

#react #angular #vue #svelte
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
12🔥5❤‍🔥3
🌲 دوستان Vue کار حتما کامپوننت های تایپ شده Vue رو یک نگاه بندازید🔥

از ویژگی هاش چندتا براتون مثال میزنم :

1️⃣پشتیبانی از حالت تاریک
2️⃣میانبرهای صفحه کلید
3️⃣آیکون ها

🌐 https://github.com/ManukMinasyan/stellar-ui

#vue #components #github
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
11🔥4❤‍🔥2
🌲ویو جی اس( Vue.js ) چیست؟

💎ویو جی اس ( Vue.js ) یک فریمورک جاوا اسکریپت برای ساخت رابط کاربری است. این فریمورک بر پایه HTML، CSS و جاوا اسکریپت ساخته شده و یک مدل برنامه نویسی مبتنی بر کامپوننت و اعلانی را فراهم می کند که به شما کمک می کند تا به طور کارآمد رابط کاربری هر پیچیدگی را توسعه دهید. ویژگی های کلیدی Vue.js عبارتند از:

🟢سادگی: شما می توانید برنامه Vue خود را در 5-6 خط کد بنویسید.
🟢معماری مبتنی بر کامپوننت: Vue.js یک معماری مبتنی بر کامپوننت را دنبال می کند.
🟢قابلیت استفاده مجدد: رویکرد مبتنی بر کامپوننت Vue امکان ایجاد کامپوننت های قابل استفاده مجدد را فراهم می کند.
🟢سرعت بالا: وبسایت های نوشته شده با Vue سرعت بالایی را دارا هستند.
🟢امکانات گسترده: Vue.js امکانات بسیاری را در اختیار توسعه دهنده قرار میدهد، از جمله ساخت کامپوننت ها، پلاگین ها، هلپر ها، ساخت وبسایت های SPA ، دسترسی کامل به route ها و رندرهای مربوطه و...

#vue
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥197❤‍🔥5
🔥اقا خیلی پیش اومده که میگن ترکیب Vue.js با Laravel یه ترکیب خفن میشه و حتما اینارو باهم استفاده کنین، ولی خب دلیلش چیه؟

🟢 راحتی در ترکیب:
‏ - Laravel و Vue.js خیلی راحت با هم کار می‌کنن. Laravel Mix که خودش با Laravel میاد، باعث می‌شه مدیریت و ترکیب کدهای فرانت‌اند و بک‌اند خیلی ساده باشه.

🟢.ساختار مرتب و قابل توسعه:
‏ - Laravel برای بخش سرور و مدیریت داده‌ها خیلی خوبه و کدها رو مرتب نگه می‌داره. Vue.js هم برای ساختن رابط کاربری خیلی عالیه و اجازه می‌ده تا بخش‌های مختلف رابط کاربری رو به قسمت‌های کوچیک تقسیم کنیم که نگهداریش راحت‌تر باشه.

🟢 عملکرد بالا:
‏ - Laravel توی انجام کارهای سنگین سمت سرور خیلی خوب عمل می‌کنه و Vue.js هم رابط کاربری رو سریع و روان می‌کنه. پس وقتی این دوتا رو با هم ترکیب می‌کنی، پروژه‌ات خیلی سریع و کارآمد می‌شه.

چون عکس گذاشتم براش نمیشه زیاد کپشن نوشت پس این پایین براتون بقیشو میزارم👇👇
#vue #laravel
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥123❤‍🔥1
🟢 یادگیری آسون:
- یاد گرفتن Laravel و Vue.js نسبتاً راحت و سریع‌ـه چون مستندات خوبی دارن. این باعث می‌شه که حتی برنامه‌نویس‌های تازه‌کار هم زود بتونن با این دو کار کنن.

🟢 جامعه فعال و پشتیبانی قوی:
- هر دو فریمورک کلی برنامه‌نویس و طرفدار دارن که یعنی همیشه کلی مطلب آموزشی، جواب سوال و راه‌حل برای مشکلاتت پیدا می‌کنی.

🟢رندر سمت سرور (SSR):
- اگه بخوای صفحات وب رو بهینه‌تر کنی تا سریع‌تر لود بشن و برای موتورهای جستجو هم بهتر باشه، ترکیب Laravel و Vue.js خیلی خوب جواب می‌ده. ابزارهایی مثل Nuxt.js که روی Vue.js ساخته شدن، به راحتی با Laravel جور می‌شن.

🟢 پشتیبانی از برنامه‌های تک‌صفحه‌ای (SPA):
- Vue.js برای ساختن برنامه‌های تک‌صفحه‌ای خیلی خوبه و Laravel هم ابزارهای لازم برای ساختن API رو داره که این دوتا با هم یه ترکیب عالی می‌سازن.

به طور کلی، ترکیب Laravel و Vue.js به برنامه‌نویس‌ها این امکان رو می‌ده که یه پروژه قوی، سریع و مقیاس‌پذیر درست کنن و از بهترین ویژگی‌های هر دو فریمورک استفاده کنن

#vue #laravel
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14❤‍🔥32
👑تا حالا اسم Vuetify رو شنیدی؟؟

⚡️‏Vuetify یه کتابخونه رابط کاربری برای Vue.js هست که کمک می‌کنه تا به راحتی و سریع، صفحات وب خوشگل و مدرن بسازیم. این کتابخونه از طراحی متریال گوگل استفاده می‌کنه که باعث میشه همه چیز خیلی مرتب و حرفه‌ای به نظر بیاد.

◀️ویژگی‌ها

🟢طراحی متریال:
بر اساس اصول طراحی گوگل، ظاهری مدرن و شیک داره.

🟢کامپوننت‌های آماده:
بیشتر از 80 تا کامپوننت آماده داره که می‌تونیم تو پروژه‌ها استفاده کنیم؛ مثل دکمه‌ها، فرم‌ها و کارت‌ها.

🟢واکنش‌گرا:
طراحی‌هاش به خوبی توی دستگاه‌های مختلف مثل موبایل و دسکتاپ نشون داده میشه.

🟢پشتیبانی از تم‌ها:
می‌تونیم تم‌های خودمون رو بسازیم و رنگ‌ها و فونت‌ها رو تغییر بدیم.

🟢مستندات جامع:
راهنمای کامل و آموزشی داره که کار باهاش رو خیلی راحت می‌کنه.

🟢ادغام با ابزارهای دیگه:
به خوبی با ابزارهای دیگه مثل Vue Router و Vuex کار می‌کنه.

#vuetify #vue
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥134🔥1💔1
💎امروز میخام باهم بررسی کنیم که Vuelidate چیه؟؟

⭐️‏Vuelidate یه کتابخونه اعتبارسنجی برای Vue.js هست که به برنامه‌نویس‌ها کمک می‌کنه راحت‌تر و بهتر فرم‌ها رو اعتبارسنجی کنن. این کتابخونه بر اساس ایده‌های اعتبارسنجی پویا ساخته شده و از قابلیت‌های Vue.js به خوبی استفاده می‌کنه. حالا یه توضیح ساده درباره ویژگی‌ها و کاربردهای Vuelidate:

ویژگی‌های Vuelidate
پویا بودن: اعتبارسنجی‌ها خودشون با تغییرات داده‌ها به‌روز می‌شن.
ترکیب‌پذیری: می‌تونی اعتبارسنجی‌های مختلف رو با هم ترکیب کنی و اعتبارسنجی‌های پیچیده‌تر بسازی.
سادگی استفاده: اضافه کردن اعتبارسنجی‌ها به فرم‌ها و داده‌های Vue.js خیلی آسونه.
همکاری با Vuex: راحت می‌تونی Vuelidate رو با Vuex ترکیب کنی و مدیریت اعتبارسنجی‌ها رو در سطح برنامه انجام بدی.

یه مثال کوچیک هم از کاربردش همین پایین براتون میزارم که ببینین چقدر قشنگ میتونین ولیدیشن های مختلفی باهاش انجام بدین و خودتونو از هزارتا شرط خلاص کنین👇👇👇


#vuelidate #validation #vue
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤‍🔥22
ادامه پست بالا👆👆
این کد برای ولیدیشن کردن یه اینپوت پسورده که البته یکی از راه های ولیدیشن کردن با Vuelidate هستش و کلی راه دیگه هم داره
<template>
<div>
<form @submit.prevent="submitForm">
<div>
<label for="password">Password</label>
<input id="password" v-model="form.password" type="password"/>
<span v-if="!$v.form.password.$pending && !$v.form.password.required">Password is required</span>
<span v-if="!$v.form.password.$pending && !$v.form.password.minLength">Password must be at least 6 characters long</span>
</div>
<button type="submit">Submit</button>
</form>
</div>
</template>

<script setup>
import { reactive } from 'vue'
import useVuelidate from '@vuelidate/core'
import { required, minLength } from '@vuelidate/validators'

const form = reactive({
password: ''
})

const rules = {
form: {
password: { required, minLength: minLength(6) }
}
}

const v$ = useVuelidate(rules, form)

const submitForm = () => {
v$.value.$touch()
if (!v$.value.$invalid) {
// فرم معتبر است، عملیات ارسال را اینجا انجام دهید
console.log('Form submitted', form)
}
}
</script>


#vuelidate #validation #vue
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
7🔥4❤‍🔥2
🌲ویو کارای عزیز
یه سایت خفن براتون اوردم که کلی کامپوننت های عالی برای استفاده داره و مبتی بر معیار ant design هستش و میتونین خیلی خوب و خفن ازش استفاده کنین و حالشو ببرین:

🌕https://antdv.com/components/overview

#site #vue
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
11🔥2❤‍🔥1
🌲عزیزای Vue.js کار گل من، بیاین که براتون سایت زیر رو اوردم که باهاش به راحتی Marquee Slider بسازین و حالشو ببرین، دیزاینش خیلی خوشگله و اصن حال میکنین سایتشو نگا کنین:

🌕https://vue-marquee.com/

#site #vue
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥114❤‍🔥1
👑یه منبع خوب با کلی ویدیو و مقاله خفن برای یادگیری Vue.js آوردم براتون که ادعا میکنه خیلی یوزر فرندلی هستش، هستش؟؟

🌲https://learnvue.co/

#vue #site
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥97❤‍🔥3