From 0499a8c839193e91fd96dd694868b076d679f878 Mon Sep 17 00:00:00 2001 From: Gregg Pollack Date: Tue, 21 Jul 2020 11:04:43 -0400 Subject: [PATCH 1/2] Added video explanation links for Vue 3 To help with learning --- src/guide/composition-api-introduction.md | 4 ++++ src/guide/composition-api-lifecycle-hooks.md | 2 ++ src/guide/reactivity.md | 2 ++ src/guide/teleport.md | 2 ++ 4 files changed, 10 insertions(+) diff --git a/src/guide/composition-api-introduction.md b/src/guide/composition-api-introduction.md index dbf80adb8b..1613e76a84 100644 --- a/src/guide/composition-api-introduction.md +++ b/src/guide/composition-api-introduction.md @@ -6,6 +6,8 @@ Reaching this far in the documentation, you should already be familiar with both [the basics of Vue](introduction.md) and [creating components](component-basics.md). ::: +[Watch a Video Explanation on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api) + Creating Vue components allows us to extract repeatable parts of the interface coupled with its functionality into reusable pieces of code. This alone can get our application pretty far in terms of maintainability and flexibility. However, our collective experience has proved that this alone might not be enough, especially when your application is getting really big – think several hundreds of components. When dealing with such large applications, sharing and reusing code becomes especially important. Let’s imagine that in our app, we have a view to show a list of repositories of a certain user. On top of that, we want to apply search and filter capabilities. Our component handling this view could look like this: @@ -66,6 +68,8 @@ Now that we know the **why** we can get to the **how**. To start working with th ### `setup` Component Option +[Watch a Video Explanation on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/setup-and-reactive-references) + The new `setup` component option is executed **before** the component is created, once the `props` are resolved, and serves as the entry point for composition API's. ::: warning diff --git a/src/guide/composition-api-lifecycle-hooks.md b/src/guide/composition-api-lifecycle-hooks.md index 2d4f5b3ba9..2bc5e0841a 100644 --- a/src/guide/composition-api-lifecycle-hooks.md +++ b/src/guide/composition-api-lifecycle-hooks.md @@ -2,6 +2,8 @@ > This guide assumes that you have already read the [Composition API Introduction](composition-api-introduction.html) and [Reactivity Fundamentals](reactivity-fundamentals.html). Read that first if you are new to Composition API. +[Watch a Video Explanation on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/lifecycle-hooks) + You can access a component's lifecycle hook by prefixing the lifecycle hook with "on". The following table contains how the lifecycle hooks are invoked inside of [setup()](composition-api-setup.html): diff --git a/src/guide/reactivity.md b/src/guide/reactivity.md index c4d512f534..dd00f3777b 100644 --- a/src/guide/reactivity.md +++ b/src/guide/reactivity.md @@ -2,6 +2,8 @@ Now it’s time to take a deep dive! One of Vue’s most distinct features is the unobtrusive reactivity system. Models are proxied JavaScript objects. When you modify them, the view updates. It makes state management simple and intuitive, but it’s also important to understand how it works to avoid some common gotchas. In this section, we are going to dig into some of the lower-level details of Vue’s reactivity system. +[Watch a Video Explanation on Vue Mastery](https://www.vuemastery.com/courses/vue-3-reactivity/vue3-reactivity) + ## What is Reactivity? This term comes up in programming quite a bit these days, but what do people mean when they say it? Reactivity is a programming paradigm that allows us to adjust to changes in a declarative manner. The canonical example that people usually show, because it’s a great one, is an excel spreadsheet. diff --git a/src/guide/teleport.md b/src/guide/teleport.md index b03ec2b9cd..8b353bd892 100644 --- a/src/guide/teleport.md +++ b/src/guide/teleport.md @@ -1,5 +1,7 @@ # Teleport +[Watch a Video Explanation on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/teleport) + Vue encourages us to build our UIs by encapsulating UI and related behavior into components. We can nest them inside one another to build a tree that makes up an application UI. However, sometimes a part of a component's template belongs into this component logically, while from a technical point of view, it would be preferable to move this part of the template somewhere else in the DOM, outside of Vue app. For example, due to styling requirements, we want to move `

` from it's deeply nested position to the `

` with `id="endofbody"` From d6f40ac01fe6b967016d3eda15e44a992812ad53 Mon Sep 17 00:00:00 2001 From: Gregg Pollack Date: Wed, 16 Sep 2020 19:35:02 -0400 Subject: [PATCH 2/2] Updated text on video links to be consistent --- src/guide/composition-api-introduction.md | 4 ++-- src/guide/composition-api-lifecycle-hooks.md | 2 +- src/guide/reactivity.md | 2 +- src/guide/teleport.md | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/guide/composition-api-introduction.md b/src/guide/composition-api-introduction.md index 1613e76a84..f1306c5f5c 100644 --- a/src/guide/composition-api-introduction.md +++ b/src/guide/composition-api-introduction.md @@ -6,7 +6,7 @@ Reaching this far in the documentation, you should already be familiar with both [the basics of Vue](introduction.md) and [creating components](component-basics.md). ::: -[Watch a Video Explanation on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api) +[Watch a free video about the Composition API on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api) Creating Vue components allows us to extract repeatable parts of the interface coupled with its functionality into reusable pieces of code. This alone can get our application pretty far in terms of maintainability and flexibility. However, our collective experience has proved that this alone might not be enough, especially when your application is getting really big – think several hundreds of components. When dealing with such large applications, sharing and reusing code becomes especially important. @@ -68,7 +68,7 @@ Now that we know the **why** we can get to the **how**. To start working with th ### `setup` Component Option -[Watch a Video Explanation on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/setup-and-reactive-references) +[Watch a free video about setup on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/setup-and-reactive-references) The new `setup` component option is executed **before** the component is created, once the `props` are resolved, and serves as the entry point for composition API's. diff --git a/src/guide/composition-api-lifecycle-hooks.md b/src/guide/composition-api-lifecycle-hooks.md index 2bc5e0841a..e69745bb95 100644 --- a/src/guide/composition-api-lifecycle-hooks.md +++ b/src/guide/composition-api-lifecycle-hooks.md @@ -2,7 +2,7 @@ > This guide assumes that you have already read the [Composition API Introduction](composition-api-introduction.html) and [Reactivity Fundamentals](reactivity-fundamentals.html). Read that first if you are new to Composition API. -[Watch a Video Explanation on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/lifecycle-hooks) +[Watch a free video about Lifecycle Hooks on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/lifecycle-hooks) You can access a component's lifecycle hook by prefixing the lifecycle hook with "on". diff --git a/src/guide/reactivity.md b/src/guide/reactivity.md index dd00f3777b..e418b856ae 100644 --- a/src/guide/reactivity.md +++ b/src/guide/reactivity.md @@ -2,7 +2,7 @@ Now it’s time to take a deep dive! One of Vue’s most distinct features is the unobtrusive reactivity system. Models are proxied JavaScript objects. When you modify them, the view updates. It makes state management simple and intuitive, but it’s also important to understand how it works to avoid some common gotchas. In this section, we are going to dig into some of the lower-level details of Vue’s reactivity system. -[Watch a Video Explanation on Vue Mastery](https://www.vuemastery.com/courses/vue-3-reactivity/vue3-reactivity) +[Watch a free video about Reactivity on Vue Mastery](https://www.vuemastery.com/courses/vue-3-reactivity/vue3-reactivity) ## What is Reactivity? diff --git a/src/guide/teleport.md b/src/guide/teleport.md index 8b353bd892..25c8302328 100644 --- a/src/guide/teleport.md +++ b/src/guide/teleport.md @@ -1,6 +1,6 @@ # Teleport -[Watch a Video Explanation on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/teleport) +[Watch a free video about Teleport on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/teleport) Vue encourages us to build our UIs by encapsulating UI and related behavior into components. We can nest them inside one another to build a tree that makes up an application UI.