diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/angular_building/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/angular_building/index.md index 6bd207beb17d52f..5b6d4ae9369c1bd 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/angular_building/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/angular_building/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenu("Learn_web_development/Core/Frameworks_libraries/Angular_filtering", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Angular articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + This final Angular article covers how to build an app ready for production, and provides further resources for you to continue your learning journey. diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/angular_filtering/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/angular_filtering/index.md index 1200e796b56d7ce..aa1736681dba834 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/angular_filtering/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/angular_filtering/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Angular_item_component","Learn_web_development/Core/Frameworks_libraries/Angular_building", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Angular articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + Now let's move on to adding functionality to allow users to filter their to-do items, so they can view active, completed, or all items.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/angular_getting_started/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/angular_getting_started/index.md index f6e9b7962d90c6c..21d50c7d50773ad 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/angular_getting_started/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/angular_getting_started/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{NextMenu("Learn_web_development/Core/Frameworks_libraries/Angular_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Angular articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + It is now time to look at Google's Angular framework, another popular option that you'll come across often. In this article we look at what Angular has to offer, install the prerequisites and set up a sample app, and look at Angular's basic architecture. > [!NOTE] diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/angular_item_component/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/angular_item_component/index.md index cc7f97e68f120b9..03c671f80e2c2d9 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/angular_item_component/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/angular_item_component/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Angular_styling","Learn_web_development/Core/Frameworks_libraries/Angular_filtering", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Angular articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + Components provide a way for you to organize your application. This article walks you through creating a component to handle the individual items in the list, and adding check, edit, and delete functionality. The Angular event model is covered here.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/angular_styling/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/angular_styling/index.md index 6f8fb9a2b05de7f..4e502c4146b9b98 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/angular_styling/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/angular_styling/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Angular_todo_list_beginning","Learn_web_development/Core/Frameworks_libraries/Angular_item_component", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Angular articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + Now that we've got our basic application structure set up and started displaying something useful, let's switch gears and spend an article looking at how Angular handles styling of applications.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/angular_todo_list_beginning/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/angular_todo_list_beginning/index.md index 8fae7a23735b82c..2781bb90928972c 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/angular_todo_list_beginning/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/angular_todo_list_beginning/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Angular_getting_started","Learn_web_development/Core/Frameworks_libraries/Angular_styling", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Angular articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + At this point, we are ready to start creating our to-do list application using Angular. The finished application will display a list of to-do items and includes editing, deleting, and adding features. In this article you will get to know your application structure, and work up to displaying a basic list of to-do items.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/ember_conditional_footer/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/ember_conditional_footer/index.md index c3da654508e53d8..665506249502841 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/ember_conditional_footer/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/ember_conditional_footer/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Ember_interactivity_events_state","Learn_web_development/Core/Frameworks_libraries/Ember_routing", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Ember articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e., where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/ember_getting_started/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/ember_getting_started/index.md index fdd5d8cab8d9a79..6f50b266ef29eee 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/ember_getting_started/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/ember_getting_started/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{NextMenu("Learn_web_development/Core/Frameworks_libraries/Ember_structure_componentization", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Ember articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/ember_interactivity_events_state/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/ember_interactivity_events_state/index.md index 58be42b182729e0..1652c13ec6126ed 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/ember_interactivity_events_state/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/ember_interactivity_events_state/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Ember_structure_componentization","Learn_web_development/Core/Frameworks_libraries/Ember_conditional_footer", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Ember articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/ember_resources/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/ember_resources/index.md index 3a2429069af4803..8ad260accaf49d0 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/ember_resources/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/ember_resources/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenu("Learn_web_development/Core/Frameworks_libraries/Ember_routing", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Ember articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/ember_routing/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/ember_routing/index.md index 28a7a630b590cfb..1f6736cefbd772d 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/ember_routing/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/ember_routing/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Ember_conditional_footer","Learn_web_development/Core/Frameworks_libraries/Ember_resources", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Ember articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + In this article we learn about **routing**, or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/ember_structure_componentization/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/ember_structure_componentization/index.md index 552777a1428b67c..d1143b03e33e83f 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/ember_structure_componentization/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/ember_structure_componentization/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Ember_getting_started","Learn_web_development/Core/Frameworks_libraries/Ember_interactivity_events_state", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Ember articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/index.md index 75ac411797525db..0859a6f7b67a044 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/index.md @@ -62,6 +62,9 @@ Your code will be richer and more professional as a result, and you'll be able t ## Other framework choices +> [!NOTE] +> This section of MDN is no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + ### Ember tutorials > [!NOTE] diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_components/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_components/index.md index 1dcc38b59646742..3f3a56949de0b8b 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_components/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_components/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_variables_props","Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Svelte articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + In the last article we started developing our to-do list app. The central objective of this article is to look at how to break our app into manageable components and share information between them. We'll componentize our app, then add more functionality to allow users to update existing components.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_deployment_next/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_deployment_next/index.md index 38bc03d2e3e4830..3613f090ea35b0c 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_deployment_next/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_deployment_next/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenu("Learn_web_development/Core/Frameworks_libraries/Svelte_TypeScript", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Svelte articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + In the previous article we learned about Svelte's TypeScript support, and how to use it to make your application more robust. In this final article we will look at how to deploy your application and get it online, and also share some of the resources that you should go on to, to continue your Svelte learning journey.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_getting_started/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_getting_started/index.md index ec3f29920990f28..c678e82a789feef 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_getting_started/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_getting_started/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{NextMenu("Learn_web_development/Core/Frameworks_libraries/Svelte_Todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Svelte articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + In this article we'll provide a quick introduction to the [Svelte framework](https://svelte.dev/). We will see how Svelte works and what sets it apart from the rest of the frameworks and tools we've seen so far. Then we will learn how to set up our development environment, create a sample app, understand the structure of the project, and see how to run it locally and build it for production.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_reactivity_lifecycle_accessibility/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_reactivity_lifecycle_accessibility/index.md index d954d2f068b9006..e369e4b967df4f8 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_reactivity_lifecycle_accessibility/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_reactivity_lifecycle_accessibility/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_components","Learn_web_development/Core/Frameworks_libraries/Svelte_stores", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Svelte articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + In the last article we added more features to our to-do list and started to organize our app into components. In this article we will add the app's final features and further componentize our app. We will learn how to deal with reactivity issues related to updating objects and arrays. To avoid common pitfalls, we'll have to dig a little deeper into Svelte's reactivity system. We'll also look at solving some accessibility focus issues, and more besides.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_stores/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_stores/index.md index fb397fc9f06a942..01f5abb01ea2c98 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_stores/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_stores/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility","Learn_web_development/Core/Frameworks_libraries/Svelte_TypeScript", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Svelte articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + In the last article we completed the development of our app, finished organizing it into components, and discussed some advanced techniques for dealing with reactivity, working with DOM nodes, and exposing component functionality. In this article we will show another way to handle state management in Svelte: [Stores](https://learn.svelte.dev/tutorial/writable-stores). Stores are global data repositories that hold values. Components can subscribe to stores and receive notifications when their values change.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md index 04966496d3aa16e..4b9febadde993d8 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_getting_started","Learn_web_development/Core/Frameworks_libraries/Svelte_variables_props", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Svelte articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + Now that we have a basic understanding of how things work in Svelte, we can start building our example app: a to-do list. In this article we will first have a look at the desired functionality of our app, and then we'll create a `Todos.svelte` component and put static markup and styles in place, leaving everything ready to start developing our to-do list app features, which we'll go on to in subsequent articles. We want our users to be able to browse, add and delete tasks, and also to mark them as complete. This will be the basic functionality that we'll be developing in this tutorial series, and we'll look at some more advanced concepts along the way too. diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_typescript/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_typescript/index.md index 5be914e219f467a..7ab477ef4ab7264 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_typescript/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_typescript/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_stores","Learn_web_development/Core/Frameworks_libraries/Svelte_deployment_next", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Svelte articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + In the last article we learned about Svelte stores and even implemented our own custom store to persist the app's information to Web Storage. We also had a look at using the transition directive to implement animations on DOM elements in Svelte. We will now learn how to use TypeScript in Svelte applications. First we'll learn what TypeScript is and what benefits it can bring us. Then we'll see how to configure our project to work with TypeScript files. Finally we will go over our app and see what modifications we have to make to fully take advantage of TypeScript features. diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_variables_props/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_variables_props/index.md index 5d7327fb951118e..8f26f8466cf69b3 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_variables_props/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_variables_props/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_Todo_list_beginning","Learn_web_development/Core/Frameworks_libraries/Svelte_components", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Svelte articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + Now that we have our markup and styles ready, we can start developing the required features for our Svelte to-do list app. In this article we'll be using variables and props to make our app dynamic, allowing us to add and delete to-dos, mark them as complete, and filter them by status.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/vue_computed_properties/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/vue_computed_properties/index.md index 5ddf28189132361..0ad1b22ce48e001 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/vue_computed_properties/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/vue_computed_properties/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_styling","Learn_web_development/Core/Frameworks_libraries/Vue_conditional_rendering", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Vue articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods, but only re-run when one of their dependencies changes.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/vue_conditional_rendering/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/vue_conditional_rendering/index.md index d2bcbc410ce21c2..0a748e14a108c2d 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/vue_conditional_rendering/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/vue_conditional_rendering/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_computed_properties","Learn_web_development/Core/Frameworks_libraries/Vue_refs_focus_management", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Vue articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely `v-if` and `v-else` — to allow us to toggle between the existing todo item view, and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/vue_first_component/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/vue_first_component/index.md index 096ba42c00bafc2..375a785e84e11d3 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/vue_first_component/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/vue_first_component/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_getting_started","Learn_web_development/Core/Frameworks_libraries/Vue_rendering_lists", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Vue articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props, and saving data state. > [!NOTE] diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md index 75ab2912c880053..6b3eca1edb85d11 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{NextMenu("Learn_web_development/Core/Frameworks_libraries/Vue_first_component", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Vue articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + Now let's introduce Vue, the third of our frameworks. In this article we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/vue_methods_events_models/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/vue_methods_events_models/index.md index d755f6cf62f6dae..50a6bc8a5afa837 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/vue_methods_events_models/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/vue_methods_events_models/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_rendering_lists","Learn_web_development/Core/Frameworks_libraries/Vue_styling", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Vue articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + We now have sample data in place, and a loop that takes each bit of data and renders it inside a `ToDoItem` in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that we'll need a text ``, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/vue_refs_focus_management/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/vue_refs_focus_management/index.md index 7176bb72bf3ddb2..7e613da8fc14d5b 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/vue_refs_focus_management/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/vue_refs_focus_management/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_conditional_rendering","Learn_web_development/Core/Frameworks_libraries/Vue_resources", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Vue articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using **Vue refs** to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/vue_rendering_lists/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/vue_rendering_lists/index.md index 2cc4c510a3139cb..faf6274da97a801 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/vue_rendering_lists/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/vue_rendering_lists/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_first_component","Learn_web_development/Core/Frameworks_libraries/Vue_methods_events_models", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Vue articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + At this point we've got a fully working component; we're now ready to add multiple `ToDoItem` components to our app. In this article we'll look at adding a set of todo item data to our `App.vue` component, which we'll then loop through and display inside `ToDoItem` components using the `v-for` directive.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/vue_resources/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/vue_resources/index.md index eeaa48ee49c2923..822a9762ea4d676 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/vue_resources/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/vue_resources/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenu("Learn_web_development/Core/Frameworks_libraries/Vue_refs_focus_management", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Vue articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md index 04edbfb4c4a8378..133830ba489a96a 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md @@ -7,6 +7,9 @@ sidebar: learnsidebar {{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_methods_events_models","Learn_web_development/Core/Frameworks_libraries/Vue_computed_properties", "Learn_web_development/Core/Frameworks_libraries")}} +> [!NOTE] +> The MDN Vue articles are no longer being maintained and will be removed from the website in 3 months (by August 20, 2026). The content will be archived in the [MDN Museum](https://github.com/mdn/museum). See [this discussion](https://github.com/orgs/mdn/discussions/827) for further information. + The time has finally come to make our app look a bit nicer. In this article we'll explore the different ways of styling Vue components with CSS.