خانه (HOME)
اینجا نقطه شروع آموزش Vue است. Vue یک «فریم ورک (Framework)» یعنی جعبه ابزار برای ساخت رابط کاربری است. داده عوض شود، صفحه خودش به روز می شود. مثل بازی که امتیازت بالا می رود و نمایشگر فوری تغییر می کند.
شروع سریع با Vue
یک پیام ساده را روی صفحه نشان می دهیم. مثل نوشتن اسم خودت روی تخته. مرورگر اسکریپت را می خواند و Vue روی عنصر مشخص سوار می شود.
<div id="app">{{ message }}</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
};
}
});
app.mount('#app');
<\/script>
نکته: اگر کد اجرا نشد، آدرس اسکریپت را درست بنویس. سپس صفحه را رفرش کن.
پیش نیازها
قبل از Vue، با «HTML»، «CSS»، و «جاوااسکریپت (JavaScript)» آشنا باش. مثل یادگیری الفبا پیش از انشا. لازم نیست استاد باشی؛ مقدمات کافی است.
تاریخچه کوتاه Vue
ایوان یو در 2013 کار را شروع کرد. نسخه 1 در 2015 منتشر شد. هدف، سادگی و سرعت در ساخت رابط بود. مثل تبدیل کاردستی سخت به لگوهای ساده.
تمرین و ارزیابی
مثال های آنلاین را ویرایش کن و نتیجه را ببین. سپس با کوییز سنجش انجام بده. این کار مثل آزمون کوتاه کلاس است.
همه مثال های Vue را ببین و تمرین کن.
مسیر ادامه یادگیری
برای قدم بعد، از آموزش Vue (مقدمه) شروع کن. سپس سراغ دایرکتیوها و فرم ها برو. قدم ها را آرام و پیوسته بردار.
گام های عملی
- یک فایل HTML بساز و تگ
<div id="app">بگذار. - اسکریپت Vue 3 را با CDN در صفحه اضافه کن.
- با
createAppبرنامه را بساز و mount کن. - متغیرها را در
data()برگردان و نمایش بده. - پیام را عوض کن و به روزرسانی خودکار را ببین.
جمع بندی سریع
- Vue رابط ها را ساده و سریع می سازد.
- داده عوض شود، نمایش به روز می شود.
- با HTML، CSS، JS مقدماتی شروع کن.
- یک نمونه Hello World بساز و تست کن.
- گام به گام جلو برو و تمرین کن.
راهنمای رسمی Vue را برای جزئیات بیشتر ببین.
مرجع JS در MDN برای تقویت پایه ها عالی است.