Chào mừng đến với Cafedev! Trang web này sẽ đồng hành cùng bạn khám phá về Vuejs. Vuejs là một framework JavaScript được thiết kế để xây dựng giao diện người dùng trên web. Với sự hỗ trợ của Vuejs, bạn có thể phát triển các giao diện người dùng phức tạp một cách hiệu quả. Hãy cùng bắt đầu hành trình khám phá sức mạnh của Vuejs cùng với chúng tôi tại Cafedev!
Bạn đang đọc tài liệu cho Vue 3!
– Hỗ trợ Vue 2 đã kết thúc vào 31 Tháng 12, 2023. Tìm hiểu thêm về Vue 2 EOL.
– Đang nâng cấp từ Vue 2? Kiểm tra Hướng dẫn Di chuyển.
Nội dung chính
1. Vue là gì?
Vue (phát âm /vjuː/, như view) là một framework JavaScript để xây dựng giao diện người dùng. Nó dựa trên HTML, CSS và JavaScript tiêu chuẩn và cung cấp một mô hình lập trình dựa trên các thành phần mà giúp bạn phát triển giao diện người dùng một cách hiệu quả cho bất kỳ độ phức tạp nào.
Dưới đây là một ví dụ tối giản:
import { createApp } from 'vue'
createApp({
data() {
return {
count: 0
}
}
}).mount('#app')<div id="app">
<button @click="count++">
Count is: {{ count }}
</button>
</div>Ví dụ trên thể hiện hai tính năng cốt lõi của Vue:
– Rendering Khai báo: Vue mở rộng HTML tiêu chuẩn với cú pháp mẫu cho phép chúng ta mô tả HTML dựa trên trạng thái JavaScript một cách khai báo.
– Reactivity: Vue tự động theo dõi các thay đổi trạng thái JavaScript và cập nhật DOM một cách hiệu quả khi có thay đổi xảy ra.
Bạn có thể đã có câu hỏi – đừng lo lắng. Chúng tôi sẽ đề cập đến từng chi tiết trong phần còn lại của tài liệu. Trong lúc chờ đợi, hãy đọc tiếp để bạn có được một hiểu biết tổng quan về những gì Vue cung cấp.
Note: Tiền điều kiện Còn lại của tài liệu giả định bạn đã quen thuộc cơ bản với HTML, CSS và JavaScript. Nếu bạn hoàn toàn mới với phát triển frontend, có lẽ không phải là ý tưởng tốt nhất để bắt đầu ngay với một framework như bước đầu tiên của bạn – nắm vững cơ bản và quay lại sau! Bạn có thể kiểm tra mức độ hiểu biết của mình với các tổng quan này cho JavaScript, HTML và CSS nếu cần. Kinh nghiệm trước đó với các framework khác hữu ích, nhưng không bắt buộc.
2. Framework Tiến bộ
Vue là một framework và hệ sinh thái bao gồm hầu hết các tính năng phổ biến cần thiết trong phát triển frontend. Nhưng web rất đa dạng – những thứ chúng ta xây dựng trên web có thể thay đổi một cách đáng kể về hình thức và quy mô. Với điều đó trong tâm trí, Vue được thiết kế để linh hoạt và có thể áp dụng từng phần. Tùy thuộc vào trường hợp sử dụng của bạn, Vue có thể được sử dụng theo các cách khác nhau:
– Tăng cường HTML tĩnh mà không cần bước xây dựng
– Nhúng như các thành phần Web vào bất kỳ trang nào
– Ứng dụng Một Trang (SPA)
– Fullstack / Render ở Phía Máy Chủ (SSR)
– Jamstack / Tạo Trang Tĩnh (SSG)
– Định hướng desktop, di động, WebGL, và thậm chí là terminal
Nếu bạn thấy những khái niệm này làm bạn nao lòng, đừng lo lắng! Hướng dẫn và hướng dẫn chỉ yêu cầu kiến thức cơ bản về HTML và JavaScript, và bạn sẽ có thể theo dõi mà không cần phải là một chuyên gia trong bất kỳ trong số này.
Nếu bạn là một nhà phát triển có kinh nghiệm quan tâm đến cách tích hợp Vue vào ngăn xếp của bạn, hoặc bạn muốn biết những thuật ngữ này có ý nghĩa gì, chúng tôi thảo luận chúng chi tiết hơn trong Cách Sử Dụng Vue.
Mặc dù linh hoạt, kiến thức cốt lõi về cách Vue hoạt động được chia sẻ trên tất cả các trường hợp sử dụng này. Ngay cả khi bạn chỉ là một người mới bắt đầu, kiến thức thu được dọc đường sẽ vẫn hữu ích khi bạn phát triển để đối mặt với các mục tiêu tham vọng hơn trong tương lai. Nếu bạn là một chuyên gia, bạn có thể chọn cách tối ưu để tận dụng Vue dựa trên các vấn đề bạn đang cố gắng giải quyết, trong khi vẫn giữ nguyên hiệu suất làm việc. Đó là lý do tại sao chúng tôi gọi Vue là “Framework Tiến bộ”: đó là một framework có thể phát triển cùng bạn và điều chỉnh theo nhu cầu của bạn.
3. Các Thành Phần File Đơn
Trong hầu hết các dự án Vue có sử dụng công cụ xây dựng, chúng ta tạo ra các thành phần Vue bằng cách sử dụng định dạng tệp giống như HTML gọi là Single-File Component (còn được biết đến là tệp *.vue, viết tắt là SFC). Một SFC Vue, như tên gọi của nó, đóng gói logic của thành phần (JavaScript), mẫu (HTML), và kiểu dáng (CSS) trong một tệp duy nhất. Dưới đây là ví dụ trước đó, được viết trong định dạng SFC:
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<button @click="count++">Count is: {{ count }}</button>
<style scoped>
button {
font-weight: bold;
}
</style>SFC là một tính năng xác định của Vue và là cách khuyến nghị để tạo ra các thành phần Vue nếu trường hợp sử dụng của bạn cần một thiết lập xây dựng. Bạn có thể tìm hiểu thêm về cách và lý do của SFC trong phần dành riêng cho nó – nhưng bây giờ, chỉ cần biết rằng Vue sẽ xử lý tất cả các thiết lập công cụ xây dựng cho bạn.
4. Các Kiểu API
Các thành phần Vue có thể được tạo ra bằng hai kiểu API khác nhau: Options API và Composition API.
4.1 Options API
Với Options API, chúng ta xác định logic của một thành phần bằng cách sử dụng một đối tượng các tùy chọn như data, methods, và mounted. Các thuộc tính được xác định bằng các tùy chọn được tiết lộ trên this bên trong các hàm, mà trỏ đến thể hiện của thành phần:
<script>
export default {
// Properties returned from data() become reactive state
// and will be exposed on `this`.
data() {
return {
count: 0
}
},
// Methods are functions that mutate state and trigger updates.
// They can be bound as event handlers in templates.
methods: {
increment() {
this.count++
}
},
// Lifecycle hooks are called at different stages
// of a component's lifecycle.
// This function will be called when the component is mounted.
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>4.2 Composition API
Với Composition API, chúng ta xác định logic của một component bằng cách sử dụng các hàm API được nhập. Trong SFCs, Composition API thường được sử dụng với <script setup>. Thuộc tính setup là một gợi ý giúp Vue thực hiện các biến đổi thời gian biên dịch cho phép chúng ta sử dụng Composition API mà không cần nhiều boilerplate. Ví dụ, các import và các biến/hàm cấp độ cao được khai báo trong <script setup> có thể được sử dụng trực tiếp trong mẫu.
Dưới đây là cùng một component, với cùng một mẫu exact, nhưng sử dụng Composition API và <script setup> thay vì:
<script setup>
import { ref, onMounted } from 'vue'
// reactive state
const count = ref(0)
// functions that mutate state and trigger updates
function increment() {
count.value++
}
// lifecycle hooks
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<button @click="increment">Count is: {{ count }}</button>4.3 Nên Chọn Kiểu Nào?
Cả hai kiểu API đều có khả năng hoàn toàn đủ để xử lý các trường hợp sử dụng thông thường. Chúng là các giao diện khác nhau được hỗ trợ bởi cùng một hệ thống cơ bản. Trên thực tế, Options API được thực hiện dựa trên Composition API! Các khái niệm cơ bản và kiến thức về Vue được chia sẻ trên hai kiểu này.
Options API tập trung vào khái niệm của một “thể hiện thành phần” (this như trong ví dụ), thường phù hợp hơn với mô hình tư duy dựa trên lớp cho người dùng đến từ nền tảng ngôn ngữ OOP. Nó cũng dễ tiếp cận hơn đối với người mới bắt đầu bằng cách trừu tượng hóa các chi tiết về phản ứng và bắt buộc tổ chức mã thông qua các nhóm tùy chọn.
Composition API tập trung vào việc khai báo biến trạng thái phản ứng trực tiếp trong phạm vi hàm và kết hợp trạng thái từ nhiều hàm cùng nhau để xử lý sự phức tạp. Nó tự do hơn và yêu cầu hiểu biết về cách phản ứng hoạt động trong Vue để sử dụng một cách hiệu quả. Đổi lại, tính linh hoạt của nó cho phép các mẫu mạnh mẽ hơn cho việc tổ chức và tái sử dụng logic.
Bạn có thể tìm hiểu thêm về sự so sánh giữa hai kiểu và các lợi ích tiềm năng của Composition API trong Composition API FAQ.
Nếu bạn mới bắt đầu với Vue, đây là khuyến nghị tổng quát của chúng tôi:
- Về mục đích học tập, hãy chọn kiểu mà bạn cảm thấy dễ hiểu hơn. Một lần nữa, hầu hết các khái niệm cơ bản được chia sẻ giữa hai kiểu. Bạn luôn có thể học kiểu khác sau này.
- Về mục đích sử dụng sản xuất:
- Hãy chọn Options API nếu bạn không sử dụng công cụ xây dựng hoặc có kế hoạch sử dụng Vue chủ yếu trong các tình huống ít phức tạp, ví dụ như cải thiện dần dần.
- Hãy chọn Composition API + Single-File Components nếu bạn có kế hoạch xây dựng các ứng dụng đầy đủ bằng Vue.
Bạn không cần cam kết chỉ một kiểu trong giai đoạn học tập. Phần còn lại của tài liệu sẽ cung cấp các mẫu mã trong cả hai kiểu khi cần thiết
- Hãy chọn Composition API + Single-File Components nếu bạn có kế hoạch xây dựng các ứng dụng đầy đủ bằng Vue.
- Hãy chọn Options API nếu bạn không sử dụng công cụ xây dựng hoặc có kế hoạch sử dụng Vue chủ yếu trong các tình huống ít phức tạp, ví dụ như cải thiện dần dần.
5. Chọn Con Đường Học Tập Của Bạn
Mỗi nhà phát triển có phong cách học khác nhau. Hãy chọn một con đường học tập phù hợp với sở thích của bạn – tuy nhiên, chúng tôi khuyến khích bạn đọc qua tất cả nội dung, nếu có thể!
Cảm ơn bạn đã đồng hành cùng chúng tôi trên Cafedev để khám phá về Vuejs. Hy vọng rằng thông qua các tài liệu và hướng dẫn, bạn đã có cái nhìn tổng quan về sức mạnh và linh hoạt của Vuejs trong việc phát triển giao diện người dùng trên web. Hãy tiếp tục theo dõi chúng tôi để cập nhật những kiến thức mới nhất và chia sẻ kinh nghiệm về Vuejs cũng như các công nghệ khác trên Cafedev!
Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Vuejs từ cơ bản tới nâng cao
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!
