بخش مقالات آکادمی | Articles
آخرین آموزش ها

ویو جی اس (Vuejs) یکی از کتابخانه های جاوا اسکریپت است که به ما در ساختن اپلیکیشن های تحت وب تحت معماری MVVM یا همان (Model–view–viewmodel)  کمک می کند .  در نگاه اول ممکن است فکر کنید vue.js  بسیار ساده تر از angular.js  است اما زمانی که شروع به فعالیت با آن می کنید متوجه می شوید که هرگز آسان نیست اما واقعا قدرتمند تر از انگولار و قابل انعطاف تر است .  در این مقاله ما با مفاهیم اولیه ویوجی اس آشنا خواهیم شد .

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

===========================

  •  افزودن Vue.js  به صفحه وب خود !

برای این کار شما می توانید این فریمورک را از Github آن از لینک رو به رو دریافت کنید : دریافت vue.js  از gitHub

راه دیگری نیز وجود دارد آن هم این است که از CDN  استفاده کنید ، ما هم پیشنهاد می کنیم از CDN  بهره مند شوید زیرا سرعت لود بهتر و سریع تر خواهد بود و در کل قابل اعتماد تر است . جهت دریافت Vue.js  از CDNJS  باید کد زیر را در بخش head  صفحه خود قرار دهید :

  • ایجاد یک View-Model :

در vue.js  برای ایجاد View-Model  ها باید از  Vue Class  یا کلاس های Vue  استفاده نماییم . اگر برای شما سوال ایجاد شده که View-Model  ها چه هستند ؟ باید بگوییم : یک شی است که کار شما را برای نمایش اطلاعات یک Model در View  بسیار آسان می کند . یا بهتر بگوییم شما می توانید هر عنصر UI  که با HTML  پیاده سازی کرده اید را یک View  بنامید  و هر شی literal را یک مدل (Model) .   برای درک بهتر این مسئله بهتر است شروع به کد نویسی کنیم 🙂

برای اینکار یک View  ایجاد می کنیم . جهت ساخت View  یک Div  ایجاد کرده سپس یک آیدی به آن نسبت دهید . کد زیر بیانگر این موضوع است :


حالا نوبت به ساخت یک شی literal  یا همان model  ما رسیده است . کد زیر را در تگ <script>  که مربوطه به کد های جاوا اسکریپت است قرار داده و یا در فایل جاوا اسکریپت جدا گانه نوشته و آن را در صفحه خود import  کنید .


هم اکنون شما یک مدل و یک ویو دارید ، زمان آن رسیده تا با دستور زیر آن رو را با هم مرتبط کنید و به عبارتی یک View-Model  یا همان Vue  بسازید .


همانطور که می بینید در کد فوق مشخصه el  به  View  شما اشاره می کند که حالا هر عنصری از عناصر HTML  شما که به آن ID  داده اید می تواند باشد و همچنین مشخصه Data  به مدلی که قبلا ساخته اید اشاره دارد .

شما رشته age  را داخل تگ Div  که همان View  ما هست به شکل زیر اضافه کنید  .در قطعه کد زیر از هر دو مشخصه Model  که در بالا ایجاد کردیم استفاده می کند . و آن ها را نمایش می دهد .


شما هر تغییری در مقادیر مدل ایجاد کنید می توانید به شکل فوق از آن استفاده کنید . به همین راحتی 🙂

  •  ایجاد یک ارتباط دو طرفه

در روش قبلی ، ما تنها قادر به ارتباط یک طرفه و یا اتصال یک طرفه (one-way binding)  بودیم بدین معنا که تنها تغییراتی که در بخش مدل داده میشد در view  قابل مشاهده بود و امکان تغییر اطلاعات Model توسط View  وجود نداشت . اگر تمایل دارید کاری کنید تا View  شما قادر باشد Model  را تغییر دهد با از two-way binding  یا اتصال دو طرفه استفاده نمایید برای این کار باز از V-Model  استفاده کنیم .  برای این کار ما باید Div  قبلی خود را به چند input  مجهز کنیم تا v-model  بتواند به خصوصیت Name  آن اشاره کند .


هم اکنون شما با تغییر مقدار input  مقدار داخل Model  را نیز می توانید تغییر دهید .  از Vue.js  خوشتون نیومده هنوز ؟ من که خیلی حال می کنم باهاش 🙂

نتیجه مثال فوق را می توانید به صورت انلاین در لینک رو به رو تست کنید و مقادیر را تغییر داده و نتیجه را مشاهده کنید  : اجرای انلاین کد 

  • استفاده از Filter :

یک فیلتر یک فانکشن است که با علامت Pipe  نمایش داده می شود . به عنوان مثال شما در نمونه کد زیر می توانید با افزودن فیلتر مربوطه مشخصه name  را با حروف بزرگ نمایش دهید .


جهت درک بهتر روی لینک رو به رو کلیک کنید :  اجرای انلاین کد 

  • استفاده از آرایه ها

اگر مدل شما یک آرایه است باید از v-repeat استفاده نمایید . جهت این کار مدلی به شکل زیر طراحی کنید :


حالا باید Div  یا همان View  مربوطه را به شکل زیر تغییر دهیم :


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

خوب دوستان من ، امروز با هم تونستیم در این مقاله کمی با مفاهیم اولیه فریمورک vuejs  آشنا بشیم . این فریمورک احتیاج به آموزش های بیشتری دارد و تنها در این مقاله قصد داشتیم به مفاهیم خیلی اولیه اون بپردازیم ، بزودی زود شاید چند روز دیگر ، دوره ویدئویی آموزش فریمورک Vue.js  به زبان فارسی را در سایت لرن فایلز بخش فیلم اموزشی قرار خواهیم داد . می توانید ادامه مفاهیم را آنجا پیگیری کنید . اگر هم تمایل دارید تا آن روز  یادگیری را ادامه دهید توصیه می کنیم دوره آموزش jquery  ، دوره آموزش ajax  ،  دوره آموزش node.js  را یادگرفته تا با فریمورک های دیگر جاوا اسکریپت آشنا شوید .

اگر به Vuejs علاقه مند شدید میتوانید این آموزش رو از اینجا دنبال کنید .

تاریخ ارسال
22 فروردین 1395
ارسال شده توسط
بشیر صالحی
میزان بازدید
1,475 نفر بازدیدکننده
0 دیدگاه
فایلی جهت دانلود وجود ندارد !
مشخصات
نویسنده : بشیر صالحی
حجم و فرمت :

0 دیدگاه ثبت شده

شما هم نظری بدهید
هنوز دیدگاهی ثبت نشده
توجه فرمایید:
نظرات شما پس از بررسی و تایید نمایش داده می شود.
لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنید.