سلام دوستان! این پست درباره دستور v-model توی ویوو هست. این دستور برای کار با ورودی‌ها استفاده میشه و با اون کارهایی مثل خوندن مقدار ورودی‌ها و یا مقدار دادن به اونها به راحت‌ترین شکل ممکن صورت می‌گیره. اما بذارید قبلش با یک تکنیک آشنا بشیم.

توی الگوی MVVM یک تکنیک داریم به اسم Data Binding دو طرفه که یکی از ستون‌های اصلی این الگو هست. این تکنیک یعنی:

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

قبلا اگه از جاوااسکریپت خام یا کتابخونه‌های مختلف مثل جی‌کوئری استفاده می‌کردیم، وقتی اطلاعات تغییر می‌کردن و می‌خواستیم اطلاعات صفحه رو بروزرسانی کنیم باید بصورت دستی این کار رو انجام می‌دادیم. یعنی المنت توی صفحه رو باید انتخاب می‌کردیم و بعد محتویات اون رو تغییر می‌دادیم. همچنین برای ویرایش کردن اطلاعات برنامه، باید یک رویداد ضمیمه می‌کردیم تا یک تابعی اجرا بشه که توی اون بتونیم اطلاعات برنامه رو ویرایش کنیم.

توی Vue دیگه این کار رو انجام نمی‌دیم و با Data-Binding اطلاعات بصورت خودکار تغییر می‌کنن. برای درک بهتر الگوی MVVM رو بخونین.

 

دستور v-model

توی فریم‌ورک ویوو، با دستور v-model می‌تونیم به راحت‌ترین شکل این تکنیک رو پیاده‌سازی کنیم. دستور v-model روی اجزای فرم مثل input، textarea و select قرار می‌گیره:

<input v-model="message">

<select v-model="status">
   <!-- options -->
</select>

<textarea v-model="biography"></textarea>

همونطور که می‌بینیم دستور v-model روی اجزای فرم قرار گرفته که مقدار اونها، اسم یک عضو توی قسمت data هست. مثال زیر رو ببینید:

توی کد بالا یک دستور v-model رو یک <input> قرار گرفته که مقدار اون اسم یک عضوی هست که توی قسمت data وجود داره. (تب JS رو ببینید). این یعنی بین این <input> و عضو data یک اتصال دو طرفه وجود داره و وقتی مقدار هر کدوم تغییر کنن، اون یکی هم مقدارش تغییر می‌کنه. توی تب Result سعی کنین مقدار <input> رو تغییر بدین.

 

دستور v-model روی <textarea>

استفاده از این دستور روی تگ textarea مثل تگ input مثال بالا هست:

<textarea v-model="message"></textarea>

اگه message رو بصورت زیر بنویسیم، دیگه Data binding دو طرفه نخواهد بود:

<textarea>{{ message }}</textarea>

 

دستور v-model روی checkbox

دستور v-model با وقتی روی یک ورودی checkbox قرار بگیره، این checkbox انتخاب میشه. همچنین با همین checkbox میشه مقدار false یا true بودن یک عضو data رو کنترل کرد:

همونطور که می بینیم مقدار checked بصورت پیشفرض true یا false هست. اما می‌تونیم کاری کنیم که مقدار checked چیزی غیر از true/false در نظر گرفته بشه که اون استفاده از دستورات true-value و false-value هست:

 

 

دستور v-model روی radio

توی کد زیر وقتی یک radio انتخاب میشه، مقدار v-model یعنی status برابر با مقدار value این ورودی میشه:

 

دستور v-model روی <select>

فرض کنیم دستور v-model با مقدار x روی تگ select قرار گرفته. توی چنین شرایطی <option> ـی انتخاب میشه که value اون برابر با مقدار v-model باشه:

و برای <select> های چند انتخابی، مقدار v-model باید یک آرایه توی data باشه. و وقتی هر <option> ـی که انتخاب میشه مقدار اون توی این آرایه قرار می‌گیره:

 

دستور v-model.lazy

همونطور که توی اولین مثال این پست دیدیم، مقدار message بلافاصله بعد از تغییر دادن ورودی، تغییر می‌کنه و نمایش داده میشه. به بیان فنی‌تر، وقتی هر رویدادی مثل keyup ،keydown، keypress و ... روی این ورودی اعمال میشه، مقدار message بروزرسانی میشه. می‌تونیم یه کاری کنیم که مقدار message فقط زمانی بروزرسانی بشه که رویداد change اتفاق میوفته که اون استفاده دستور v-model.lazy هست. توی کد زیر بعد از تایپ کردن داخل ورودی، بیرون ورودی رو کلیک کنین:

 

دستور v-model.trim

با این دستور بصورت خودکار، فاصله‌های اضافی از آخر ورودی‌ها حذف میشن:

 

خب دوستان این همه‌ی چیزی بود که می‌تونستیم از v-model بدونیم. منتظر قسمت‌های بعدی باشین 😉 ✌️