جلسه نهم: ارسال اطلاعات به فرم‌ها توسط فریم ورک قدرتمند جاوا اسکریپت Vue.js

09 آذر 1395
9-vuejsmain

در جلسه گذشته (هشتم) به بررسی دقیق رویدادها و چگونگی کنترل آنها پرداختیم و در انتها روش انتقال رویدادها با استفاده از صفحه کلید را مورد بررسی قرار دادیم. حال در این جلسه قصد داریم به شما عزیزان آموزش دقیق و پایه‌ی ارتباط بین فرم‌های ورودی و ارسال-اتصال داده‌ها، ارائه دهیم. با ما همراه باشید.

کاربرد عمومی

شما با استفاده از دستور v-model می‌توانید به ایجاد دو راه ارتباطی ارسال داده در بستر المان‌های input و حتی textarea بپردازید. دستور v-model به صورت خودکار، صحیح‌ترین راه را برای بروزرسانی المان‌ها بر اساس نوع آنها، انتخاب می‌کند. توجه داشته باشید که دستور v-model تحت هیچ شرایطی به مقادیر اولیه ورودی‌ها و یا textarea ها توجه نمی‌کند. بلکه با نمونه‌ی داده‌ای Vue همواره به صورت یک شیء برخورد می‌کند.

متن (Text)

نمایش یک متن ورودی توسط دستور v-model را با استفاده از یک مثال شرح می‌دهیم.

<input v-model="message" placeholder="edit me">
<p> Message is: {{ message }} </p>

جهت نمایش خروجی کد بالا روی اینجا کلیک کنید.

متن چندخطی (Multiline Text)

<span>Multitine message is:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines">

جهت نمایش خروجی کد بالا روی اینجا کلیک کنید.

چک باکس‌ (Checkbox)

برای نمایش یک چک باکس تنها که دارای عبارت درست و نادرست است می‌توان از دستور زیر استفاده کرد:

<input type="checkbox" id="checkbox" v-model="checkbox">
<lable for="checkbox">{{ checked }}</lable>

جهت نمایش خروجی کد بالا روی اینجا کلیک کنید.

برای نمایش چندین چک باکس در کنار یکدیگر می‌توان از محدوده‌ی آرایه‌های مشابه استفاده کرد:

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike"" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>


new Vue({
	el: '...',
	data: {
		checkedNames: []
	}
})

جهت نمایش خروجی کد بالا روی اینجا کلیک کنید.

دکمه‌های رادیویی (Radio Button)

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

جهت نمایش خروجی کد بالا روی اینجا کلیک کنید.

انتخابی (Select)

انتخاب تکی از لیست، برای دقیق تر شدن روی این نوع در فرم‌ها به مثال زیر توجه کنید:

<select v-model="selected">
	<option>A</option>
	<option>B</option>
	<option>C</option>
</select>
<span>Selected: {{ selected }} </span>

جهت نمایش خروجی کد بالا روی اینجا کلیک کنید.

انتخاب چندگانه محدود به آرایه (Multiple Select)

<select v-model="selected" multiple>
	<option>A</option>
	<option>B</option>
	<option>C</option>
</select>
<span>Selected: {{ selected }} </span>

جهت نمایش خروجی کد بالا روی اینجا کلیک کنید.

همچنین می‌توان گزینه‌های پویا برای رندر کردن قرار داد که با استفاده از v-for امکان پذیر خواهد بود. مثال زیر را با هم بررسی می‌کنیم:

<select v-model="selected">
	<option v-for="option in options" v-bind:value="option.value">
		{{ option.text }}
	</option>
</select>
<span>Selected: {{ selected }} </span>

new Vue({
	el: "...",
	data:{
		selected: 'A',
		options: [
			{ text: 'One', value: 'A' },
			{ text: 'Two', value: 'B' },
			{ text: 'Three', value: 'C' }
		]
	}
})

جهت نمایش خروجی کد بالا روی اینجا کلیک کنید.

اتصال داده‌ها

برای دکمه‌های رادیویی، چک باکس‌ها و گزینه‌های انتخابی، مقدار ارسالی v-model همواره یک رشته ثابت است (یا یک مقدار بولین - Boolean). به مثال زیر توجه کنید:

// "picked" is a string "a" when checked
<input type="radio" v-model="picked" value="a">

// "toggle" is either true or false
<input type="checkbox" v-model="toggle">

// "selected" is a string "abc" when selected
<select v-model="selected">
	<option value="abc">ABC</option>
</select>

برخی مواقع نیاز داریم یک مقدار خاص را به یک ویژگی پویا اتصال بدهیم. در این حالت می‌توان از دستور v-bind درون المان‌ها استفاده کرد. به‌علاوه دستور v-bind به شما اجازه می‌دهد که مقدار ورودی را به یک مقدار غیررشته‌ای الحاق کنید.

v-bind در چک باکس

کد زیر نمونه‌ای از ارائه دستور v-bind درون حالت ورودی checkbox است:

<input
	type="checkbox"
	v-model="toggle"
	v-bind:true-value="a"
	v-bind:false-value="b"
>

//هنگام تیک خوردن
vm.toggle === vm.a

//هنگام تیک نخوردن
vm.toggle === vm.b

v-bind در دکمه‌های رادیویی

<input type="radio" v-model="pick" v-bind:value="a">

//هنگام تیک خوردن
vm.pick === vm.a

v-bind در گزینه‌های انتخابی

<select v-model="selected">
	<option v-bind:value="{ number: 123 }">123</option>
</select>

// هنگام انتخاب کردن یک آیتم
typeof vm.selected // -> 'object'
vm.select.number // -> 123

مودیفایرها

مودیفایر lazy: به صورت پیش‌فرض، v-model داده‌های ورودی و داد‌ه‌هایی که پس از هر رویداد ورودی ایجاد می‌شوند را همگام‌سازی یا sync می‌کند. شما می‌توانید مودیفایر lazy را به جای همگام‌سازی در v-model اضافه کنید. تا پس از هر رویداد change، مودیفایر lazy اعمال شود. به مثال زیر توجه کنید:

<input v-model.lazy="message">

مودیفایر number: اگر شما می‌خواهید یک کاربر داده‌ی عددی را وارد کند می‌توانید از مودیفایر number را اعمال کنید:

<input v-model.number="age" type="number">

مودیفایر trim: اگر شما نیاز دارید که اطلاعات وارد شده توسط کاربر به صورت خودکار اصلاح شود، می‌توانید از مودیفایر trim استفاده کنید:

<input v-model.trim="message">

جامع ترین دوره آموزشی Vue.js 2.0 در ایران را می توانید از طریق اینجا مشاهده کنید.

آموزش ویدیویی Vuejs فارسی

نویسنده شوید

دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.