فرم ها (Forms)
فرم (Form) یعنی جعبه ورودی ها. با Vue، فرم ها راحت تر و جذاب تر می شوند. چون با «مدل دوطرفه (Two-way Binding)» و دستور v-model ورودی و داده همیشه هماهنگ می مانند.
فرم ساده HTML
اول فرم خام را بساز. سپس Vue را اضافه کن.
<form>
<p>Add item<\/p>
<p>Item name: <input type="text" required><\/p>
<p>How many: <input type="number"><\/p>
<button type="submit">Add item<\/button>
<\/form>
اتصال ورودی ها با v-model
v-model یعنی اتصال دوطرفه. تغییر ورودی، داده را عوض می کند؛ برعکس هم درست است.
<div id="app">
<form>
<p>Add item<\/p>
<p>Item name: <input type="text" required v-model="itemName"><\/p>
<p>How many: <input type="number" v-model="itemNumber"><\/p>
<button type="submit">Add item<\/button>
<\/form>
<\/div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
<script>
const app = Vue.createApp({
data() {
return {
itemName: null,
itemNumber: null,
shoppingList: [
{ name: 'Tomatoes', number: 5 }
]
};
}
});
app.mount('#app');
<\/script>
جلوگیری از رفرش با submit.prevent
فرم ها معمولا صفحه را رفرش می کنند. با .prevent جلوی رفرش را بگیر.
<form v-on:submit.prevent="addItem"><\/form>
نوشتن متد افزودن آیتم
یک متد ساده بنویس. شیء بساز. در لیست قرار بده. فرم را پاک کن.
methods: {
addItem() {
const item = {
name: this.itemName,
number: this.itemNumber
};
this.shoppingList.push(item);
this.itemName = null;
this.itemNumber = null;
}
}
نمایش لیست با v-for
لیست خرید را خودکار رندر کن. هر تغییر، فوری دیده می شود.
<p>Shopping list:<\/p>
<ul>
<li v-for="item in shoppingList">{{ item.name }}, {{ item.number }}<\/li>
<\/ul>
نمونه کامل
این فرم، آیتم ها را اضافه می کند و لیست را نشان می دهد.
<div id="app">
<form v-on:submit.prevent="addItem">
<p>Add item<\/p>
<p>Item name: <input type="text" required v-model="itemName"><\/p>
<p>How many: <input type="number" v-model="itemNumber"><\/p>
<button type="submit">Add item<\/button>
<\/form>
<p>Shopping list:<\/p>
<ul>
<li v-for="item in shoppingList">{{ item.name }}, {{ item.number }}<\/li>
<\/ul>
<\/div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
<script>
const app = Vue.createApp({
data() {
return {
itemName: null,
itemNumber: null,
shoppingList: [
{ name: 'Tomatoes', number: 5 }
]
};
},
methods: {
addItem() {
const item = {
name: this.itemName,
number: this.itemNumber
};
this.shoppingList.push(item);
this.itemName = null;
this.itemNumber = null;
}
}
});
app.mount('#app');
<\/script>
گام های عملی
- فرم خام را بساز و ورودی ها را بچین.
v-modelرا روی همه ورودی ها بگذار.submit.preventرا اضافه کن و متد را بنویس.
جمع بندی سریع
v-modelاتصال دوطرفه می دهد.submit.preventرفرش را می گیرد.v-forلیست را زنده نشان می دهد.- متد تمیز، فرم تمیز می سازد.
ادامه مسیر: صفحه v-model و تغییردهنده های رویداد را ببین. عبارت «فرم های Vue» را در یک پروژه تمرینی استفاده کن.