آموزش Vue.js

دسته بندی: آموزش طراحی وب

ویو جی‌اس

آنچه در این صفحه می خوانید:

معرفی Vue.JS

Vue.jsیک فریمورک اوپن سورس جاوااسکریپت در توسعه وب برای ساخت رابط های کاربری و برنامه های تک صفحه ای است. برخلاف سایر فریمورک های یکپارچه، Vue از پایه طراحی شده تا از نظر تدریجی قابل قبول باشد. کتابخانه اصلی فقط روی لایه نمایش متمرکز شده است و به راحتی می توان آن را با سایر کتابخانه ها یا پروژه های موجود جمع کرد. از طرف دیگر Vue همچنین قادر است در هنگام استفاده از کتابخانه های نوین و پشتیبانی از کتابخانه ها، از برنامه های تک صفحه ای پیشرفته استفاده کند. اگر می خواهید در مورد Vue اطلاعات بیشتری کسب کنید، به این ویدیو که با استفاده از اصول اصلی و یک پروژه نمونه ایجاد شده است توجه کنید.

ویژگی های Vue.JS

اندازه بسیار کوچک

موفقیت فریمورک JavaScript به اندازه آن بستگی دارد. هرچه اندازه کوچکتر باشد، کاربرد آن نیز بیشتر می شود. یکی از بزرگترین مزیت های Vue.js اندازه کوچک آن است. اندازه این فریمورک 18 تا 21 کیلوبایت است و برای بارگیری و استفاده کاربربه زمان زیادی نیاز ندارد. این بدان معنی نیست که به دلیل کوچک بودن سرعت آن کم است، درعوض، همه فریمورک های بزرگ مانند React.js ،Angular.js و Ember.js را پشت سر می گذارد.

درک و توسعه برنامه های کاربردی آسان

یکی از دلایل محبوبیت این فریمورک این است که درک آن بسیار آسان است. کاربر به دلیل ساختار ساده خود می تواند به راحتی Vue.js را به پروژه وب خود اضافه کند. هر دو قالب مقیاس کوچک و همچنین بزرگ می توانند از طریق این فریمورک توسعه داده شوند که باعث صرفه جویی در وقت زیادی می شود. در صورت بروز هر گونه مشکل، کاربر می تواند به راحتی خطاهای موجود را با خطا ردیابی کند. همه این ها به دلیل ساختار ساده آن است.

ادغام ساده

Vue.js همچنین در بین توسعه دهندگان وب محبوب است زیرا این برنامه آنها را قادر می سازد تا با برنامه های موجود ادغام شوند. این امر به این دلیل است که براساس فریمورک JavaScript ساخته شده است و می تواند در سایر برنامه های ساخته شده در JavaScript یکپارچه شود. این بدان معنی است که برای توسعه برنامه های وب جدید و همچنین تغییر برنامه های موجود، مفید است. این ادغام ممکن است زیرا Vue.js برای همه چیز مؤلفه هایی دارد.

مستندات تفصیلی

توسعه دهندگان همیشه دوست دارند از فریمورک با اسناد دقیق استفاده کنند زیرا نوشتن اولین برنامه برای آنها همیشه آسان است. مستندات مربوط به Vue.js چنان جامع است که هر کاربر که اطلاعات کمی در مورد جاوااسکریپت و HTML دارد می تواند برنامه یا صفحه وب خود را توسعه دهد.

انعطاف پذیری

انعطاف پذیری زیاد، مزیت دیگر Vue.js این امکان را به کاربر می دهد تا با استفاده از گره های مجازی، الگوی خود را در پرونده HTML، پرونده JavaScript و فایل جاوااسکریپت خالص بنویسد. این انعطاف پذیری همچنین درک آن را برای توسعه دهندگان React.js ،Angular.js و هر فریمورک جدید JavaScript آسان می کند. Vue.js در توسعه برنامه های ساده ای که مستقیماً از مرورگرها اجرا می شوند، بسیار مفید است.

ارتباط دو طرفه

Vue.js همچنین ارتباطات دو طرفه را به دلیل معماری MVVM که باعث می شود کار با بلوک های HTML بسیار آسان شود را تسهیل می کند. از این نظر، بسیار نزدیک به Angular.js است که همچنین باعث سرعت بخشیدن به بلوک های HTML می شود. می توان گفت که Vue.js نسبت به همه فریمورک های قبلی مانند Angular.js و React.js مزایای روشنی دارد. به طور خلاصه، این ویژگی های عجیب و غریب همه فریمورک های قدیمی تر را ترکیب می کند.

از دیگر ویژگی ها می توان به موارد زیر اشاره نمود:

  • استفاده از DOM مجازی
  • اتصال داده
  • کامپوننت ها برای ایجاد عناصر سفارشی
  • مدیریت رویداد
  • انجام محاسبات بر اساس تغییرات بدون کدنویسی
  • دارای دستورالعمل های v-if، v-else، v-show، v-on، v-bind، v-model
  • اعمال Watchers به داده های در حال تغییر
  • انجام ناوبری بین صفحات با کمک vue-router
  • دارای اسکریپت Lightweight
  • نصب آن در خط فرمان با استفاده از رابط خط فرمان vue-cli

چرا باید از Vue.JS استفاده کنیم؟

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

یک کتابخانه مؤلفه ای مبتنی بر HTML ،CSS و JS کار را برای شروع کار ساده می کند. اولین کاری که باید انجام دهید تنظیم محیط توسعه شماست. Vue.js با شروع بسیار آسان است و به ابزاری برای ساخت مانند Webpack احتیاج ندارد.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

ویژگی های اساسی مانند مسیریابی و مدیریت داده ها توسط کتابخانه های رسمی تحت پوشش قرار می گیرد. Vue.js شامل ماژول اصلی است که به شما امکان ساخت کامپوننت را می دهد، اما همچنین شامل مجموعه ای از کتابخانه های معتبر ساخته شده توسط تیم Vue.js مانند خود vue-router برای بخش مسیریابی، Vuex برای مدیریت داده های شما، vue-cli برای راه اندازی یک پروژه جدید می باشد.

برنامه های وب در Vue با استفاده از کامپوننت ساخته می شوند. در حالی که انعطاف پذیری و انطباق پذیری زیادی را براساس نیاز پروژه به شما اختصاص داده است، اجزای پوشه Vue کاملاً با هم جفت شده اند، که باعث بهبود استفاده مجدد از کد و کاهش زمان توسعه می شود. معماری مبتنی بر کامپوننت برای ساختن برنامه ها با هدف مقیاس گذاری در آینده ایده آل است. در Vue، ساخت برنامه های در مقیاس بزرگ نیاز به استفاده از یک سیستم ساخت مدولار از get-go دارد. اما Vue در اینجا انعطاف پذیری زیادی را ایجاد می کند زیرا واسطه هایی که توسط Vue ،Webpack یا Browserify توصیه شده اند، این قابلیت را دارند که بعداً کد منبع را با پیش پردازنده های مورد نظر خود تبدیل کنند.

Vue همچنین DevTools مخصوص به خود را دارد که در قالب یک پسوند مرورگر است. DevTools اشکال زدایی برنامه و بررسی وضعیت و سلسله مراتب اجزا را ساده می کند. این برنامه به شما امکان می دهد تا برنامه خود را به صورت زنده ویرایش کنید، رویدادهای سفارشی را ردیابی کنید و اگر برنامه شما با اشکال مواجه شود، نسخه های قبلی و تغییرات ایجاد شده را ببینید.

امکانات Vue.JS

قالب ها: Vue از یک سینتکس الگوی مبتنی بر HTML استفاده می کند که اجازه می دهد DOM رندر شده را به داده های نمونه اصلی Vue متصل کند. همه قالب های Vue دارای HTML معتبری هستند که توسط مرورگرهای سازگار با مشخصات و تجزیه کننده های HTML قابل تجزیه است. Vue قالب ها را به توابع ارائه DOM مجازی کامپایل می کند. یک مدل شی اسناد مجازی (یا "DOM") به Vue اجازه می دهد تا قبل از بروزرسانی مرورگر، اجزای موجود در حافظه خود را ارائه دهد. همراه با سیستم واکنش پذیری، Vue قادر به محاسبه حداقل تعداد مؤلفه ها برای ارائه مجدد و اعمال حداقل دستکاری های DOM هنگام تغییر وضعیت برنامه است. کاربران Vue می توانند از نحو الگویی استفاده کنند یا انتخاب کنند که بطور مستقیم توابع ارائه را با استفاده از JSX بنویسند. توابع ارائه دهنده اجازه می دهد تا یک برنامه از بین اجزای نرم افزار ساخته شود.

واکنش پذیری: Vue دارای یک سیستم واکنش پذیری است که از اشیا ساده JavaScript استفاده می کند و دوباره بهینه سازی را ارائه می دهد. هر مؤلفه وابستگی های واکنشی خود را در طول رندر خود نگه می دارد، بنابراین سیستم دقیقاً می داند چه موقع دوباره ارائه می شود و کدام مؤلفه ها را دوباره ارائه می دهد.

کامپوننت: مؤلفه های Vue عناصر اصلی HTML را برای کپسوله کردن کد قابل استفاده مجدد گسترش می دهند. در سطح بالایی، کامپوننت ها عناصر سفارشی هستند که کامپایلر Vue به آن متصل می شود. در Vue، یک مؤلفه در اصل یک نمونه Vue با گزینه های از پیش تعریف شده است. قطعه کد در زیر حاوی نمونه ای از یک مؤلفه Vue است. مؤلفه دکمه ای را نشان می دهد و تعداد دفعات کلیک روی دکمه را چاپ می کند:

<div id="tuto">
	<button-clicked v-bind:initial-count="0"></button-clicked>
</div>

<script> Vue.component('button-clicked', { props: [ "initialCount" ], data: () => ({ count: 0, }), template: `<button v-on:click="onClick">Clicked {{ count }} times</button>`, computed: { countTimesTwo() { return this.count * 2; } }, watch: { count(newValue, oldValue) { console.log(`The value of count is changed from ${oldValue} to ${newValue}.`); } }, methods: { onClick() { this.count += 1; } }, mounted() { this.count = this.initialCount; } });

new Vue({ el: '#tuto', }); </script>

انتقال: Vue روشهای مختلفی را برای اعمال جلوه های انتقال هنگام وارد کردن، به روزرسانی یا حذف شدن از DOM فراهم می کند. این شامل ابزارهایی برای:

  • کلاس ها را برای انتقال CSS و انیمیشن بطور خودکار اعمال کنید.
  • کتابخانه های انیمیشن CSS شخص ثالث، مانند Animate.css را ادغام کنید.
  • از JavaScript برای دستکاری مستقیم DOM در انتقال استفاده کنید.
  • کتابخانه های انیمیشن جاوا اسکریپت شخص ثالث، مانند Velocity.js را ادغام کنید.

هنگامی که یک عنصر پیچیده شده در یک جزء انتقال وارد یا خارج شود، این اتفاق رخ می دهد:

  • Vue به طور خودکار چه عنصر هدف دارای انتقال CSS باشد یا از انیمیشن های کاربردی استفاده کند. در صورت انجام این کار، کلاس های انتقال CSS در زمان های مناسب اضافه و حذف می شوند.
  • اگر مؤلفه انتقال قلاب جاوا اسکریپت را فراهم کند ، این قلابها در زمانهای مناسب فراخوانی می شوند.
  • اگر هیچ انتقال / انیمیشن CSS تشخیص داده نشود و هیچ قلاب جاوا اسکریپت ارائه نشود، عملیات DOM برای درج و / یا حذف بلافاصله در قاب بعدی اجرا می شود.

مسیریابی: یک نقطه ضعف سنتی برنامه های تک صفحه ای (SPA) عدم امکان  اشتراک صحیح پیوندها به "sub" در یک صفحه وب خاص است. از آنجا که SPA ها به کاربران خود فقط یک پاسخ مبتنی بر URL از سرور ارائه می دهند (به طور معمول در خدمت index.html یا index.vue است)، نشانه گذاری برخی از صفحه نمایش یا به اشتراک گذاشتن پیوند به بخش های خاص غیر ممکن است. Vue یک رابط برای تغییر آنچه در صفحه نمایش داده می شود بر اساس مسیر URL فعلی - صرف نظر از نحوه تغییر آن (اعم از پیوند از طریق ایمیل، تازه کردن یا پیوندهای درون صفحه) ارائه می دهد. علاوه بر این، استفاده از روتر front-end امکان ایجاد عمدی مسیر مرورگر را در هنگام وقوع وقایع خاص مرورگر (یعنی کلیک) روی دکمه ها یا پیوندها فراهم می کند. Vue به خودی خود مسیریابی دسترسی به front-end را ندارد. اما بسته "vue-router" با منبع آزاد API را برای به روزرسانی URL برنامه، پشتیبانی از دکمه برگشت (سابقه مرور) و تنظیم مجدد رمز عبور ایمیل یا پیوندهای تأیید ایمیل با پارامترهای URL تأیید اعتبار فراهم می کند. این پشتیبانی از نقشه برداری از مسیرهای تو در تو به سمت اجزای تو در تو پشتیبانی می کند و کنترل انتقال ریز دانه ها را ارائه می دهد. با Vue، توسعه دهندگان در حال حاضر برنامه هایی را با بلوک های ساختمانی کوچک در ساخت اجزای بزرگتر ترکیب می کنند. با افزودن روتر به این ترکیب، کامپوننت ها صرفاً باید به مسیری که متعلق به آنها نقشه برداری می شود، برسند و مسیرهای اصلی parent/root باید از مکانی که کودکان باید تحویل دهند، مشخص شود.

<div id="app">
  <router-view></router-view>
</div>
...

<script> ... const User = { template: '<div>User {{ $route.params.id }}</div>' }

const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }) ... </script>

کد بالا:

  • مسیر front-end را با نام <websitename.com/user/<id> تنظیم می کند.
  • که در کامپوننت کاربر تعریف شده در (...const User) ارائه خواهد شد.
  • به مؤلفه کاربر اجازه می دهد تا با استفاده از کلید پارامترهای شی مسیر :$ شناسه خاص کاربر را که در URL تایپ شده است، عبور دهد: route.params.id$.
  • این الگوی (با توجه به پارامترهای منتقل شده در روتر) در <router-view> </router-view> در داخل برنامه DOM's div# ارائه می شود.

HTML سرانجام تولید شده برای شخصی که در websitename.com/user/1 در حال تایپ کردن است، خواهد بود:

<div id="app">
  <div>
    <div>User 1</div>
  </div>
</div>

مثال های Vue.JS

در مثال زیر، new Vue object با ()new Vue ایجاد می شود.

ویژگی el: با استفاده از id="app"، شی جدید Vue را به عنصر HTML وصل می کند.


<div id="app">
<h1>{{ message }}</h1>
</div>

<script> var myObject = new Vue({ el: '#app', data: {message: 'Hello Vue!'} }) </script>

وقتی یک شی Vue به یک عنصر HTML وصل شود، هنگام تغییر شی Vue، عنصر HTML تغییر می کند:


<div id="app">
{{ message }}
</div>

<script> var myObject = new Vue({ el: '#app', data: {message: 'Hello Vue!'} })

function myFunction() { myObject.message = "John Doe"; } </script>

آیا این نوشته را دوست داشتید؟
pluralsight-vue-js-playbook

دوره پلی بوک Vue.js


در این دوره، با یک فریمورک جاوا اسکریپت آشنا می شوید که به اندازه کافی بصری است و به شما امکان می دهد روی اهداف خود تمرکز کنید. ابتدا یاد خواهید گرفت ...

1399/09/20 717 بازدید
pluralsight-vue-3-0-better-faster-and-stronger-codemash

آموزش Vue 3.0 بهتر، سریع تر و قدرتمندتر: CodeMash


Vue پس از مدت ها انتظار، ورژن 3 را منتشر کرد. ویژگی های جدیدی در این ورژن وجود دارد که می تواند شما را هیجان زده کند. در این دوره، Dan Vega قصد دارد ب...

1399/09/10 1500 بازدید
pluralsight-vue-js-fundamentals

اصول Vue.js


شما در این دوره، دانش بنیادی لازم برای ساخت اپلیکیشن های قدرتمند و آماده تولید با Vue را کسب خواهید کرد. ابتدا، شما می توانید پروژه خود، شامل ایجاد کا...

1399/08/29 1195 بازدید
packtpub-full-stack-web-development-with-vue-js-and-node-js

توسعه وب فول استک با Vue.js و Node.js


در این دوره همراه با ساخت پروژه‌های مختلف مباحت مربوط به Node.js و Vue.js آشنا خواهید شد. درباره ساخت رابط کاربری برنامه با Vue و فراهم سازی بستری منا...

1399/07/08 1858 بازدید
pluralsight-vue-getting-started

آموزش Vue: شروع کار


آیا به شیوه استفاده از فیچرهای اساسی Vue علاقه مندید؟ در این دوره آموزشی Vue، شما دانش بنیادین نحوه آغاز توسعه با Vue برای ایجاد اپلیکیشن های وب را یا...

1399/07/04 1256 بازدید
linkedin-vue-js-building-an-interface

آموزش Vue.js: ایجاد یک رابط کاربری


راه عالی برای یادگیری Vue.js، استفاده از Vue.js است.در این دوره، مدرس Ray Villalobos به شما یاد می دهد چگونه یک برنامه ساده مبتنی بر کامپوننت: یک سیست...

1399/03/27 2436 بازدید زیرنویس دارد
linkedin-vue-js-essential-training

آموزش اصولی Vue.js


در این دوره، اصول Vue.js را بررسی می کنیم. کتابخانه اصلی را بررسی کنید و یاد بگیرید که چگونه می توانید از الگوها، کلاس ها، اشیاء، آرایه ها، استایل ها،...

1399/01/26 6460 بازدید زیرنویس دارد
linkedin-vue-js-working-with-apis

آموزش Vue js: کار با API ها


برنامه های مدرن در حال تغییر به مدلی هستند که در آن API، داده ها و تعامل را ارائه می دهد. توسعه دهندگان فرانت اند تصمیم می گیرند که چگونه اطلاعات و تع...

1399/01/07 2605 بازدید زیرنویس دارد
linkedin-learning-vuex

آموزش Vuex


Vuex به شما کمک می کند تا تمام قسمت های برنامه را در کنار هم قرار دهید و یک محل مرکزی برای مدیریت برنامه فراهم می کند. در این دوره Alexander Zanfir به...

1398/12/27 3373 بازدید زیرنویس دارد
linkedin-building-vue-and-node-apps-with-authentication

آموزش ساخت برنامه های Vue و Node با احراز هویت


شما از قبل با فریمورک به روز Vue.js و Node.js که به یک استاندارد در تولید بک اند تبدیل شده است، آشنا هستید. در این دوره، Alexander Zanfir نشان می دهد ...

1398/12/10 2746 بازدید زیرنویس دارد
laracasts-testing-vue

آموزش تست در Vue


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

1398/10/20 1610 بازدید
teamtreehouse-vue-js-basics

آشنایی با مبانی Vue.js


در این دوره، شما مفاهیم اساسی را یاد خواهید گرفت که به شما کمک می کند تا با Vue شروع به کار کنید. شما همچنین مهارت و دانش بنیادی کسب خواهید کرد که به ...

1398/10/03 3081 بازدید
skillshare-advanced-form-component-with-vuejs

کامپوننت فرم پیشرفته با Vuejs


VueJs به یکی از محبوب ترین چارچوب های جاوا اسکریپت تبدیل شده است.در این دوره یکی از قدرتمندترین ابزارهای آن یعنی کامپوننت ها را بررسی خواهید کرد.شما ی...

1398/09/17 1773 بازدید
skillshare-vue-js-2-academy-learn-vue-step-by-step

آکادمی Vue.js 2 - یادگیری گام به گام Vue


آشنایی با vue.js - در این دوره با اتصال داده دو طرفه، مدیریت رویداد، قالب ها و DOM مجازی، لیست و رندر شرط، اتصال استایل ها و ویژیگی ها،نمونه Vue، عبا...

1398/08/26 10165 بازدید
pluralsight-developing-faster-with-the-vue-cli

توسعه سریعتر با Vue CLI


در این دوره نحوه ایجاد اپلیکیشن های Vue را با Vue CLI می آموزید.در ابتدا با نحوه کار Vue CLI آشنا خواهید شد. چگونگی نصب آن و چگونگی استفاده از آن برای...

1398/08/18 1899 بازدید
packtpub-hands-on-styling-vue-js-web-apps-with-element-ui-and-iview

استایل دادن به اپلیکیشن های وب Vue.js با Element UI و iView


این دوره به منظور معرفی امکانات جدید در طراحی UI با Element UI و iView ساخته شده است. در این دوره جنبه های مختلفی از طراحی UI آموزش داده می شود که ممک...

1398/08/13 1693 بازدید
packtpub-practical-projects-with-vue-js-2

آموزش پروژه های عملی با Vue JS 2


در این دوره با Vue.js آشنا می شوید تا بتوانید از آن در مثال های دنیای واقعی استفاده کنید. این دوره شما را در ساخت اپلیکیشن های کامل کمک می کند....

1398/06/06 3643 بازدید
packtpub-up-and-running-with-vue-js

شروع به کار با Vue.js


در این دوره با اصول Vue.js و بررسی اپلیکیشن های مدرن و الزامات آنها آشنا می شوید. از ابزارهای Vue.js برای ساخت اپلیکیشن های بسیار مقیاس پذیر و سریع اس...

1398/06/02 2274 بازدید
react-vs-angular-vs-vue-what-to-choose-for-your-next-project

مقایسه React ، Angular و Vue : کدام یک برای پروژه بعدی شما مناسب هستند؟


امروزه فریمورک های جاوااسکریپت زیادی برای توسعه Front-End وجود دارند. ری اکت، انگولار و Vue سه فریمورک برتر هستند که در اکثر سازمان ها در جهان استفاده...

1398/03/06 4789 بازدید زیرنویس دارد
packtpub-beginning-vue-js

شروع کار با Vue.js


توسعه دهندگان می توانند با چارچوب Vue.js شگفتی بیافرینند - چارچوب Vue.js یک اکوسیستم می باشد که بین مابین یک کتابخانه و یک چارچوب با تمام ویژگی ها قرا...

1397/12/27 3114 بازدید