Vue.js به زبان ساده: ساخت اولین اپلیکیشن تعاملی

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

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

در ادامه، با جزئیات ۱۰ نکته کلیدی درباره Vue.js آشنا خواهید شد و خواهید دید که چگونه این فریمورک می‌تواند به شما در ساخت اپلیکیشن‌های فرانت‌اند مقیاس‌پذیر و با عملکرد بالا کمک کند. همچنین در پایان با ساخت یک اپلیکیشن ساده تعاملی با شما خواهیم بود.

اگر قصد دارید به صورت کامل با ویوجی‌اس آشنا شوید و از آن در پروژه‌های‌تان استفاده کنید، پیشنهاد می‌کنم دوره آموزشی Vue.js 3 را مشاهده کنید. 

Vue.js چیست؟

Evan You، خالق Vue.js، این فریمورک را چنین توصیف می‌کند:

«Vue.js راهکاری انعطاف‌پذیرتر و کمتر محدودکننده است. در واقع تنها یک لایه رابط کاربری محسوب می‌شود؛ بنابراین می‌توانید آن را به‌عنوان یک قابلیت سبک در صفحات استفاده کنید، نه الزاماً یک SPA کامل.»

ایده اصلی او این بود که فریمورکی بسازد که از نظر قدرت با Angular رقابت کند، اما در عین حال سبک‌تر و انعطاف‌پذیرتر باشد؛ بدون آن‌همه افزونه‌ها و مفاهیم پیچیده‌ای که در Angular وجود دارد.

نتیجه این تلاش، تولد Vue.js بود؛ فریمورکی که امروز به یکی از محبوب‌ترین ابزارهای توسعه فرانت‌اند در جهان تبدیل شده است.

مطابق با آمار رسمی وبسایت State of Javascript در سال ۲۰۲۴ ویوجی‌اس توانست به دومین فریمورک محبوب جاوا اسکریپت تبدیل شود.

چرا توسعه‌دهندگان از Vue.js استفاده می‌کنند؟

دلایل مختلفی وجود دارد که یک توسعه‌دهنده فناوری خاصی را انتخاب کند. در این بخش توضیح می‌دهیم چرا یادگیری Vue.js ارزشمند است.

• سادگی در یادگیری: Vue.js یکی از ساده‌ترین فریمورک‌های فرانت‌اند برای شروع کار است. چون مبتنی بر جاوااسکریپت است، هر کسی که دانش پایه‌ای از جاوااسکریپت داشته باشد می‌تواند به‌راحتی با آن توسعه دهد.

• راه‌اندازی سریع با Vue CLI: ابزار Vue CLI همراه با سایر ابزارهای توسعه فرانت‌اند، فرآیند راه‌اندازی پروژه را بسیار آسان می‌کند. این ابزار به‌صورت پیش‌فرض امکاناتی دارد، اما در عین حال به شما اجازه می‌دهد کدی با ساختار DRY (Don’t Repeat Yourself) بنویسید؛ یعنی بدون تکرارهای اضافی و با سازمان‌دهی بهتر.

• ویژگی واکنش‌پذیری (Reactivity): Vue.js به‌طور داخلی از سیستم واکنش‌پذیری پشتیبانی می‌کند. این یعنی قابلیت‌های بلادرنگ (real-time) که در Angular محبوب بودند، در Vue.js بسیار ساده‌تر پیاده‌سازی می‌شوند. برای نمونه، می‌توانید تنها با یک دستور ساده مثل v-if منطق شرطی را در رابط کاربری خود اعمال کنید.

در ادامه، به بررسی مزایا و معایب اصلی Vue.js خواهیم پرداخت تا دید کامل‌تری نسبت به این فریمورک داشته باشید.

مزایا و معایب Vue.js

حال بیایید ببینیم چه ویژگی‌هایی باعث جذب توسعه‌دهندگان به ویوجی‌اس شده و چه نکاتی ممکن است برخی را از استفاده‌اش دور کند.

مزایای Vue.js

• حجم بسیار کوچک: Vue.js تنها حدود ۱۸ کیلوبایت حجم دارد؛ در مقایسه با فریمورک‌های بزرگ‌تر، این اندازه بسیار سبک است. همین موضوع تأثیر مثبتی بر SEO و تجربه کاربری (UX) اپلیکیشن‌های فرانت‌اند خواهد داشت.

• کامپوننت‌های تک‌فایلی و خوانایی بالا: معماری Vue.js مبتنی بر کامپوننت است؛ یعنی بخش‌های بزرگ کد به اجزای کوچک‌تر تقسیم می‌شوند. هر کامپوننت با ترکیب HTML ،CSS و JavaScript نوشته می‌شود که باعث افزایش خوانایی و ساده‌تر شدن توسعه می‌گردد.

• سیستم ابزار قدرتمند: Vue.js به‌طور پیش‌فرض از ابزارهای متنوع توسعه فرانت‌اند پشتیبانی می‌کند و نیاز به تنظیمات پیچیده ندارد. برای نمونه، ابزارهایی مانند Babel و Webpack در دسترس هستند. علاوه بر این، امکاناتی مثل تست واحد (Unit Testing)، تست انتها به انتها (E2E)، سیستم‌های مسیریابی انعطاف‌پذیر، مدیریت وضعیت، و حتی رندر سمت سرور (SSR) را فراهم می‌کند.

• سهولت استفاده: اگر تجربه کار با Vue.js را داشته باشید، می‌دانید که یادگیری و استفاده از آن بسیار ساده است. این فریمورک رویکرد توسعه وب را مدرن کرده و باعث می‌شود حتی مبتدی‌ها با چند تمرین ساده احساس راحتی کنند.

معایب Vue.js

پس از بررسی مزایا، حالا به نقاط ضعف و چالش‌های Vue.js می‌پردازیم.

• پیچیدگی در سیستم واکنش‌پذیری (Reactivity): یکی از قابلیت‌های مهم Vue.js، پشتیبانی از دوطرفه بودن داده‌ها (Two-way Binding) است؛ یعنی تغییر داده در یک بخش به‌طور خودکار در بخش‌های دیگر هم اعمال می‌شود. با این حال، سیستم واکنش‌پذیری تنها بخش‌هایی از داده را که تغییر کرده‌اند دوباره رندر می‌کند. همین موضوع گاهی باعث خطا در خواندن داده‌ها می‌شود و نیاز به «تخت‌سازی داده‌ها» (Data Flattening) دارد. این مسئله به‌عنوان یک چالش شناخته‌شده مطرح شده و راه‌حل‌های آن در مستندات رسمی Vue.js توضیح داده شده است.

• مانع زبانی (Language Barrier): در ابتدای کار، Vue.js بیشتر توسط شرکت‌های چینی مانند Xiaomi و Alibaba مورد استفاده قرار گرفت و همین باعث شد بخش زیادی از انجمن‌ها و کانال‌های گفتگو به زبان چینی باشند. این موضوع یادگیری و پذیرش Vue.js را برای توسعه‌دهندگان غیرچینی دشوار می‌کرد. البته امروز این مشکل تا حد زیادی برطرف شده و Vue.js پشتیبانی چندزبانه دارد، اما همچنان برخی زبان‌ها نسبت به دیگر زبان‌ها پوشش ضعیف‌تری دارند.

• ریسک ناشی از انعطاف‌پذیری بیش از حد: همان‌طور که اشاره شد، Vue.js بسیار انعطاف‌پذیر و ساده در استفاده است. اما همین ویژگی می‌تواند در پروژه‌های بزرگ به مشکل تبدیل شود. چون اعضای تیم ممکن است هرکدام روش متفاوتی برای پیاده‌سازی انتخاب کنند و در نهایت کدهای پراکنده و بی‌ساختار (Spaghetti Code) تولید شود.

با توجه به مزایا و معایب مطرح‌شده، احتمالاً تا اینجا ویژگی‌هایی را دیده‌اید که برایتان جذاب‌اند و برخی دیگر که ممکن است در پروژه‌های شما کارایی نداشته باشند.

۱۰ نکته‌ای که باید درباره Vue.js بدانید

در این بخش به مهم‌ترین ویژگی‌های Vue.js می‌پردازیم و توضیح می‌دهیم چرا شناخت آن‌ها ضروری است.

۱. ویژگی Computed Properties

یکی از پرکاربردترین قابلیت‌های Vue.js، ویژگی‌های محاسبه‌شده (Computed Properties) هستند. این ویژگی به شما امکان می‌دهد مقادیر و داده‌ها را به‌صورت خوانا و کارآمد تغییر دهید، پردازش کنید و نمایش دهید.

• کاربرد اصلی: زمانی که نیاز دارید چندین بار یک منطق کوچک مثل فرمت‌کردن متن یا تغییر مقادیر را تکرار کنید، به‌جای نوشتن همان کد در چندین نقطه، می‌توانید آن را در یک computed property تعریف کنید.

• مزیت: این کار باعث می‌شود منطق اضافی از داخل قالب (template) حذف شود. اگر منطق زیادی در قالب قرار گیرد، کد شما سریعاً شلوغ و نگهداری آن دشوار خواهد شد.

مثال بدون computed property:

<template>
  <div>
    <p> I love {{ value.toUpperCase() }} </p>
  </div>
</template>

اگر لازم باشد همین تغییر را در ۵۰ جای مختلف اعمال کنید، کد خیلی سریع شلوغ می‌شود.

مثال با computed property:

<template>
  <div>
    <p> I love {{ value }} </p>
  </div>
</template>

<script>
export default {
  computed: {
    value() {
      return this.value.toUpperCase()
    }
  }
}
</script>

حالا اگر بخواهید منطق را تغییر دهید (مثلاً از toUpperCase() به toLowerCase())، کافی است فقط در یک نقطه تغییر دهید و این تغییر در کل پروژه اعمال خواهد شد.

۲. مدیریت رویدادها (Event Handling)

یکی از قابلیت‌های مهم در Vue.js، ساده‌سازی ارتباط بین کامپوننت‌های والد و فرزند است. این ارتباط با استفاده از دو ابزار کلیدی انجام می‌شود:

• $emit: برای ارسال رویداد از یک کامپوننت به بیرون استفاده می‌شود. این تابع دو پارامتر می‌گیرد: یک رشته به‌عنوان نام رویداد و یک مقدار اختیاری برای ارسال داده.
• v-on:event-name: برای گوش‌دادن به رویدادهایی که از کامپوننت دیگر ارسال شده‌اند استفاده می‌شود.

نمونه کد ارسال رویداد از کامپوننت فرزند:

<template>
  <section>
    <button @click="onClick">Add</button>
  </section>
</template>

<script>
export default {
  name: "AddEvent",
  methods: {
    onClick() {
      this.$emit('add', this.data);
    }
  }
}
</script>

در این مثال، با کلیک روی دکمه، متد onClick اجرا می‌شود و رویداد add همراه با داده به کامپوننت والد ارسال می‌گردد.

نمونه کد گوش‌دادن به رویداد در کامپوننت والد:

<template>
  <section>
    <p v-show="showSaveMsg">This component is listening to the ADD event</p>
    <add-event v-on:add="onAdd"></add-event>
  </section>
</template>

<script>
export default {
  data() {
    return {
      showSaveMsg: false
    }
  },
  components: {
    AddEvent: () => import('./AddEvent')
  },
  methods: {
    onAdd() {
      this.showSaveMsg = true;
    }
  }
}
</script>

در اینجا، کامپوننت والد به رویداد add گوش می‌دهد و پس از دریافت آن، مقدار showSaveMsg را به true تغییر می‌دهد. نتیجه این تغییر، نمایش پیام در رابط کاربری است.

این مکانیزم باعث می‌شود ارتباط بین کامپوننت‌ها در Vue.js بسیار ساده و قابل مدیریت باشد، بدون نیاز به ساختارهای پیچیده.

۳. بارگذاری تنبل (Lazy Loading) / کامپوننت‌های ناهمگام (Async Components)

یکی از بهترین روش‌های بهبود عملکرد در Vue.js، استفاده از Lazy Loading است. در این روش، کامپوننت‌ها به‌صورت ناهمگام (asynchronous) یا در زمان نیاز بارگذاری و رندر می‌شوند. نتیجه این کار کاهش چشمگیر حجم فایل‌ها، زمان پاسخ‌گویی HTTP و در کل افزایش سرعت اپلیکیشن است.

چگونگی پیاده‌سازی

Lazy Loading در Vue.js معمولاً با استفاده از Webpack Dynamic Imports انجام می‌شود که علاوه بر بارگذاری تنبل، امکان تقسیم کد (Code Splitting) را نیز فراهم می‌کند.

بارگذاری تنبل به‌صورت سراسری (Global):

import Vue from "vue";
Vue.component("new-component", () => import("./components/NewComponent.vue"));

در این حالت، کامپوننت به‌صورت سراسری تعریف می‌شود و تنها زمانی بارگذاری خواهد شد که واقعاً مورد استفاده قرار گیرد.

بارگذاری تنبل به‌صورت محلی (Local):

<template>
  <div>
    <component></component>
  </div>
</template>

<script>
export default {
  components: {
    'Component': () => import('./Component')
  }
}
</script>

در این مثال، کامپوننت به‌صورت محلی در داخل یک کامپوننت دیگر بارگذاری می‌شود و تنها در زمان نیاز وارد پروژه خواهد شد.

این قابلیت باعث می‌شود پروژه‌های بزرگ Vue.js سریع‌تر اجرا شوند و تجربه کاربری بهتری ارائه دهند.

۴. کامپوننت‌های سراسری (Global Components)

یکی از قابلیت‌های مهم در Vue.js، استفاده از کامپوننت‌های سراسری است. در این روش، شما تنها یک‌بار کامپوننت را ثبت می‌کنید و سپس می‌توانید آن را در هر بخش از پروژه خود استفاده کنید. این ویژگی باعث افزایش قابلیت استفاده مجدد (Reusability) و صرفه‌جویی در زمان می‌شود.

• مزیت اصلی: دیگر نیازی نیست هر بار کامپوننت‌ها را به‌صورت محلی ثبت کنید؛ کافی است یک‌بار آن‌ها را به‌صورت سراسری تعریف کنید.

• چالش و ریسک: اگر همه کامپوننت‌ها را به‌صورت سراسری ثبت کنید، حجم نهایی پروژه به‌شدت افزایش می‌یابد. این موضوع می‌تواند باعث کندی بارگذاری صفحات و کاهش SEO شود. بنابراین باید تنها کامپوننت‌هایی را به‌صورت سراسری ثبت کنید که در بخش‌های مختلف پروژه کاربرد زیادی دارند.

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

import Vue from "vue";
Vue.component("new-component", () => import("./components/NewComponent.vue"));

در این مثال، کامپوننت new-component به‌صورت سراسری ثبت شده و در هر جای پروژه قابل استفاده خواهد بود.

۵. کامپوننت‌های تک‌فایلی (Single File Components)

یکی از قدرتمندترین ویژگی‌های Vue.js، کامپوننت‌ها هستند. این قابلیت به شما امکان می‌دهد عناصر اصلی HTML، CSS و JavaScript را گسترش دهید و کدهای قابل‌استفاده مجدد را در قالبی منظم و مستقل نگه دارید.

• مزیت اصلی: کامپوننت‌ها پروژه‌های بزرگ را به بخش‌های کوچک‌تر و قابل‌مدیریت تقسیم می‌کنند. این کار اصل DRY (Don’t Repeat Yourself) را تقویت کرده و مانع تکرار بیهوده کد می‌شود.

• ساختاردهی و سازمان‌دهی: هر کامپوننت می‌تواند در یک فایل جداگانه با پسوند .vue ذخیره شود. این جداسازی باعث می‌شود پروژه‌های بزرگ سازمان‌یافته‌تر باشند و نگهداری کد ساده‌تر شود.

نمونه یک کامپوننت تک‌فایلی:

<template>
  <section>
    <button @click="onClick">Add</button>
  </section>
</template>

<script>
export default {
  name: "CustomButton",
  methods: {
    onClick() {
      this.$emit('add', this.data);
    }
  }
}
</script>

<style scoped>
  button {
    /** Button Styles */
  }
</style>

در این مثال، یک کامپوننت دکمه سفارشی ساخته شده است که می‌توان آن را در بخش‌های مختلف پروژه استفاده کرد. هر کامپوننت شامل سه بخش اصلی است:

• Template برای ساختار HTML
• Script برای منطق جاوااسکریپت
• Style برای استایل‌های CSS

این ترکیب باعث می‌شود هر کامپوننت یک واحد مستقل و قابل‌استفاده مجدد باشد.

۶. تست‌نویسی در Vue.js

یکی از نقاط قوت Vue.js، پشتیبانی قدرتمند از کتابخانه‌های تست است. این فریم‌ورک امکان تست واحد (Unit Testing) با ابزارهایی مانند Jest و Mocha و همچنین تست انتها به انتها (E2E) را با کمترین تنظیمات فراهم می‌کند.

راه‌اندازی سریع با Vue CLI: اگر پروژه خود را با ابزار Vue CLI ایجاد کرده باشید، کافی است دستورات زیر را اجرا کنید:

vue add unit-jest   // اجرای تست واحد با Jest
npm install --save-dev @vue/test-utils

نمونه تست یک کامپوننت ساده: در مثال زیر، یک کامپوننت ساده تست می‌شود تا مطمئن شویم پیام موردنظر به‌درستی رندر شده است:

// Import the `mount()` method from Vue Test Utils
import { mount } from '@vue/test-utils'

// The component to test
const MessageComponent = {
  template: '<p>{{ message }}</p>',
  props: ['message']
}

test('displays a message', () => {
  // mount() returns a wrapped Vue component we can interact with
  const wrapper = mount(MessageComponent, {
    propsData: {
      msg: 'Welcome to our testing world'
    }
  })

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('Welcome to our testing world')
})

گزینه‌های تست در Vue Testing Library:

• Mount: برای تست کامپوننت همراه با زیرکامپوننت‌ها و بررسی ارتباط بین آن‌ها.
• Shallow: برای تست کامپوننت به‌صورت ایزوله و بدون بارگذاری زیرکامپوننت‌ها.

این انعطاف باعث می‌شود بتوانید هم تست‌های سریع و ساده داشته باشید و هم تست‌های جامع برای پروژه‌های بزرگ.

۷. ابزار قدرتمند Vue CLI

Vue CLI یکی از ابزارهای خط فرمان (CLI) بسیار قدرتمند برای توسعه‌دهندگان Vue است. این ابزار امکانات زیادی در اختیار شما قرار می‌دهد تا بتوانید کامپوننت‌ها را به‌صورت ایزوله توسعه دهید، تست کنید و در طول فرآیند توسعه از قابلیت Hot Reloading بهره‌مند شوید.

• مزیت اصلی: با Vue CLI می‌توانید یک کامپوننت را جداگانه توسعه دهید، آن را تست کنید و هم‌زمان تغییرات را به‌صورت زنده مشاهده کنید. این ویژگی سرعت توسعه را به‌طور چشمگیری افزایش می‌دهد.

نصب Vue CLI به‌صورت سراسری:

npm install -g @vue/cli

اجرای یک کامپوننت به‌صورت ایزوله:

vue serve ./components/views/Home.vue

ساخت یک کامپوننت برای اشتراک‌گذاری:

vue build --target lib --name goldenRule ./components/views/Home

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

Vue CLI ابزاری قدرتمند است که اگر به‌خوبی آن را یاد بگیرید، می‌تواند زمان توسعه شما را به‌طور قابل‌توجهی کاهش دهد. برای یادگیری بیشتر، مطالعه مستندات رسمی Vue CLI توصیه می‌شود.

۸. مدیریت Props در Vue.js

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

ایجاد Props به روش‌های مختلف: فرض کنید می‌خواهید یک prop به نام isAdmin بسازید. این کار را می‌توان به چند شیوه انجام داد:

<template>
  <section>
    <component v-if="isAdmin"></component>
  </section>
</template>

<script>
export default {
  name: 'Component',

  // روش اول: تعریف کامل با نوع، مقدار پیش‌فرض و الزامی بودن
  props: {
    isAdmin: {
      type: Boolean,
      default: false,
      required: true
    }
  },

  // روش دوم: تعریف ساده به‌صورت آرایه
  props: ['isAdmin'],

  // روش سوم: تعریف با نوع داده
  props: {
    isAdmin: Boolean
  }
}
</script>

اعتبارسنجی Props: اعتبارسنجی props اهمیت زیادی دارد تا مطمئن شوید داده‌ها درست وارد می‌شوند. برای نمونه:

props: {
  isAdmin: {
    default: false,
    required: true,
    validator: function(value) {
      return typeof value === 'boolean';
    }
  }
}

تغییر مقدار Props: در کامپوننت فرزند می‌توانید مقدار props را تغییر دهید (هرچند بهترین روش این است که props فقط خواندنی باشند و تغییر آن‌ها از طریق والد انجام شود):

methods: {
  isAdmin() {
    this.isAdmin = true;
  }
}

ارسال مقدار Props از والد: در کامپوننت والد می‌توانید مقدار props را به‌سادگی اختصاص دهید:

<template>
  <section>
    <component :isAdmin="true"></component>
  </section>
</template>

مدیریت درست props باعث می‌شود ارتباط بین کامپوننت‌ها شفاف‌تر، کدها قابل‌نگهداری‌تر و پروژه‌ها مقیاس‌پذیرتر شوند.

۹. رندر سمت سرور (Server-side Rendering – SSR)

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

برای بهبود عملکرد و بهینه‌سازی سئو، استفاده از رندر سمت سرور (SSR) اهمیت زیادی دارد.

• مزیت اصلی SSR: موتورهای جستجو مانند گوگل و بینگ هنگام خزیدن (Crawling) صفحات، محتوای کامل و رندرشده را مشاهده می‌کنند. این موضوع باعث می‌شود وب‌سایت شما سریع‌تر ایندکس شود و امتیاز Time-to-Content بالاتری کسب کند.

• چگونگی عملکرد SSR: در این روش، یک اپلیکیشن تک‌صفحه‌ای (SPA) که معمولاً در سمت کلاینت رندر می‌شود، ابتدا در سمت سرور رندر شده و سپس به‌صورت کامل به مرورگر کاربر ارسال می‌شود. بنابراین، تمام اطلاعات پیش از نمایش در مرورگر آماده هستند و تجربه کاربری بهتری ایجاد می‌شود.

• چالش‌ها: پیاده‌سازی SSR در Vue.js برای مبتدیان دشوار است. به همین دلیل توصیه می‌شود از Nuxt.js استفاده کنید؛ فریمورکی که به‌طور پیش‌فرض از SSR پشتیبانی می‌کند و یادگیری آن بسیار ساده‌تر است.

۱۰. استقرار (Deployment)

در طول توسعه با Vue.js ممکن است با هشدارها، خطاها و حتی فایل‌های حجیم مواجه شوید. اما به محض اینکه پروژه را برای محیط Production آماده کنید، این مشکلات برطرف می‌شوند.

• پیکربندی خودکار: Vue.js به‌طور خودکار ابزارهای Webpack را برای ساخت پروژه تنظیم می‌کند. این شامل مواردی مانند Minification (کوچک‌سازی کد)، استخراج و پاک‌سازی CSS ،Caching، ردیابی خطاهای زمان اجرا و موارد دیگر است.

• سهولت در استقرار: فرآیند استقرار در Vue.js بسیار ساده است، زیرا محیط Production بدون نیاز به مراحل اضافی توسط توسعه‌دهنده به‌طور خودکار پیکربندی می‌شود.

• راهنماهای رسمی: برای استقرار اپلیکیشن Vue.js می‌توانید از راهنماهای عمومی و رسمی آن استفاده کنید که مراحل دقیق و بهترین شیوه‌ها را توضیح می‌دهند.

به این ترتیب، مجموعه ۱۰ ویژگی کلیدی Vue.js کامل شد: از Computed Properties گرفته تا Deployment. این ویژگی‌ها نشان می‌دهند چرا Vue.js یکی از محبوب‌ترین و قدرتمندترین فریم‌ورک‌های فرانت‌اند است و چگونه می‌تواند به شما در ساخت اپلیکیشن‌های مقیاس‌پذیر، سریع و قابل‌نگهداری کمک کند.

ساخت اولین اپلیکیشن تعاملی با Vue.js (اپلیکیشن هواشناسی)

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

مراحل ساخت اپلیکیشن هواشناسی

ایجاد پروژه با Vue CLI

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

vue create weather-app
cd weather-app
npm run serve

ساخت کامپوننت اصلی (Weather.vue)

در این کامپوننت، یک فرم ساده برای وارد کردن نام شهر و نمایش وضعیت آب‌وهوا ایجاد می‌کنیم.

<template>
  <div class="weather-app">
    <h2>اپلیکیشن هواشناسی</h2>
    <input v-model="city" placeholder="نام شهر را وارد کنید" />
    <button @click="getWeather">نمایش وضعیت</button>

    <div v-if="weather">
      <h3>{{ weather.name }}</h3>
      <p>دمـا: {{ weather.main.temp }} °C</p>
      <p>وضعیت: {{ weather.weather[0].description }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: "",
      weather: null
    }
  },
  methods: {
    async getWeather() {
      const apiKey = "YOUR_API_KEY"; // کلید API از OpenWeatherMap
      const response = await fetch(
        `https://api.openweathermap.org/data/2.5/weather?q=${this.city}&units=metric&lang=fa&appid=${apiKey}`
      );
      this.weather = await response.json();
    }
  }
}
</script>

<style scoped>
.weather-app {
  max-width: 400px;
  margin: auto;
  text-align: center;
}
input {
  padding: 8px;
  margin: 10px;
}
button {
  padding: 8px 12px;
  cursor: pointer;
}
</style>

دریافت داده از API

در این مثال از سرویس OpenWeatherMap استفاده شده است. کافی است یک کلید API رایگان دریافت کنید و آن را در کد جایگزین کنید.

ویژگی‌های تعاملی

• کاربر نام شهر را وارد می‌کند.
• با کلیک روی دکمه، درخواست به API ارسال می‌شود.
• نتیجه شامل دما و وضعیت آب‌وهوا به‌صورت زنده نمایش داده می‌شود.

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

جمع‌بندی

Vue.js امروز یکی از محبوب‌ترین و قدرتمندترین فریمورک‌های فرانت‌اند است که با ترکیب سادگی، انعطاف‌پذیری و امکانات مدرن، توسعه وب را برای مبتدیان و حرفه‌ای‌ها به یک تجربه روان و لذت‌بخش تبدیل کرده است. از ویژگی‌هایی مانند کامپوننت‌های تک‌فایلی، مدیریت Props، بارگذاری تنبل و سیستم تست قدرتمند گرفته تا قابلیت‌های پیشرفته‌ای مثل SSR و ابزار Vue CLI، همه و همه نشان می‌دهند که Vue.js نه‌تنها برای پروژه‌های کوچک، بلکه برای اپلیکیشن‌های بزرگ و مقیاس‌پذیر نیز انتخابی هوشمندانه است.

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

در نهایت، یادگیری Vue.js یعنی سرمایه‌گذاری روی ابزاری که آینده توسعه فرانت‌اند را شکل می‌دهد؛ ابزاری که هم سبک و ساده است و هم به‌اندازه کافی قدرتمند تا نیازهای پیچیده‌ترین پروژه‌ها را برآورده کند.