آموزش Vue.js

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

• معرفی Vue.JS
• ویژگی های Vue.JS
• چرا باید از Vue.JS استفاده کنیم؟
• امکانات Vue.JS
• مثال های 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>