ایجاد یک برنامه Vue ​

نمونه برنامه ​

هر برنامه Vue با ایجاد یک نمونه جدید برنامه با تابع createApp شروع می‌شود:

import { createApp } from 'vue'

const app = createApp({
  /* تنظیمات کامپوننت ریشه */
})

کامپوننت ریشه ​

آبجکتی که به createApp می‌دهیم در واقع یک کامپوننت است. هر برنامه نیاز به یک "کامپوننت ریشه" دارد که می‌تواند شامل سایر کامپوننت‌ها به عنوان فرزند باشد.

اگر از کامپوننت‌های تک فایلی استفاده می‌کنید (یعنی برای هر کامپوننت یک فایل جدا در نظر می‌گیرید)، معمولاً برای این حالت کامپوننت ریشه را از فایل دیگری وارد می‌کنیم:

import { createApp } from 'vue'
// می‌کنیم import را از یک کامپوننت تک فایلی App کامپوننت ریشه
import App from './App.vue'

const app = createApp(App)

در حالی که بسیاری از نمونه‌ها در این راهنما تنها به یک کامپوننت نیاز دارند، اکثر برنامه‌های واقعی به صورت درختی از کامپوننت‌های تودرتوی قابل استفاده مجدد سازماندهی می‌شوند. به عنوان مثال، درخت کامپوننت‌های یک برنامه Todo ممکن است به این شکل باشد:

App (root component)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

در بخش‌های بعدی راهنما، در مورد تعریف و ترکیب چندین کامپوننت با هم بحث خواهیم کرد. قبل از آن، روی آنچه در داخل یک کامپوننت واحد اتفاق می‌افتد تمرکز خواهیم کرد.

سوار کردن برنامه (mounting app) ​

یک نمونه برنامه تا زمانی که متد ‎.mount()‎ آن صدا زده نشود، چیزی render نمی‌کند. این متد انتظار یک آرگومان "container" دارد که می‌تواند یا یک عنصر DOM واقعی باشد یا یک رشته انتخابگر:

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

app.mount('#app')

محتوای کامپوننت ریشه برنامه داخل عنصر container ارائه خواهد شد. خود عنصر container به عنوان بخشی از برنامه در نظر گرفته نمی‌شود.

متد ‎.mount()‎ باید همیشه پس از انجام تمام پیکربندی‌ها و ثبت اجزاء برنامه صدا زده شود. همچنین توجه داشته باشید که مقدار بازگشتی آن، برخلاف متدهای ثبت اجزاء، نمونه کامپوننت ریشه است نه نمونه برنامه.

تمپلیت کامپوننت ریشه درون DOM ​

(یکی از قسمت های اصلی هر کامپوننت بخش template آن است.) تمپلیت برای کامپوننت ریشه معمولاً بخشی از خود کامپوننت است، اما ارائه تمپلیت به صورت جداگانه نیز با نوشتن آن مستقیماً درون container که قرار است mount شود امکان‌پذیر است:

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

Vue به طور خودکار از محتوای innerHTML مربوط به container به عنوان تمپلیت استفاده خواهد کرد اگر کامپوننت ریشه از قبل template نداشته باشد.

تمپلیت‌های درون DOM اغلب در برنامه‌هایی که از Vue بدون مرحله ساخت استفاده می‌کنند به کار می‌روند. همچنین می‌توانند همراه فریمورک‌های سمت سرور استفاده شوند که در آن‌ها تمپلیت ریشه ممکن است به صورت پویا توسط سرور تولید شود.

پیکربندی برنامه ​

نمونه برنامه، آبجکت ‎.config را در اختیار می‌گذارد که به ما اجازه می‌دهد چند گزینه در سطح برنامه را پیکربندی کنیم، به عنوان مثال، تعریف یک کنترل کننده خطا در سطح برنامه که خطاها از تمام کامپوننت‌های فرزند را بگیرد:

app.config.errorHandler = (err) => {
  /* handle error */
}

نمونه برنامه همچنین چند متد برای ثبت اجزاء در سطح برنامه ارائه می‌دهد. به عنوان مثال، ثبت یک کامپوننت:

app.component('TodoDeleteButton', TodoDeleteButton)

این کار TodoDeleteButton را برای استفاده در هر جای برنامه‌مان در دسترس قرار می‌دهد. در بخش‌های بعدی راهنما در مورد ثبت کامپوننت‌ها و سایر اجزاء بحث خواهیم کرد. همچنین می‌توانید فهرست کامل API‌های نمونه برنامه را در مرجع API آن بررسی کنید.

مطمئن شوید تمام پیکربندی‌های برنامه را قبل از mount کردن برنامه اعمال کنید!

چندین نمونه برنامه ​

شما محدود به یک نمونه برنامه در یک صفحه نیستید. createApp اجازه ایجاد چندین برنامه Vue مجزا را در یک صفحه می‌دهد که هر کدام محدوده خود را برای پیکربندی و منابع سراسری دارند:

const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

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