v-model در Vue.js چیست؟ راهنمای کامل Two-Way Binding

سیستم Two-Way Binding در Vue با v-model

سیستم Two-way binding در Vue یکی از چالش‌برانگیزترین بخش‌های توسعه‌ی اپلیکیشن‌های وب، یعنی همگام‌سازی ورودی کاربر (User Input Synchronization) را بسیار ساده می‌کند. این کار با استفاده از دستور v-model انجام می‌شود.

دستور v-model:

  • هر زمان مدل داده (data model) تغییر کند، Template را به‌روزرسانی می‌کند

  • و هر زمان Template تغییر کند، داده‌ها را آپدیت می‌کند

Two-way binding یک قابلیت قدرتمند است که اگر درست استفاده شود، می‌تواند سرعت توسعه‌ی شما را به‌طور قابل‌توجهی افزایش دهد و پیچیدگی هماهنگ نگه داشتن داده‌ها و ورودی کاربر را کاهش دهد.

در Vue، این قابلیت با استفاده از دستور v-model پیاده‌سازی می‌شود.

اتصال v-model به ورودی‌های متنی (Text Input)

برای اتصال مقدار یک input به یکی از propertyهای داده‌ی کامپوننت، کافی است از v-model="dataProperty" استفاده کنید.

متد data در کامپوننت:

data() {
return {
existentialQuestion: 'Am I truly an alligator?'
};
}

Template:

<h2>My deepest, darkest question: {{ existentialQuestion }}</h2>
<input v-model="existentialQuestion"/>

نتیجه:

  • مقدار input در ابتدا برابر است با Am I truly an alligator?

  • با تغییر مقدار input، مقدار existentialQuestion و محتوای <h2> به‌صورت real-time تغییر می‌کند

اتصال v-model به Checkbox و Radio Button

Checkbox و Radio Button تقریباً مانند inputهای متنی کار می‌کنند، با این تفاوت‌ها:

  • Checkbox تکی → مقدار true یا false

  • Radio Button → مقدار مشخص‌شده در attribute value

  • چند Checkbox → می‌توانند به یک آرایه متصل شوند

مثال Checkbox تکی (Single Checkbox)

داده‌های کامپوننت:

data() {
return {
statementIsTrue: true
};
}

Template:

<p>You have decided this statement is {{ statementIsTrue }}</p>

<label>
<input type=“checkbox” v-model=“statementIsTrue”/>
Is this statement true?
</label>

با تغییر وضعیت checkbox، مقدار statementIsTrue فوراً به‌روزرسانی می‌شود.

مثال چند Checkbox (Multiple Checkboxes)

داده‌های کامپوننت:

data() {
return {
namesThatRhyme: []
};
}

Template:

<p>A list of names that rhyme: {{ namesThatRhyme.join(', ') }}</p>

<label>
<input type=“checkbox” value=“Daniel” v-model=“namesThatRhyme”/>
Daniel
</label>

<label>
<input type=“checkbox” value=“Nathaniel” v-model=“namesThatRhyme”/>
Nathaniel
</label>

<label>
<input type=“checkbox” value=“Hubert” v-model=“namesThatRhyme”/>
Hubert
</label>

 هر checkbox که تیک بخورد، مقدار value آن به آرایه اضافه می‌شود.

مثال Radio Button

داده‌های کامپوننت:

data() {
return {
howAreYouFeeling: "great"
};
}

Template:

<p>How are you feeling today?</p>

<label>
<input type=“radio” value=“great” v-model=“howAreYouFeeling” />
great
</label>

<label>
<input type=“radio” value=“wonderful” v-model=“howAreYouFeeling” />
wonderful
</label>

<label>
<input type=“radio” value=“fantastic” v-model=“howAreYouFeeling” />
fantastic
</label>

<p>I am also feeling <em>{{ howAreYouFeeling }}</em> today.</p>

مقدار متغیر howAreYouFeeling برابر با مقدار value گزینه‌ی انتخاب‌شده خواهد بود.

نکات مهم درباره v-model

1️⃣ v-model.lazy

به‌صورت پیش‌فرض، v-model با هر رویداد input (مثل تایپ یا paste) اجرا می‌شود.
اگر بخواهید فقط پس از خارج شدن فوکوس از input اجرا شود، از modifier زیر استفاده کنید:

<input v-model.lazy="dataProperty" />

2️⃣ v-model.number

برای تبدیل ورودی کاربر از string به number:

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

تبدیل به انواع دیگر باید به‌صورت دستی انجام شود.

3️⃣ v-model.trim

برای حذف فاصله‌های ابتدا و انتهای رشته:

<input v-model.trim="username" />

این modifier را نمی‌توان همراه با v-model.number استفاده کرد.

4️⃣ پشت‌صحنه v-model

عبارت زیر:

<input v-model="dataProperty" />

در واقع معادل است با:

<input
:value="dataProperty"
@input="dataProperty = $event.target.value"
/>

به همین دلیل، می‌توانید v-model را برای کامپوننت‌های سفارشی خودتان هم پیاده‌سازی کنید.

جمع‌بندی (Conclusion)

دستور v-model یکی از مهم‌ترین و کاربردی‌ترین قابلیت‌های Vue است که:

  • پیاده‌سازی Two-way binding را بسیار ساده می‌کند

  • کد را تمیزتر و خواناتر می‌سازد

  • سرعت توسعه را به‌شکل محسوسی افزایش می‌دهد

اگر با فرم‌ها و ورودی کاربر در Vue کار می‌کنید، تسلط بر v-model ضروری است.

از همراهی شما با پارمین کلود متشکریم.

Click to rate this post!
[Total: 0 Average: 0]
avatar

نویسنده :

کیانا
مقالات نویسنده

مطالب مرتبط :

نظرات کاربران

دیدگاهی بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

حالت تمام صفحه

دسته بندی :

برنامه نویسی،برنامه نویسی

نوشته شده در :

۱۴ بهمن ۱۴۰۴

بروزرسانی شده در :

14 بهمن 1404

بازدید ها :

بازدید

جدید ترین نوشته ها :

متد split() در جاوااسکریپت

چگونه با Array.find در JS عنصر دلخواه را پیدا کنیم؟

چگونه احراز هویت را در یک اپلیکیشن Nuxt.js پیاده‌سازی کنیم؟

ساخت ربات دیسکورد با پایتون و استقرار روی سرور اوبونتو 20.04

آموزش کامل راه‌اندازی Nginx داخل LXD Container روی Ubuntu 18.04

آموزش نصب Apache Kafka روی Ubuntu 20.04