Improve Vue.js Roadmap (#7498)
* Phase - 1 * Phase - 2 * Phase - 3 * Phase - 4 * Phase - 6 * Phase - 7 (Final) * Update src/data/roadmaps/vue/content/v-else-if@a9caVhderJaVo0v14w8WB.md * Update src/data/roadmaps/vue/content/v-else@0CtAZQcFJexMiJfZ-mofv.md --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>pull/7516/head
Vedansh
1 month ago
committed by
GitHub
parent
5c0a5e2426
commit
ccc2cbd9c2
80 changed files with 208 additions and 132 deletions
@ -1,11 +1,9 @@ |
||||
# Axios |
||||
|
||||
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. |
||||
|
||||
Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers. |
||||
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. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Axios Getting Started](https://axios-http.com/docs/intro) |
||||
- [@official@Getting Started with Axios](https://axios-http.com/docs/intro) |
||||
- [@article@How to make HTTP requests with Axios](https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/#why) |
||||
- [@feed@Explore top posts about Axios](https://app.daily.dev/tags/axios?ref=roadmapsh) |
||||
|
||||
@ -1 +1,8 @@ |
||||
# 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. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Binding Events](https://vuejs.org/guide/essentials/event-handling) |
||||
- [@article@Vue.js Event Handling](https://www.geeksforgeeks.org/vue-js-event-handling/) |
||||
|
||||
@ -1,8 +1,9 @@ |
||||
# create-vue |
||||
|
||||
[create-vue](https://github.com/vuejs/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. |
||||
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. |
||||
|
||||
Learn more using the following resources: |
||||
|
||||
- [@article@Creating a Vue Project](https://cli.vuejs.org/guide/creating-a-project.html) |
||||
- [@opensource@vuejs/create-vue](https://github.com/vuejs/create-vue) |
||||
- [@official@Creating a Vue Project](https://cli.vuejs.org/guide/creating-a-project.html) |
||||
- [@feed@Explore top posts about Vue.js](https://app.daily.dev/tags/vuejs?ref=roadmapsh) |
||||
|
||||
@ -1,7 +1,9 @@ |
||||
# Custom Directives |
||||
|
||||
So far you may have covered two forms of code reuse in Vue: [components](https://vuejs.org/guide/essentials/component-basics.html) and [composables](https://vuejs.org/guide/reusability/composables.html). 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. |
||||
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. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Custom Directives](https://vuejs.org/guide/reusability/custom-directives.html) |
||||
- [@official@Custom Directives](https://vuejs.org/guide/reusability/custom-directives.html) |
||||
- [@official@Composables](https://vuejs.org/guide/reusability/composables.html) |
||||
- [@official@Components](https://vuejs.org/guide/essentials/component-basics.html) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# 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. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Debugging Documentation](https://vuejs.org/v2/cookbook/debugging-in-vscode.html) |
||||
|
||||
@ -1,7 +1,8 @@ |
||||
# Directives |
||||
|
||||
Directives are special attributes with the `v-` prefix. Vue provides a number of [built-in directives](https://vuejs.org/api/built-in-directives.html). |
||||
Directives are special attributes with the `v-` prefix. Vue provides a number of built-in directives. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Directives Documentation](https://vuejs.org/guide/essentials/template-syntax.html#directives) |
||||
- [@official@Directives Documentation](https://vuejs.org/guide/essentials/template-syntax.html#directives) |
||||
- [@official@Built-in Directives](https://vuejs.org/api/built-in-directives.html) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# 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. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Debugging Documentation](https://vuejs.org/v2/cookbook/debugging-in-vscode.html) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# 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. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Event Modifiers in Vue.js](https://www.freecodecamp.org/news/how-event-handling-works-in-vue-3-guide-for-devs/) |
||||
|
||||
@ -1,9 +1,9 @@ |
||||
# 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. |
||||
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. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Fetch MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) |
||||
- [@article@Fetch - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) |
||||
- [@article@Fetch W3school Docs](https://www.w3schools.com/jsref/api_fetch.asp) |
||||
- [@article@Network request - Fetch](https://javascript.info/fetch) |
||||
- [@article@Network Request - Fetch](https://javascript.info/fetch) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# 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. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Vue.js Global Properties](https://blog.logrocket.com/vue-js-globalproperties/) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# 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. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Method Handlers](https://v1.vuejs.org/guide/events.html) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# 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. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Input Bindings](https://vuejs.org/guide/essentials/forms) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# 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. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Input Bindings](https://vuejs.org/guide/essentials/forms) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# 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. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Modifiers](https://v2.vuejs.org/v2/guide/components-custom-events.html) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# 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. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Button Modifiers](https://medium.com/evolve-you/vue-3-keyboard-and-mouse-a4866d7d0e8) |
||||
|
||||
@ -1,10 +1,8 @@ |
||||
# Options API |
||||
|
||||
We use Options API in a Vue application to write and define different components. With this API, we can use options such as data, methods, and mounted. |
||||
|
||||
To state it simply, Options API is an old way to structure a Vue.JS application. Due to some limitations in this API, Composition API was introduced in Vue 3. |
||||
We use Options API in a Vue application to write and define different components. With this API, we can use options such as data, methods, and mounted. To state it simply, Options API is an old way to structure a Vue.JS application. Due to some limitations in this API, Composition API was introduced in Vue 3. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html) |
||||
- [@article@Options API Documentation](https://vuejs.org/api/#options-api) |
||||
- [@official@TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html) |
||||
- [@official@Options API Documentation](https://vuejs.org/api/#options-api) |
||||
|
||||
@ -1,3 +1,8 @@ |
||||
# 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. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Routing in Vue.js](https://vuejs.org/guide/scaling-up/routing.html) |
||||
- [@official@The Vue Router](https://router.vuejs.org/) |
||||
|
||||
@ -1,22 +1,23 @@ |
||||
# 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 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. |
||||
|
||||
The v-cloak directive remains until the component instance is mounted. |
||||
```vue |
||||
```html |
||||
<div v-cloak> |
||||
{{ message }} |
||||
</div> |
||||
``` |
||||
|
||||
Combined with CSS, you can hide elements with v-cloak until they are ready. |
||||
|
||||
```css |
||||
[v-cloak] { |
||||
display: none; |
||||
} |
||||
``` |
||||
|
||||
The `<div>` will not be visible until the compilation is done. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@v-cloak documentation](https://vuejs.org/api/built-in-directives.html#v-cloak) |
||||
- [@official@v-cloak Documentation](https://vuejs.org/api/built-in-directives.html#v-cloak) |
||||
|
||||
@ -1,5 +1,5 @@ |
||||
# v-model |
||||
|
||||
The v-model directive in Vue.js is used for creating two-way data bindings on form input elements, such as <input>, <textarea>, and <select>. This means that the data can be updated in the component when the user inputs something, and the UI will update if the data in the component changes. |
||||
The v-model directive in Vue.js is used for creating two-way data bindings on form input elements, such as `<input>`, `<textarea>`, and `<select>`. This means that the data can be updated in the component when the user inputs something, and the UI will update if the data in the component changes. |
||||
|
||||
- [@article@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html) |
||||
- [@official@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# 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. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@v-on Directive](https://www.w3schools.com/vue/ref_v-on.php) |
||||
|
||||
@ -1,9 +1,7 @@ |
||||
# 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-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. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Vue Conditional Rendering Docs](https://vuejs.org/guide/essentials/conditional.html#v-show) |
||||
- [@official@Vue Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html#v-show) |
||||
|
||||
@ -1,9 +1,7 @@ |
||||
# 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. |
||||
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. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Watchers in Vue.js](https://vuejs.org/guide/essentials/watchers.html) |
||||
- [@official@Watchers in Vue.js](https://vuejs.org/guide/essentials/watchers.html) |
||||
|
||||
Loading…
Reference in new issue