شروعی بر vue.js

شروعی بر vue.js

امروز راجب vue صحبت میکنیم , کتابخانه ی جاوا اسکریپتی که شاید توی مرحله ی اول کمی شبیه انگولار به نظر برسه البته انگولار1 . ولی خب به نظر میرسه یادگیریش خیلی ساده تره. از طرفی شاید نیاز به این کتابخانه وقتی بیشتر احساس میشه که انگولار 2 اومده و تفاوت های محسوسی داشته و دیگه خیلی نمیشه روی انگولار 1 حساب کرد یا اصلا این ها هیچ , بلد بودن یه کتابخانه ی  فرز و سریع مثل vue خیلی میتونه ادمو کمک کنه. این کتابخانه در عین سادگی بسیار کارآمده. Vue با الگو ی MVVM کار میکنه.

برای شروع ابتدا vue رو از طریق CDN  به پروژه ی خودمون اضافه میکنیم:

خب برای شروع باید یک model-view  بسازیم . در واقع کاری که model-view  میکنه از اسمش پیداست , اطلاعات رو از مدل میگیره و به view میفرسته . model-view در واقع یک کلاسvue  هستش که ما اونو می سازیم.
ابتدا یه تگ دیو می سازیم:

سپس داخل کد اسکریپتمون مثلا یک شی می سازیم به شکل:

حالا می خوایم اطلاعات داخل شی خودمون رو توی اون دیوی که ساختیم نمایش بدیم برای این کار:

و فقط برای نمایش اطلاعات داخل view خودمون یه چیز دیگه هم باید اضافه کنیم:

خب همونطور که دیدین خیلی سادس و البته خیلی شبیه انگولار .

شما هر تغییری که توی اطلاعات بدین , بصورت  بلادرنگ اطلاعات توی view  هم تغییر پیدا می کنن.

two-way binding

حالا توی ادامه همین مطلب two-way binding رو برسی میکنیم ,  اینجا ما می خوایم اطلاعات رو از یه input  بگیریم و زنده اونارو نمایش بدیم برای این کار فقط کافیه view خودمون رو به این صورت تغییر میدیم :

همونطور که احتملا متوجه شدید این کار توسط v-model که داخل تگ input نوشتیم انجام شده که اسمش هم طبیعتا باید چیزی که میخوایم چاپ کنیم یعنی name باید یکی باشه . به این ترتیب شما هرچی که داخل input بنویسین زنده توی view چاپ میشه.

فیلتر ها

فیلتر ها ی vue دقیقا شبیه به انگولار هستند از فیلتر ها توی view استفاده میکنیم ؛ برای این که قبل از چاپ شدن اطلاعات تغییراتی روشون انجام بدیم . مثال :

که قبل از چاپ اسم اونو به حروف بزرگ تبدیل میکنه.

شما میتونید فیلتر ها ی خودتون رو هم بسازید .

کار با آرایه ها

برای کار کردن با ارایه ها از v-for  استفاده میکنیم برای چاپ کردن اطلاعات داخل یک object-array یا اصن آرایه (فرقی نمیکنه که کدوم باشه) اگه اطلاعاتمون به این شکل باشه:

برای چاپ کردن اطلاعات داخل view :

که در واقع فقط اسم هارو چاپ میکنه.

خب حالا اگر بخوایم ترتیب چاپ رو تغییر بدیم میتونیم از فیلتر filterBy استفاده کنیم مثلا کد زیر فقط اسم هایی رو چاپ میکنه که حرف  a توشون موجود باشه:

با استفاده از این فیلتر و two-way binding خیلی راحت میتونیم بصورت زنده توی اطلاعاتمون جستجو کنیم .

کار با event  ها

برای کار  با event  ها توی vue  باید از method  استفاده کنیم برای مثال این قسمت از view رو در نظر بگیرین :

ما به دکمه میگیم وقتی که روش کلیک شد (v-on:click) متد myClickHandler  رو برامون اجرا کنه در واقع تقریبا شبیه خود جاوا اسکریپت ولی اینجا توی ویو نوع event رو مشخص میکنیم خب حالا ببینم متد مون چه شکلیه:

همونطور که میبینید این متد تابعی  رو اجرا میکنه که اون متنی رو alert  میکنه اون متن هم از input که توی view نوشته بودیم گرفته میشه. Thisهم اشاره به همین شی که داخل هستیم می کنه.

امید وارم این مطلب توی معرفی vue شمارو کمک کرده باشه برای اطلاعات بیشتر میتونید یه سری به داکیومنتشن vue بزنید.