معرفی (Intro)
این بخش برای معرفی Vue است. Vue یک «فریم ورک (Framework)» یعنی جعبه ابزار ساخت رابط کاربری است. فایل جاوااسکریپت دارد و با تگ <script> به صفحه اضافه می شود. سپس داده به HTML «وصل (Bind)» می شود و همه چیز خودکار به روز می ماند؛ مثل scoreboard داخل بازی.
Vue یک فریم ورک جاوااسکریپتی است
Vue روی مرورگر اجرا می شود. سبک و ساده است. شبیه React و Angular است؛ اما شروعش راحت تر است. برای شروع، فایل Vue را با تگ اسکریپت اضافه کن.
<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
اولین صفحه Vue در 5 گام
الان یک نمونه ساده می سازیم. پیام «Hello World!» را نمایش می دهیم. مثل نوشتن خوش آمد روی تابلو کلاس.
- یک فایل HTML ساده بساز.
- داخل
<body>یک<div id="app">بگذار. - فایل Vue 3 را با CDN اضافه کن.
- یک «نمونه Vue (Vue Instance)» بساز.
- نمونه را به
#appمتصل کن.
<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>
درون گذاری متن (Text Interpolation)
«درون گذاری (Interpolation)» یعنی نوشتن داده Vue داخل HTML با {{ }}. مثل جای خالی که با مقدار پر می شود.
<div id="app">
{{ message }}<br>
{{ 'Random number: ' + Math.ceil(Math.random() * 6) }}
</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>
Options API و Composition API
کد Vue را می توان با «Options API» یا «Composition API» نوشت. هر دو یک مفهوم دارند. این آموزش با Options API جلو می رود؛ چون برای شروع خواناتر است. در پایان می توانی سراغ Composition هم بروی.
چرا Vue را یاد بگیریم؟
- ساده و سریع برای شروع پروژه ها.
- مناسب برای کارهای ساده و پیچیده.
- اجتماع متن باز فعال و محبوبیت رو به افزایش.
- وصل کردن داده و قالب با زحمت کمتر.
- روند توسعه کارآمد با الگوی قالب و داده دوجهته.
مسیر ادامه یادگیری
پس از معرفی Vue مستقیم به دایرکتیوها برو. بعداً تفاوت ها را در Composition API ببین.
جمع بندی سریع
- Vue با یک فایل اسکریپت شروع می شود.
- {{ }} داده را در HTML نشان می دهد.
- Options API برای مبتدی ها مناسب تر است.
- نمونه Hello World را اجرا کن.
- بعد سراغ دایرکتیوها برو.
راهنمای رسمی Vue را ببین.
مرجع جاوااسکریپت در MDN پایه ها را محکم می کند.