Vue
Lộ trình phát triển toàn diện Vue theo tiêu chuẩn quốc tế nilbuild/developer-roadmap
Hướng dẫn từng bước từ nền tảng đến chuyên sâu giúp bạn làm chủ Vue. Tích hợp tài liệu lý thuyết, bài viết thực chiến, video tham khảo và bài tập lập trình trực tiếp trên IDE.
Nền Tảng & Khái Niệm Cốt Lõi
Giai đoạn 1 tập trung hoàn thiện 17 chủ đề then chốt.
API Calls
There are several options available to make API calls from your Vue.js applications.
API Styles
API styles refer to the two different ways you can write Vue components: Options API and Composition API. The Options API uses a structured object with predefined properties like `data`, `methods`, and `mounted` to organize component logic. The Composition API, on the other hand, allows you to group related code using functions, providing more flexibility and better reuse of logic across larger applications.
Apollo
Apollo is a platform for building a unified graph, a communication layer that helps you manage the flow of data between your application clients (such as web and native apps) and your back-end services.
App Configurations
Every application instance exposes a `config` object that contains the configuration settings for that application. You can modify its properties before mounting your application.
Async Components
In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that possible, Vue has a `defineAsyncComponent` function.
Attribute Inheritance
Attribute inheritance aka "fallthrough attributes" is a feature of Vue.js that allows you to inherit attributes from a parent component.
Axios
Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers. The most common way for frontend programs to communicate with servers is through the HTTP protocol. You are probably familiar with the Fetch API and the XMLHttpRequest interface, which allows you to fetch resources and make HTTP requests.
Binding Events
Vue.js is an open-source Model–View–ViewModel front-end JavaScript framework for building user interfaces and single-page applications. Vue.js has many own directives for DOM manipulation such as v-bind, v-on, v-model, etc. Binding events is an essential part of creating interactive applications. You can bind events using the v-on directive or its shorthand, the @ symbol.
Capacitor
Since Vue.js is a web framework, it does not natively support mobile app development. So how do we get access to native mobile features such as the camera and geolocation? Ionic has an official native runtime called Capacitor. With Capacitor’s plugin, you can access the native API of the device your app is running on and build truly native mobile application with Ionic Vue.
Component Registration
A Vue component needs to be "registered" so that Vue knows where to locate its implementation when it is encountered in a template. There are two ways to register components: global and local.
Components
Components allow us to split the UI into independent and reusable pieces, and think about each piece in isolation.
Composition API
Vue offers many approaches for how to write components, including the "Composition API", which is most commonly used via "Script Setup". This approach is based around pulling in low level atomic functions used by Vue's reactivity engine. By composing these low level functions together, you can craft your own system for writing components. One feature this allows for is extending reactivity outside of components. This means you can extract your custom functions for reuse in multiple components. When reusing reactive logic, your functions are called "composables".
Computed Properties
In-template expressions are very convenient, but they are meant for simple operations. Putting too much logic in your templates can make them bloated and hard to maintain. Computed properties allow us to simplify the complex logic that includes reactive data.
Conditional Rendering
The directive `v-if` is used to conditionally render a block. The block will only be rendered if the directive's expression returns a truthy value.
create-vue
create-vue is a CLI tool that helps you create a new Vue project with a single command. It is a simple and easy-to-use tool that saves you time and effort when setting up a new Vue project.
Custom Directives
So far you may have covered two forms of code reuse in Vue: components and composables. Components are the main building blocks, while composables are focused on reusing stateful logic. Custom directives, on the other hand, are mainly intended for reusing logic that involves low-level DOM access on plain elements.
Cypress
Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework.
Kỹ Năng Trọng Tâm & Thực Hành
Giai đoạn 2 tập trung hoàn thiện 17 chủ đề then chốt.
Debugging
Debugging in Vue.js involves identifying and fixing issues in your Vue applications. It’s an essential part of the development process, and there are several tools and techniques you can use to effectively debug your Vue code.
Directives
Directives are special attributes with the `v-` prefix. Vue provides a number of built-in directives.
Element UI
Element UI is another Vue.js component library with several built-in components to style your Vue.js applications.
Error / Warn Handler
Debugging in Vue.js involves identifying and fixing issues in your Vue applications. It’s an essential part of the development process, and there are several tools and techniques you can use to effectively debug your Vue code.
Events Handling
When you build a dynamic website with Vue you'll most likely want it to be able to respond to events. For example, if a user clicks a button, submits a form, or even just moves their mouse, you may want your Vue site to respond somehow.
Event Modifiers
In Vue.js, event modifiers are special postfixes that you can add to event handlers to control the behavior of events more easily. They help simplify common tasks such as stopping propagation, preventing default actions, and ensuring that the event is triggered only under certain conditions.
Events
As we develop our applications we may need to communicate with the parent component in order to notify of some actions e.g. when a user clicks on a button. In order to do this we need to use events.
Fetch
The `fetch()` method in JavaScript is used to request to the server and load the information on the webpages. The request can be of any APIs that return the data of the format JSON or XML. This method returns a promise.
Formkit
FormKit helps build forms faster by simplifying form structure, generation, validation, theming, submission, error handling, and more.
Forms Handling
You can use the `v-model` directive to create two-way data bindings on form input elements. It automatically picks the correct way to update the element based on the input type.
Forms
Apart from the built-in form-binding support, there are several options available that allow for handling forms and data in much convenient manner.
Global Properties
Global properties allows you to add properties or methods that can be accessed throughout your application. This is particularly useful for sharing functionality or data across components without the need to pass props explicitly.
Inline / Method Handlers
In Vue.js, **inline handlers** are defined directly in the template using expressions, making them suitable for simple tasks. For example, you might use an inline handler to increment a counter. **Method handlers**, on the other hand, are defined in the `methods` option and are better for more complex logic or when reusing functionality across multiple components. They improve code readability and maintainability.
Input Bindings
Input bindings are a way to bind user input to a component's data. This allows the component to react to user input and update its state accordingly. Input bindings are typically used with form elements such as text inputs, checkboxes, and select dropdowns.
Key Modifiers
Input bindings are a way to bind user input to a component's data. This allows the component to react to user input and update its state accordingly. Input bindings are typically used with form elements such as text inputs, checkboxes, and select dropdowns.
Lifecycle Hooks
Each Vue component instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.
Mobile Apps
Building a mobile application with Vue.js is not impossible. In fact, you can build production-ready apps that look and feel like native mobile apps with Vue.js.
Kiến Trúc Nâng Cao & Tối Ưu
Giai đoạn 3 tập trung hoàn thiện 17 chủ đề then chốt.
Modifiers
Modifiers are special suffixes that can be added to directives (such as v-model and v-bind) to alter their behavior. Modifiers allow you to specify additional functionality or constraints to the binding, making it more flexible and powerful.
Mouse Button Modifiers
Mouse button modifiers are a type of modifier that can be used with event handlers to specify which mouse button or buttons should trigger the event. These modifiers allow you to customize the behavior of event handlers, such as v-on:click, to respond to specific mouse button clicks.
Nuxt.js
Nuxt.js is a free and open source JavaScript library based on Vue.js, Node.js, Webpack and Babel.js. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js.
Optimizing Renders
Optimizing rendering is crucial for ensuring a smooth and efficient user experience across all your frontend projects. Sluggish webpages can lead to frustration for users, and potentially cause them to entirely abandon your web application. This issue comes up most often in single-page applications (SPAs), where the entirety of your application is loaded within a single webpage, and updates to it are handled dynamically without needing a full reload of the webpage.
Options API
Vue offers many approaches for how to write components, including the Options API. It is the only API that is available in all versions of Vue. Its primary focus is on providing a consistent, clean, and organized approach to writing component logic. Each part of a component's logic is given a dedicated section (data, methods, computed, props, life-cycle hooks, etc). By putting the logic in the correct section it has access to the features of the framework automatically. With the official Vue ESLint plugin the order of these sections can be enforced across all components allowing developers to predictably locate any part of the component, even if they've never looked at the file before.
Vue.js Performance Optimization Overview
Key areas to improve Vue.js performance include lazy loading components to minimize initial load times, optimizing rendering to prevent unnecessary re-renders, implementing efficient state management using modern libraries like Pinia, reducing the bundle size by code splitting and tree shaking, utilizing virtual scrolling for large lists and tables, continuously monitoring performance to detect potential bottlenecks, and minimizing dependencies to decrease overall load.
Pinia
Pinia is a store library for Vue.js, and can be used in Vue 2 and Vue 3, with the same API, except in SSR and its installation. It allows state sharing between pages and components around the application. As the documentation says, it is extensible, intuitive (by organization), has devtools support (in Vue.js devtools), inferred typed state even in javascript and more. In Pinia you can access, mutate, replace, use getters that works like computed, use actions, etc. The library is recommended by the official Vue.js documentation.
Playwright
Playwright Test was created specifically to accommodate the needs of end-to-end testing. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Test on Windows, Linux, and macOS, locally or on CI, headless or headed with native mobile emulation of Google Chrome for Android and Mobile Safari.Playwright leverages the DevTools protocol to write powerful, stable automated tests.Playwright can actually see into and control the browser rather than relying on a middle translation layer, it allows for the simulation of more insightful and relevant user scenarios.
Plugins
Plugins are self-contained code that usually add app-level functionality to Vue.
Props
If we are building a blog, we will likely need a component representing a blog post. We want all the blog posts to share the same visual layout, but with different content. Such a component won't be useful unless you can pass data to it, such as the title and content of the specific post we want to display. That's where props come in.
Provide / Inject
Usually, when we need to pass data from the parent to a child component, we use props. However, imagine the case where we have a large component tree, and a deeply nested component needs something from a distant ancestor component. With only props, we would have to pass the same prop across the entire parent chain. We can solve props drilling with `provide` and `inject`.
Quasar
Quasar Framework is an open-source Vue.js based framework for building apps, with a single codebase, and deploy it on the Web as a SPA, PWA, SSR, to a Mobile App, using Cordova for iOS & Android, and to a Desktop App, using Electron for Mac, Windows, and Linux.
Rendering Lists
We can use the `v-for` directive to render a list of items based on an array. The `v-for` directive requires a special syntax in the form of `item in items`, where `items` is the source data array and `item` is an alias for the array element being iterated on.
Routing
Routing is an essential concept in Single Page Applications (SPA). When your application is divided into separated logical sections, and all of them are under their own URL, your users can easily share links among each other.
Single File Components
Vue Single-File Components (a.k.a. `*.vue` files, abbreviated as SFC) is a special file format that allows us to encapsulate the template, logic, and styling of a Vue component in a single file.
Slots
In some cases, we may want to pass a template fragment to a child component, and let the child component render the fragment within its own template. The `<slot>` element is a slot outlet that indicates where the parent-provided slot content should be rendered.
Static Site Generators
A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates. Essentially, a static site generator automates the task of coding individual HTML pages and gets those pages ready to serve to users ahead of time. Because these HTML pages are pre-built, they can load very quickly in users' browsers.
Hệ Sinh Thái & Triển Khai Thực Tế
Giai đoạn 4 tập trung hoàn thiện 17 chủ đề then chốt.
Server-side rendering
Server-side rendering refers to the process that the service side completes the HTML structure splicing of the page, sends it to the browser, and then binds the status and events for it to become a fully interactive page.
State Management
Application state management is the process of maintaining knowledge of an application's inputs across multiple related data flows that form a complete business transaction -- or a session -- to understand the condition of the app at any given moment. In computer science, an input is information put into the program by the user and state refers to the condition of an application according to its stored inputs -- saved as variables or constants. State can also be described as the collection of preserved information that forms a complete session.
Tailwind CSS
CSS Framework that provides atomic CSS classes to help you style components e.g. `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your markup.
TanStack Query
TanStack Query is a data fetching and caching library for Vue.js and React. It is a part of the TanStack ecosystem.
Teleport Components
Sometimes we may run into the following scenario: a part of a component's template belongs to it logically, but from a visual standpoint, it should be displayed somewhere else in the DOM, outside of the Vue application. This is where the `<Teleport>` component comes in.
Templates
Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
Transition Group
`<TransitionGroup>` is a built-in component designed for animating the insertion, removal, and order change of elements or components that are rendered in a list.
Transition
Transitions are a built-in mechanism that automatically applies CSS classes to elements or components when they enter or leave the DOM. By wrapping content in a special transition component, you can define specific styles for various stages of the animation process—such as the starting point, the active phase, and the finished state. This system simplifies the process of adding smooth visual effects by managing the timing and cleanup of transition classes automatically.
v-bind
The `v-bind` directive dynamically binds an HTML attribute to data. The shorthand for this directive is `:`
v-cloak
The v-cloak directive is used to prevent the uncompiled Vue template from being visible while the Vue instance is still loading. It temporarily hides the content until Vue has finished compiling the template. The v-cloak directive remains until the component instance is mounted.
v-else-if
This directive is used to add additional conditions to a v-if and v-else block.
v-else
The `v-else` conditionally renders an element or a template fragment as a function in case the `v-if` does not fulfil the condition.
v-for
The `v-for` directive is used to render an HTML element, a block of elements, or even a component based on an array, an object, or a set number of times. When using this directive it is important to assign a unique key to each item to avoid issues and improve performance. This directive follows the `item in items` syntax.
v-html
The `v-html` directive is similar to the `v-text` directive, but the difference is that `v-html` renders its content as HTML. This means that if you pass an HTML element it will be rendered as an element and not plain text. Since the content is render as HTML, it can pose a security risk if the content contains malicious JavaScript code. For this reason you should never use this directive in combination with user input, unless the input is first properly sanitized.
v-if
v-if is a directive used to conditionally render an element or a block based on the truthiness of an expression. When the expression evaluates to true, the element is added to the Document Object Model (DOM), and when it evaluates to false, the element is removed. This directive can also be paired with v-else-if and v-else to handle multiple conditional branches within a template.
v-model
v-model is a directive that creates a two-way data binding between a form input element and a piece of reactive state. It automatically syncs the value of the input with the corresponding data property, ensuring that whenever the user types into an input field, the underlying state updates, and whenever the state changes programmatically, the input display updates to match.
v-model
v-model is a directive that creates a two-way data binding between a form input element and a component's state. It automatically synchronizes the value shown in the input field with the corresponding data property in your script, ensuring that updates in the UI reflect in the application logic and vice versa. It serves as a shorthand for binding the value property and listening for input events, simplifying the management of user-provided data.
Chuyên Gia & Mở Rộng Hệ Thống
Giai đoạn 5 tập trung hoàn thiện 16 chủ đề then chốt.
v-model
v-model is a directive that allows you to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type.
v-on
The v-on directive is placed on an element to attach an event listener. To attach an event listener with v-on we need to provide the event type, and any modifier, and a method or expression that should run when that event occurs.
v-once
v-once is a built-in directive used to render an element or component only once and skip future updates during subsequent re-renders. Once the initial content is rendered, the data bindings are removed, meaning any changes to the associated data will not trigger updates to that specific part of the DOM. This can be useful for optimizing performance when dealing with static content that does not need to change after the initial load.
v-pre
`v-pre` is a directive used to tell Vue to skip the compilation process for a specific element and all of its children. By using this directive, any mustache-style syntax or Vue-specific expressions inside the element are displayed exactly as they are written in the source code rather than being processed by the framework. This is typically useful when displaying raw code snippets or large chunks of static content that do not require data binding.
v-show
`v-show` is similar to `v-if` in that it allows you to conditionally render components. However, it does not remove the component from the DOM and merely toggles its `display` CSS property to be `hidden`. It also does not work with `v-else-if` oe `v-else`. Prefer `v-show` over `v-if` if the component's visibility needs to change often, and `v-if` if not.
v-slot
The v-slot directive to define slots in components, allowing you to pass and render content dynamically inside a component. For named slots, you use v-slot with a specific slot name. This lets you pass different content to different parts of a component.
v-text
The `v-text` directive is used to set the textContent property of an element. It's important to note that when using this directive it will overwrite the HTML content inside the element. The expected input is a string, so it's important to wrap any text in single quotes.
VeeValidate
VeeValidate is a form validation library for Vue that allows you to handle input validation, error messages, and form state management with ease. It provides a set of components and composition functions that integrate directly into your templates, making it straightforward to define rules for your inputs and display reactive feedback to the user based on their interactions.
Vitepress
Vitepress is a static site generator that is built on top of Vite. It is a lightweight and fast static site generator that is designed to work with Vue 3. Vitepress is a great choice for building documentation sites, blogs, and other static sites.
Vitest
Vitest is a fast Vite-native unit test framework with out-of-box ESM and TypeScript support. It Works on React, Vue, Svelte and more projects created with Vite.
Vue Router
Vue Router is the official router for Vue.js which allows creating static/dynamic routes, has support for navigation interception, allows for component based configuration and much more.
Vue Testing Library
The Vue Testing Library is a very lightweight solution for testing Vue components. Its primary guiding principle is: The more your tests resemble the way your software is used, the more confidence they can give you.
Vuelidate
Vuelidate is a lightweight, model-based validation library for Vue applications that uses a decoupled approach to handle form validation. It allows you to define validation rules as simple JavaScript objects, which are then mapped to your component's data properties to track their validity status. This design keeps your template clean while providing granular control over error states, dirty fields, and custom validation logic without forcing specific UI patterns on your forms.
Vuetify
Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No design skills required — everything you need to create amazing applications is at your fingertips.
VueUse
VueUse is a collection of utility functions based on Composition API. It has over 200+ functions, is tree-shakable, has first-class TypeScript support, and has a small bundle size. VueUse is a great choice for adding common utilities to your Vue 3 projects.
Watchers
Computed properties allow us to declaratively compute derived values. However, there are cases where we need to perform "side effects" in reaction to state changes - for example, mutating the DOM, or changing another piece of state based on the result of an async operation. With Composition API, we can use the watch function to trigger a callback whenever a piece of reactive state changes.