Chào mừng đến với Cafedev! Trong thế giới phát triển web ngày nay, VueJS đã trở thành một công cụ quan trọng trong việc tạo ra các ứng dụng web linh hoạt và mạnh mẽ. Trong bài viết này, chúng ta sẽ cùng tìm hiểu về cách tạo một ứng dụng Vue cơ bản. Từ việc cài đặt đến việc tạo và gắn kết ứng dụng Vue trên trang web. Hãy cùng khám phá cách sử dụng Vue để tạo ra những trải nghiệm web động và tương tác.
Nội dung chính
1. instance của ứng dụng
Mỗi ứng dụng Vue bắt đầu bằng việc tạo một thể hiện ứng dụng(instance) mới với hàm createApp:
import { createApp } from 'vue'
const app = createApp({
/* root component options */
})2. Thành phần gốc(root)
Đối tượng chúng ta truyền vào createApp thực tế là một thành phần. Mỗi ứng dụng đều cần một “thành phần gốc” có thể chứa các thành phần khác là con của nó.
Nếu bạn đang sử dụng Các Thành Phần Đơn Tệp, chúng ta thường import thành phần gốc từ một tệp khác:
import { createApp } from 'vue'
// import the root component App from a 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 thành phần duy nhất, hầu hết các ứng dụng thực sự được tổ chức thành một cây các thành phần lồng nhau, có thể tái sử dụng. Ví dụ, cây thành phần của một ứng dụng Todo có thể nhìn như sau:
App (root component)
├─ 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 thành phần với nhau. Trước đó, chúng ta sẽ tập trung vào những gì xảy ra bên trong một thành phần duy nhất.
3. Gắn kết ứng dụng
Một thể hiện(instance) ứng dụng sẽ không hiển thị bất cứ điều 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 sự hoặc một chuỗi chọn:
<div id="app"></div>app.mount('#app')Nội dung của thành phần gốc(root) của ứng dụng sẽ được hiển thị bên trong phần tử container. Phần tử container chính nó không được coi là một phần của ứng dụng.
Phương thức .mount() luôn nê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 hoàn thành. Cũng 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 thành phần gốc thay vì thể hiện của ứng dụng.
4. Mẫu Thành Phần Gốc Trong DOM
Mẫu cho thành phần gốc thường là một phần của chính thành phần đó, 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 phần tử 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 như mẫu nếu thành phần gốc chưa có tùy chọn template.
template trong DOM thường được sử dụng trong các ứng dụng không sử dụng nó. Chúng cũng có thể được sử dụng kết hợp với các framework phía máy chủ, nơi template gốc có thể được tạo ra động bởi máy chủ.
5. Cấu hình ứng dụng
Thể hiện(instance) ứng dụng tiếp cận 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ụ, xác định một trình xử lý lỗi cấp ứng dụng để ghi lại các lỗi từ tất cả các thành phần con:
app.config.errorHandler = (err) => {
/* handle error */
}Thể hiện ứng dụng cũng cung cấp một số phương thức để đăng ký tài nguyên cấp ứng dụng. Ví dụ, đăng ký một thành phần:
app.component('TodoDeleteButton', TodoDeleteButton)Điều này làm cho TodoDeleteButton có sẵn để sử dụng ở bất kỳ đâu trong ứng dụng của chúng ta. Chúng ta sẽ thảo luận về việc đăng ký cho các thành phần 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 danh sách đầy đủ các API của thể hiện ứng dụng trong tài liệu tham khảo API.
Đảm bảo áp dụng tất cả cấu hình ứng dụng trước khi gắn kết ứng dụng!
6. 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 lúc trên cùng một trang, mỗi ứng dụng có phạm vi cấu hình và tài nguyên toàn cục riêng:
const app1 = createApp({
/* ... */
})
app1.mount('#container-1')
const app2 = createApp({
/* ... */
})
app2.mount('#container-2')Nếu bạn đang sử dụng Vue để tăng cường HTML được render trên 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, hãy tránh việc gắn một trường hợp ứng dụng Vue duy nhất trên toàn bộ trang. Thay vào đó, tạo nhiều trường hợp ứng dụng nhỏ và gắn chúng trên các phần tử mà chúng đảm nhận trách nhiệm.
Trên Cafedev, chúng ta đã cùng nhau khám phá và học hỏi về cách tạo một ứng dụng Vue cơ bản. Từ việc cài đặt VueJS đến việc tạo và gắn kết ứng dụng Vue trên trang web, chúng ta đã có một hành trình thú vị và bổ ích. Hy vọng rằng những kiến thức và kỹ năng mà chúng ta đã thu được sẽ giúp ích cho các dự án phát triển web trong tương lai. Đừng quên tiếp tục theo dõi Cafedev để cập nhật thêm nhiều thông tin hữu ích về công nghệ và lập trình!
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
