آموزش (Vue.js و Declarative Rendering)

معرفی Vue.js
vue.js (بخونید ویو مثل view) یک فریمورک جاوا اسکریپتی هستش که به ما کمک می کنه رابط کاربری App ها مون رو بسازیم. با کمک کتاب خونه های (library) فراوان و ابزارهای جدید با vue می تونید به راحتی App های Spa خیلی پیشرفته طراحی کنید.

اگر شما برنامه نویس هستید (مثلا: فرانت اند) و میخواهید vue رو با فریمورک های دیگه مقایسه کنید، می تونید از این لینک استفاده کنید

پیش نیاز برای اینکه راحت با vue کار کنیم :

درک متوسط از HTML, CSS و JAVASCRIPT

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

https://codepen.io/hamideslami32/pen/LYYbYvQ

و یا اینکه می تونید یک فایل index.html درست کنید و vue رو به سادگی با تگ script به فایل تون اضافه کنید.

* توی مقاله های بعدی در مورد نحوه نصب vue-cli و nuxt به صورت کامل توضیح میدم. پیشنهاد می کنم کسانی که تجربه ی استفاده از vue رو ندارن با vue-cli و nuxt شروع نکنند. (کسانی که با ابزار های build بر پایه Node.js آشنا نیستند)

Declarative Rendering

یک الگو در vue داریم به اسم Declarative Rendering. (که معنی فارسی مناسبی برای این کلمه پیدا نکردم. پیشنهاد بدین)

در برنامه نویسی، مفهومی داریم به اسم Declarative Programming که یک الگوی برنامه نویسی است - یک سبک ساختن ساختار و عناصر برنامه - که منطق محاسبات رو بدون توصیف نحوه انجام گرفتن آن بیان می کند.

کد زیر رو ببینید :

سینتکس ی که vue برای وارد کردن string به template مون ارائه کرده : {{}} یا double curly brace هستش.

در مثال بالا هر مقداری رو که با javascript برای name و title قرار داده باشیم، به جای name و title در متن کد مون قرار می گیرند. به این روش ارائه کردن داده یا data ، توی بیشتر زبان های برنامه نویسی string interpolation گفته میشه.

معنای کلمه به کلمه Declarative Rendering میشه ارائه اعلانی [ ( : ] که در واقع نوعی string interpolation هستش.

فریمورک vue به ما این امکان رو میده تا داده رو declaratively داخل DOM توسط {{}} ، Render (ارائه) کنیم.

مثال :

Index.html