v-on (v-on)
«v-on» برای مدیریت رویداد (Event) است. رویداد یعنی اتفاقی مثل کلیک یا تایپ. با v-on می گوییم: کدام رویداد و بعد چه کاری انجام شود.
شروع سریع با رویداد v-on
مثال لامپ: با کلیک، وضعیت روشن/خاموش عوض می شود. «بولی (Boolean)» یعنی فقط درست یا نادرست.
<div id="app">
<div id="lightDiv">
<div v-show="lightOn"></div>
<img src="img_lightBulb.svg">
</div>
<button v-on:click="lightOn = !lightOn">Switch light</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
lightOn: false
};
}
});
app.mount('#app');
<\/script>
نکته: با تغییر lightOn، نمایش لامپ فوراً عوض می شود. این رفتار واکنشی است.
رویداد oninput با v-on
هر بار تایپ، شمارنده زیاد می شود. «ورودی (Input)» یعنی داده واردشده توسط کاربر.
<div id="app">
<input v-on:input="inpCount++">
<p>{{ 'Input events occured: ' + inpCount }}</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
inpCount: 0
};
}
});
app.mount('#app');
<\/script>
رویداد mousemove با v-on
با جابه جایی ماوس روی جعبه، رنگ پس زمینه تغییر می کند. «استایل (Style)» یعنی ظاهر عناصر.
<div id="app">
<p>Move the mouse pointer over the box below</p>
<div v-on:mousemove="colorVal = Math.floor(Math.random() * 360)"
v-bind:style="{ backgroundColor: 'hsl(' + colorVal + ',80%,80%)' }">
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
colorVal: 50
};
}
});
app.mount('#app');
<\/script>
استفاده از v-on داخل v-for
روی هر مورد کلیک کن و تصویر متناسب را ببین. «حلقه (Loop)» یعنی تکرار روی آرایه.
<div id="app">
<img v-bind:src="imgUrl">
<ol>
<li v-for="food in manyFoods" v-on:click="imgUrl = food.url">
{{ food.name }}
</li>
</ol>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
imgUrl: 'img_salad.svg',
manyFoods: [
{ name: 'Burrito', url: 'img_burrito.svg' },
{ name: 'Salad', url: 'img_salad.svg' },
{ name: 'Cake', url: 'img_cake.svg' },
{ name: 'Soup', url: 'img_soup.svg' }
]
};
}
});
app.mount('#app');
<\/script>
میان بُر v-on با @
می توانیم به جای v-on از «@» استفاده کنیم. این میان بُر کوتاه تر است.
<button @:click="lightOn = !lightOn">Switch light</button>
گام های عملی
- رویداد مناسب را انتخاب کن؛ مثلاً
clickیاinput. - روی عنصر بنویس
v-on:eventو کد واکنش را بده. - داده را در
dataنگه دار و نتیجه را نمایش بده.
جمع بندی سریع
v-onرویداد را می گیرد و کد را اجرا می کند.- روی ورودی ها، ماوس و کلیک کار می کند.
- داخل
v-forهم به خوبی جواب می دهد. - میان بُر
@نوشتن را سریع تر می کند.
برای ادامه مسیر: صفحه رویدادها در Vue و سپس متدها را ببین.