Tạo Một Ứng Dụng Vue ​

Thể Hiện Ứng Dụng ​

Mọi ứng dụng Vue bắt đầu bằng cách tạo một thể hiện ứng dụng mới với hàm createApp:

import { createApp } from 'vue'

const app = createApp({
  /* các tùy chọn của component gốc */
})

Component Gốc ​

Đối tượng chúng ta đang truyền vào createApp thực sự là một component. Mỗi ứng dụng đều yêu cầu một "component gốc" có thể chứa các component khác như con của nó.

Nếu bạn đang sử dụng Single-File Components, thông thường chúng ta nhập component gốc từ một tệp khác:

import { createApp } from 'vue'
// nhập component gốc App từ một Single-File Component.
import App from './App.vue'

const app = createApp(App)

Trong khi nhiều ví dụ trong hướng dẫn này chỉ cần một component duy nhất, hầu hết ứng dụng thực tế được tổ chức thành một cây các component lồng nhau và có thể tái sử dụng. Ví dụ, cây component của một ứng dụng Todo có thể nhìn như sau:

App (component gốc)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

Trong các phần sau của hướng dẫn, chúng ta sẽ thảo luận về cách xác định và kết hợp nhiều component cùng nhau. Trước đó, chúng ta sẽ tập trung vào những gì xảy ra bên trong một component duy nhất.

Gắn Kết Ứng Dụng ​

Một thể hiện ứng dụng sẽ không hiển thị bất cứ thứ gì cho đến khi phương thức .mount() của nó được gọi. Nó mong đợi một đối số "container", có thể là một phần tử DOM thực tế hoặc một chuỗi chọn:

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

app.mount('#app')

Nội dung của component gốc của ứng dụng sẽ được hiển thị bên trong phần tử container. Chính phần tử container không được coi là một phần của ứng dụng.

Phương thức .mount() nên luôn được gọi sau khi tất cả các cấu hình ứng dụng và đăng ký tài nguyên đã được thực hiện. Lưu ý rằng giá trị trả về của nó, khác với các phương thức đăng ký tài nguyên, là thể hiện của component gốc thay vì thể hiện của ứng dụng.

Mẫu component Gốc Trong DOM ​

Mẫu cho component gốc thường là một phần của chính component, nhưng cũng có thể cung cấp mẫu một cách riêng biệt bằng cách viết trực tiếp bên trong container của gắn kết:

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

import { createApp } from 'vue'

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

app.mount('#app')

Vue sẽ tự động sử dụng innerHTML của container làm mẫu nếu component gốc không có tùy chọn template trước.

Mẫu trong DOM thường được sử dụng trong các ứng dụng sử dụng Vue mà không có bước xây dựng. Chúng cũng có thể được sử dụng kết hợp với các framework phía server, nơi mẫu gốc có thể được tạo động bởi máy chủ.

Cấu Hình Ứng Dụng ​

Thể hiện ứng dụng mở ra một đối tượng .config cho phép chúng ta cấu hình một số tùy chọn ở cấp ứng dụng, ví dụ như xác định một bộ xử lý lỗi cấp ứng dụng nắm giữ lỗi từ tất cả các component con:

app.config.errorHandler = (err) => {
  /* xử lý lỗi */
}

Thể hiện ứng dụng cũng cung cấp một số phương thức để đăng ký tài nguyên chỉ cụm ứng dụng. Ví dụ, đăng ký một component:

app.component('TodoDeleteButton', TodoDeleteButton)

Điều này khiến TodoDeleteButton có sẵn để sử dụng ở bất kỳ nơi nào trong ứng dụng của chúng ta. Chúng ta sẽ thảo luận về đăng ký cho component

và các loại tài nguyên khác trong các phần sau của hướng dẫn. Bạn cũng có thể xem toàn bộ danh sách các API của thể hiện ứng dụng trong tài liệu tham chiếu API.

Đảm bảo áp dụng tất cả các cấu hình ứng dụng trước khi gắn kết ứng dụng!

Nhiều Thể Hiện Ứng Dụng ​

Bạn không bị giới hạn chỉ một thể hiện ứng dụng trên cùng một trang. API createApp cho phép nhiều ứng dụng Vue tồn tại cùng một trang, mỗi cái với phạm vi cấu hình và tài nguyên toàn cục của nó:

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

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

Nếu bạn đang sử dụng Vue để tối ưu hóa HTML được render bởi máy chủ và chỉ cần Vue điều khiển các phần cụ thể của một trang lớn, tránh gắn kết một thể hiện ứng dụng Vue duy nhất trên toàn bộ trang. Thay vào đó, hãy tạo nhiều thể hiện ứng dụng nhỏ và gắn kết chúng vào các phần mà chúng chịu trách nhiệm.