سلام دوستان! این پست درباره دستور 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 مثال بالا هست: