آموزش (Vue.js و Declarative Rendering) قسمت دوم

یه نکته رو بگم که من نمیخوام اینجا همه چیز رو ترجمه کنم (بعضی کلمات و اصطلاحات معنای معادل و مناسبی در فارسی ندارند). سعی میکنم مفهوم رو برسونم. در صورتی که نتونستم اینکار رو بکنم، لطفا در قسمت نظرات سوالتون رو بپرسید.

لینک قسمت اول

اگر دوست دارین همراه با آموزش کد هم بزنید و بیشتر یاد بگیرید، میتونین از لینک زیر استفاده کنین.

لینک codepen

خوب میخوام بیشتر در مورد رندر(Render) کردن و یا نمایش اطلاعات در صفحه مون صحبت کنم.

دو قسمت کد پایین رو ببینین :

یک نکته ی جالب در این کد هست. ببینید که از message به جای this.data.message استفاده کردم.(چرا؟)

برای اینکه vue ، یک ارتباط داخلی (binding) بین template و vue intstance (شی که از vue ایجاد کردم) ایجاد میکنه و اجازه میده که template مون از مقادیر (property) به صورت local استفاده کنه.

در یک (SFC) یا single file component :

نمونه یک فایل با پسوند vue یا single file component

من در این فایل در قسمت export default از regular function یا همون فانکشن معمولی استفاده کردم. به این دلیل که در قسمت data مون ممکنه که به یک متد (method) از component instance (همین فایلی که داریم کار می کنیم) نیاز پیدا کنیم، و در صورتی که this به کامپوننت مون اشاره نکنه نمیتونیم از متد های این کامپوننت استفاده کنیم. ( برای اطلاعات بیشتر و درک بهتر این قسمت میتونین در مورد arrow function ها و مفهوم this مطالعه کنین.)

البته میتونین از arrow function استفاده کنین و هر وقت که نیاز داشتین به متد یا property داخل کامپوننت دسترسی داشته باشین، arrow function رو به regular function تغییر بدین. (پیشنهاد می کنم راه مطمئن تر رو انتخاب کنید.)

خب برگردیم سراغ {{message}}. در vue روش های بیشتری برای وارد کردن اطلاعات به صفحه تون دارین، مثلا میتونین از javascript expression ها استفاده کنید.