Ebook Trở Thành Một Ninja Với Vue 3 (Pro Pack) [Update 2025] [PDF, EPUB, HTML + CODE] [9446E]
Sách điện tử này giúp bạn nắm được triết lý của Vue 3 (hiện tại 3.5.13), các công cụ mới (như TypeScript, Vite, esbuild...), các thư viện thiết yếu (vue-router, @vue/test-utils, axios...), và từng phần của framework theo cách thực tế. Bạn sẽ có thể khởi động project của mình vào cuối bài đọc và xây dựng các ứng dụng tuyệt vời của mình!
Nếu bạn muốn tìm hiểu sâu hơn, Gói Pro có sẵn với các bài tập để hiểu từng bước xây dựng ứng dụng. Điều đó có nghĩa là rất nhiều code sample thực tế, các bài test cho từng bước, các thông lệ tốt cho mọi trường hợp sử dụng phổ biến và tiết kiệm hàng chục giờ cho project tiếp theo của bạn!
Tất cả các ví dụ đều sử dụng TypeScript và Composition API để xây dựng một ứng dụng hoàn chỉnh với router, forms, HTTP calls, test, v.v.
Trong cuốn sách này, chúng tôi đi sâu vào:
Tương lai của JavaScript:
Các ứng dụng Vue.js có thể được viết bằng JavaScript thông thường nhưng tốt hơn nhiều khi sử dụng các tính năng ECMAScript 6 hoặc thậm chí tốt hơn: type-safety của TypeScript. Một số chương dành riêng cho các chủ đề này để hiểu chúng và viết beautiful code.
Philosophy:
Vue.js là một JavaScript framework hiện đại được tích hợp nhiều tính năng tuyệt vời: chúng ta sẽ khám phá templating syntax, lựa chọn kiến trúc, routing, test, form, v.v.
Best practices:
Sách điện tử và các bài tập này là kết quả của vô số giờ dành cho các dự án khác nhau. Chúng chứa tất cả các phương pháp hay nhất mà chúng tôi đã gặp. Chúng tôi đã tiết kiệm được rất nhiều thời gian nếu có cuốn sách đó khi bắt đầu! Chúng tôi sẽ xem xét về kickstarting, tests, code organisation, các tip for production và nhiều hơn nữa!
Components:
Toàn bộ framework hướng đến component. Vue.js có một hệ sinh thái các thư viện component và plugin phát triển mỗi ngày. Ai mà không cần chart, map, timepicker hoặc data-grid?
Tests:
Như thường lệ, chúng ta sẽ dành thời gian nói về các bài test và các chiến lược testing. Và nếu bạn chọn Pro Pack, bạn sẽ có hàng chục ví dụ unit và end-to-end test cho mọi phần của ứng dụng của bạn. Điều này sẽ đảm bảo code của bạn mạnh mẽ và đáng tin cậy!
Performance:
Vue.js team đã làm một công việc đáng kinh ngạc về mặt hiệu suất. Chúng ta sẽ xem cách thức hoạt động bên trong, chúng ta có thể làm gì để tiến xa hơn và tạo ra các ứng dụng cực nhanh.
Mục lục:
Chương 1. Giới thiệu.
Chương 2. Giới thiệu sơ lược về ECMAScript 2015+:
- ✓ Transpilers.
- ✓ let.
- ✓ Constants.
- ✓ Shorthands trong object creation.
- ✓ Destructuring assignment.
- ✓ Default parameters & values.
- ✓ Rest operator.
- ✓ Classes.
- ✓ Promises.
- ✓ Arrow functions.
- ✓ Async/await.
- ✓ Sets & Maps.
- ✓ Template literals.
- ✓ Modules.
- ✓ Kết luận.
Chương 3. Đi xa hơn ES2015+:
- ✓ Dynamic, static & optional type.
- ✓ Enters TypeScript.
Chương 4. Đi sâu vào TypeScript:
- ✓ Types as in TypeScript.
- ✓ Enums.
- ✓ Return types.
- ✓ Interfaces.
- ✓ Optional arguments.
- ✓ Functions as property.
- ✓ Classes.
- ✓ Làm việc với các thư viện khác.
Chương 5. TypeScript nâng cao:
- ✓ readonly.
- ✓ keyof.
- ✓ Mapped type.
- ✓ Union types & type guards.
Chương 6. Vùng đất tuyệt vời của Web Components:
- ✓ Brave new world.
- ✓ Custom elements.
- ✓ Shadow DOM.
- ✓ Template.
- ✓ Các Framework trên top of Web Components.
Chương 7. Nắm bắt philosophy của Vue.
Chương 8. Từ zero đến something:
- ✓ Progressive framework.
- ✓ Vue CLI.
- ✓ Bundlers: Webpack, Rollup, esbuild.
- ✓ Vite.
- ✓ create-vue.
- ✓ Single File Components.
Chương 9. Templating syntax:
- ✓ Interpolation.
- ✓ Sử dụng các component khác trong templates của chúng tôi.
- ✓ Property binding với v-bind.
- ✓ Events với v-on.
- ✓ Templates & TypeScript.
- ✓ Tóm tắt.
Chương 10. Directives:
- ✓ Conditions trong templates với v-if.
- ✓ Hide content với v-show.
- ✓ Render only once với v-once.
- ✓ Repeating elements với v-for.
- ✓ HTML content với v-html.
- ✓ Raw content với v-pre.
- ✓ Các Directive khác.
Chương 11. Cách build các component:
- ✓ Reactive property với ref.
- ✓ Reactive property với reactive.
- ✓ ref hoặc reactive.
- ✓ Derive state với computed.
- ✓ Execute một side effect với watchEffect & watch.
- ✓ Passing props to components.
- ✓ Custom events với emit.
- ✓ Lifecycle functions.
Chương 12. Style các component của bạn:
- ✓ Scoped styles.
- ✓ Module styles.
- ✓ v-bind trong CSS.
- ✓ v-deep, v-global & v-slotted.
- ✓ PostCSS.
- ✓ CSS Pre-processors.
Chương 13. Composition API:
- ✓ Clean design với Composition API.
- ✓ Trích xuất logic phổ biến đang được sử dụng…!
- ✓ Composition API outside of components.
- ✓ Một community example: VueUse.
Chương 14. Nhiều cách để define component:
- ✓ Options API.
- ✓ Composition API.
- ✓ Script setup.
- ✓ Class API.
Chương 15. Script setup syntax:
- ✓ Migrate một component.
- ✓ Implicit return.
- ✓ defineProps.
- ✓ defineEmits.
- ✓ defineOptions.
- ✓ Closed by default & defineExpose.
Chương 16. Testing ứng dụng của bạn:
- ✓ Vấn đề với việc khắc phục sự cố là sự cố sẽ quay trở lại.
- ✓ Unit test.
- ✓ Vitest.
- ✓ @vue/test-utils.
- ✓ Snapshot testing.
- ✓ End-to-end tests (e2e).
- ✓ Cypress.
Chương 17. Gửi và nhận dữ liệu thông qua HTTP:
- ✓ Get data.
- ✓ Các tùy chọn nâng cao.
- ✓ Interceptors.
- ✓ Tests.
Chương 18. Slots:
- ✓ Content projection với slot.
- ✓ Named slot.
- ✓ Default content.
- ✓ Slot props.
- ✓ Typed slots with defineSlots.
Chương 19. Suspense:
- ✓ Hiển thị một fallback content.
- ✓ Error handling với onErrorCaptured.
- ✓ Suspense events.
- ✓ Suspense vs onMounted.
- ✓ script setup & await.
Chương 20. Router:
- ✓ En route.
- ✓ Navigation.
- ✓ Parameters.
- ✓ Router & Suspense.
- ✓ Passing parameters as props.
- ✓ Redirects.
- ✓ Route matching.
- ✓ Nested routes.
- ✓ Navigation guards.
- ✓ Meta information.
Chương 21. Lazy-loading:
- ✓ Async components.
- ✓ Async components & Suspense.
- ✓ Lazy-loading với the router.
- ✓ Nhóm các component trong cùng một bundle.
Chương 22. Forms:
- ✓ v-model directive.
- ✓ Better forms với VeeValidate.
- ✓ Custom form components.
- ✓ defineModel macro.
Chương 23. Provide/inject:
- ✓ Một cách để tránh props drilling.
- ✓ Testing components với inject.
- ✓ Hierarchical providers.
- ✓ Plugins & provide/inject.
Chương 24. State management:
- ✓ Store pattern.
- ✓ Flux-like libraries.
- ✓ Vuex.
- ✓ Pinia.
- ✓ Testing Pinia.
- ✓ Tại sao nên sử dụng store?
Chương 25. Animations & transition effects:
- ✓ Pure CSS animations.
- ✓ Enter/leave transitions.
- ✓ List transitions.
- ✓ Và nhiều hơn thế nữa!
Chương 26. Các component pattern nâng cao:
- ✓ Template references với useTemplateRef.
- ✓ Component references.
- 27. Teleport (Sắp ra mắt).
Chương 28. Custom directives:
- ✓ Lifecycle hooks.
- ✓ Directive value.
- ✓ Directive argument.
- ✓ Directive modifiers.
Chương 29. Internationalization:
- ✓ vue-i18n setup.
- ✓ Translating text.
- ✓ Message parameters.
- ✓ Pluralization.
- ✓ Changing locale.
- ✓ Formatting.
- ✓ Các tính năng khác (lazy-loading, Vite support, v.v).
Chương 30. Under the hood:
- ✓ Rendering changes.
- ✓ Template compilation.
- ✓ Virtual DOM.
- ✓ JSX.
- ✓ Reactivity.
Chương 31. Performance:
- ✓ First load.
- ✓ Asset sizes.
- ✓ Gói ứng dụng của bạn.
- ✓ Tree-shaking.
- ✓ Minification & dead code elimination.
- ✓ Các asset khác.
- ✓ Compression.
- ✓ Lazy-loading.
- ✓ Server side rendering.
- ✓ Caching for reloads.
- ✓ Runtime performances.
- ✓ key in v-for.
- ✓ v-memo.
Chương 32. Đi vào production (Sắp ra mắt).
Chương 33. Chương kết thúc.
Danh sách bài tập:
Sau đây là tất cả các bài học bạn có thể thực hiện với Gói Pro.
- ✓ 0. Bắt đầu: Hãy cùng generate project skeleton và bắt đầu cuộc phiêu lưu của chúng ta!
- ✓ 1. Templates: Tìm hiểu thêm một chút về các component và templating syntax với một new component cho responsive menu.
- ✓ 2. List of races: Tạo một new component để hiển thị danh sách các cuộc đua.
- ✓ 3. Race detail: Hiển thị thông tin chi tiết về cuộc đua một cách thân thiện hơn, kèm theo danh sách các chú ngựa con.
- ✓ 4. Computed properties: Sử dụng computed properties trong các component của bạn.
- ✓ 5. Pony component: Thêm một nice pony component, có hình ảnh nghệ thuật 8-bit tuyệt đẹp và một custom event.
- ✓ 6. Lifecycle hooks: Chúng ta hãy trích xuất một số logic và sử dụng nó trong onMounted hook.
- ✓ 7. Script setup: Script setup syntax rất tuyệt vời, hãy sử dụng nó nhé!
- ✓ 8. HTTP: Fetch data thông qua HTTP từ Ponyracer REST API.
- ✓ 9. Slots: Build các UI component nâng cao với slots.
- ✓ 10. Suspense: Xử lý loading of data với class.
- ✓ 11. Router: Có các URL đẹp mắt phản ánh nội dung được hiển thị bằng Vue Router.
- ✓ 12. Register form: Xây dựng form đầu tiên của chúng ta bằng cách sử dụng v-model.
- ✓ 13. Login form: Thêm một số validation và error với vee-validate.
- ✓ 14. Custom validators trong form: Add validation với built-in và custom validator
- ✓ 15. State management: Hiển thị người dùng đã đăng nhập và score của người dùng đó với sự trợ giúp của Store pattern.
- ✓ 16. Remember me & logout: Phải đăng nhập mỗi lần thật là phiền phức: hãy nhớ người dùng của chúng ta cho lần sau! Chúng ta cũng cần một cách để đăng xuất người đó.
- ✓ 17. State management với Pinia: Hãy cùng refactor state management của chúng ta để sử dụng Pinia.
- ✓ 18. Transitions: Thêm một số hiệu ứng chuyển tiếp đẹp mắt vào ứng dụng của chúng ta.
- ✓ 19. HTTP với authentication: Một số REST endpoint được bảo mật: hãy xem chúng ta cần làm gì để call chúng và cách sử dụng interceptor. Ngoài ra còn có một chút giới thiệu về JSON Web Token.
- ✓ 20. Websockets: Hiển thị cuộc đua trực tiếp với dữ liệu thời gian thực từ server thông qua WebSockets!
- ✓ 21. Boost một pony: Chúng ta có thể tạo ra một chú ngựa con nhanh hơn nhiều bằng cách nhấp vào nó: một lý do chính đáng để thêm một vài rainbow và học một mẹo testing.
- ✓ 22. Reactive user score: User score của chúng ta sẽ được cập nhật theo thời gian thực. Một trường hợp sử dụng khác cho state management của chúng ta bằng Websocket.
- ✓ 23. Protected routes với guards: Hãy sử dụng guards để bảo vệ các phần của ứng dụng.
- ✓ 24. Nested views và redirections: Một ứng dụng thực tế thường có nhiều nested view và redirection.
- ✓ 25. Lazy loading: Router có thể lazy-load các phần của ứng dụng. Hãy cùng xem cách thực hiện!
- ✓ 26. Charts trong ứng dụng của bạn: Mỗi ứng dụng chuyên nghiệp đều có biểu đồ riêng. Hãy cùng xem Vue có thể play với Chart.js như thế nào.
- ✓ 27. Custom directive: Tìm hiểu cách build một custom directive để đơn giản hóa các template của chúng ta.
- ✓ 28. Internationalization: Localization, pluralization và translations trong Vue.
- ✓ 29. Performance trick (Sắp có): Vue rất nhanh, nhưng vẫn còn một số thủ thuật cần học để làm cho ứng dụng của chúng ta nhanh hơn.
- ✓ 30. Đi vào production (Sắp có): Bước cuối cùng để deliver ứng dụng của chúng ta! Chúng tôi cần làm gì để ra mắt sản phẩm?
LƯU Ý: Pass mở file pdf là mật khẩu giải nén chung của tài liệu !