مثال ها (Examples)
در این صفحه «مثال های Vue» را می بینی. «مثال (Example)» یعنی نمونه کوچک برای تمرین. سپس با تغییرات ریز، همان ایده را گسترش می دهیم. مثل تمرین های حل شدنی ریاضی در مدرسه.
شروع سریع با مثال ها
هر مثال یک ایده ساده را نشان می دهد. سپس می توانی در «مشاهده در ادیتور» اجرا کنی و تغییر بدهی.
مثال 1: Hello World (سلام دنیا)
«متن جایگذاری (Interpolation)» یعنی گذاشتن مقدار متغیر داخل متن. مثل نوشتن اسم خودت وسط جمله.
<div id="app">
<p>{{ message }}</p>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp({
data() {
return {
message: 'Hello World!'
};
}
}).mount('#app');
<\/script>
مثال 2: v-bind برای وصل کردن کلاس
«v-bind» اتصال پویا به ویژگی هاست. مثل تغییر رنگ لباس بر اساس حال.
<div id="app">
<div :class="{ active: isActive }">Box</div>
<button @click="toggle()">Toggle</button>
</div>
<style>
.active { background: #def; }
<\/style>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp({
data() {
return {
isActive: true
};
},
methods: {
toggle() {
this.isActive = !this.isActive;
}
}
}).mount('#app');
<\/script>
مثال 3: v-on برای رویداد کلیک
«رویداد (Event)» یعنی اتفاقی مثل کلیک. با v-on کلیک را می گیریم و شمارنده بیشتر می شود.
<div id="app">
<p>Count: {{ count }}</p>
<button @click="inc()">Add</button>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp({
data() {
return {
count: 0
};
},
methods: {
inc() {
this.count += 1;
}
}
}).mount('#app');
<\/script>
گام های پیشنهادی تمرین
- یکی از لینک های Try را باز کن.
- کد را کمی تغییر بده و ذخیره کن.
- نتیجه را ببین و دلیلش را حدس بزن.
- تغییر بعدی را امتحان کن و یادداشت بردار.
پیوندهای مفید
فهرست کامل نمونه ها: Vue Examples. مقدمه کوتاه: Vue Basics Explained.
برای ادامه مطالعه در سایت: صفحه مثال های Vue، آموزش v-bind و رویدادها در v-on.
جمع بندی سریع
- با مثال ساده شروع کن.
- کم کم تغییر بده و تست کن.
- v-bind اتصال پویاست.
- v-on رویدادها را مدیریت می کند.
- همیشه در ادیتور اجرا کن.