From e08789da62aa22e3dbf1060f0b19ea3c8723e132 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Mon, 20 Jul 2020 21:26:09 +0200 Subject: [PATCH 01/18] Add link for Computed Properties lesson --- src/guide/computed.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/computed.md b/src/guide/computed.md index ce4754485b..8a633129c9 100644 --- a/src/guide/computed.md +++ b/src/guide/computed.md @@ -2,6 +2,8 @@ ## Computed Properties +
Learn how computed properties work with a free lesson on Vue School
+ 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. For example, if we have an object with a nested array: ```js From 18b8d71f6611395b0d40b73435dfb7f15597134f Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Mon, 20 Jul 2020 21:26:39 +0200 Subject: [PATCH 02/18] Add link for Reusable Components with Props lesson --- src/guide/component-props.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/component-props.md b/src/guide/component-props.md index 2dba04d7c6..68271a17d3 100644 --- a/src/guide/component-props.md +++ b/src/guide/component-props.md @@ -2,6 +2,8 @@ > This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components. +
Learn how component props work with a free lesson on Vue School
+ ## Prop Types So far, we've only seen props listed as an array of strings: From 879a6898e0220a99c2f238a239b4d51916ea0f79 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Mon, 20 Jul 2020 21:26:52 +0200 Subject: [PATCH 03/18] Add link for Conditional Rendering lesson --- src/guide/conditional.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/conditional.md b/src/guide/conditional.md index 46dd36c805..fd38685b91 100644 --- a/src/guide/conditional.md +++ b/src/guide/conditional.md @@ -1,5 +1,7 @@ # Conditional Rendering +
Learn how conditional rendering works with a free lesson on Vue School
+ ## `v-if` 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. From 509fd9c5ea850753a4a759e5549c75b37d4c0d4f Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Mon, 20 Jul 2020 21:27:06 +0200 Subject: [PATCH 04/18] Add link for List Rendering lesson --- src/guide/list.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/list.md b/src/guide/list.md index 6ac92074e4..1b275fb0d6 100644 --- a/src/guide/list.md +++ b/src/guide/list.md @@ -1,5 +1,7 @@ # List Rendering +
Learn how to render list with a free Vue School lesson
+ ## Mapping an Array to Elements with `v-for` 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: From 9308907667403bcf2b32ee162d97ea95c6bcba41 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Mon, 20 Jul 2020 21:27:22 +0200 Subject: [PATCH 05/18] Add link for Custom Events lesson --- src/guide/component-custom-events.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md index f65841f109..db80909df7 100644 --- a/src/guide/component-custom-events.md +++ b/src/guide/component-custom-events.md @@ -2,6 +2,8 @@ > This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components. +
Learn how to work with custom events in a free Vue School lesson
+ ## Event Names Unlike components and props, event names don't provide any automatic case transformation. Instead, the name of an emitted event must exactly match the name used to listen to that event. For example, if emitting a camelCased event name: From 055019aba587a0deb847b02da52f58d2cbc960ff Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Mon, 20 Jul 2020 21:26:09 +0200 Subject: [PATCH 06/18] Add link for Computed Properties lesson --- src/guide/computed.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/computed.md b/src/guide/computed.md index 193fc1a139..6dcfe34161 100644 --- a/src/guide/computed.md +++ b/src/guide/computed.md @@ -2,6 +2,8 @@ ## Computed Properties +
Learn how computed properties work with a free lesson on Vue School
+ 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. For example, if we have an object with a nested array: ```js From c7bbea839635bbc4228850c234129acfcfd92785 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Mon, 20 Jul 2020 21:26:39 +0200 Subject: [PATCH 07/18] Add link for Reusable Components with Props lesson --- src/guide/component-props.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/component-props.md b/src/guide/component-props.md index 30dd6bdcca..4494581544 100644 --- a/src/guide/component-props.md +++ b/src/guide/component-props.md @@ -2,6 +2,8 @@ > This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components. +
Learn how component props work with a free lesson on Vue School
+ ## Prop Types So far, we've only seen props listed as an array of strings: From 61ac1ab5e5c7b77c941ba7346a1d048bf86c5d5a Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Mon, 20 Jul 2020 21:26:52 +0200 Subject: [PATCH 08/18] Add link for Conditional Rendering lesson --- src/guide/conditional.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/conditional.md b/src/guide/conditional.md index c35f1e2efb..fff0b90067 100644 --- a/src/guide/conditional.md +++ b/src/guide/conditional.md @@ -1,5 +1,7 @@ # Conditional Rendering +
Learn how conditional rendering works with a free lesson on Vue School
+ ## `v-if` 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. From 047a2e5d0316d73d351938c13b1f991dce19082f Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Mon, 20 Jul 2020 21:27:06 +0200 Subject: [PATCH 09/18] Add link for List Rendering lesson --- src/guide/list.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/list.md b/src/guide/list.md index ec4be39071..1182bca2b3 100644 --- a/src/guide/list.md +++ b/src/guide/list.md @@ -1,5 +1,7 @@ # List Rendering +
Learn how to render list with a free Vue School lesson
+ ## Mapping an Array to Elements with `v-for` 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: From 6da2d583188d65766777524b5efced2dca2c3cd3 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Mon, 20 Jul 2020 21:27:22 +0200 Subject: [PATCH 10/18] Add link for Custom Events lesson --- src/guide/component-custom-events.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md index 5a7ef9be3c..11c937df7b 100644 --- a/src/guide/component-custom-events.md +++ b/src/guide/component-custom-events.md @@ -2,6 +2,8 @@ > This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components. +
Learn how to work with custom events in a free Vue School lesson
+ ## Event Names Like components and props, event names provide an automatic case transformation. If you emit an event from the child component in camel case, you will be able to add a kebab-cased listener in the parent: From 5a8f764918f11e8a86b890a54ca0e1d8bb44fabd Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Tue, 5 Jan 2021 20:18:14 +0100 Subject: [PATCH 11/18] chore: remove duplicate --- src/guide/component-custom-events.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md index 11c937df7b..5a7ef9be3c 100644 --- a/src/guide/component-custom-events.md +++ b/src/guide/component-custom-events.md @@ -2,8 +2,6 @@ > This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components. -
Learn how to work with custom events in a free Vue School lesson
- ## Event Names Like components and props, event names provide an automatic case transformation. If you emit an event from the child component in camel case, you will be able to add a kebab-cased listener in the parent: From d8a18b89f8e3c410a2bc2d8d490531bc2c1b8466 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Tue, 5 Jan 2021 20:18:27 +0100 Subject: [PATCH 12/18] refactor: use VideoLesson component --- src/guide/component-props.md | 2 +- src/guide/computed.md | 2 +- src/guide/conditional.md | 2 +- src/guide/list.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/guide/component-props.md b/src/guide/component-props.md index 4494581544..0c3503a874 100644 --- a/src/guide/component-props.md +++ b/src/guide/component-props.md @@ -2,7 +2,7 @@ > This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components. -
Learn how component props work with a free lesson on Vue School
+Learn how component props work with a free lesson on Vue School ## Prop Types diff --git a/src/guide/computed.md b/src/guide/computed.md index 6dcfe34161..1164b35068 100644 --- a/src/guide/computed.md +++ b/src/guide/computed.md @@ -2,7 +2,7 @@ ## Computed Properties -
Learn how computed properties work with a free lesson on Vue School
+Learn how computed properties work with a free lesson on Vue School 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. For example, if we have an object with a nested array: diff --git a/src/guide/conditional.md b/src/guide/conditional.md index fff0b90067..c56a7ebfda 100644 --- a/src/guide/conditional.md +++ b/src/guide/conditional.md @@ -1,6 +1,6 @@ # Conditional Rendering -
Learn how conditional rendering works with a free lesson on Vue School
+Learn how conditional rendering works with a free lesson on Vue School ## `v-if` diff --git a/src/guide/list.md b/src/guide/list.md index 1182bca2b3..db1aa1aaf5 100644 --- a/src/guide/list.md +++ b/src/guide/list.md @@ -1,6 +1,6 @@ # List Rendering -
Learn how to render list with a free Vue School lesson
+Learn how to render list with a free Vue School lesson ## Mapping an Array to Elements with `v-for` From 854d266f24a1034bb4249eb8963da718d2990dff Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Tue, 5 Jan 2021 21:19:54 +0100 Subject: [PATCH 13/18] add link for Class Binding lesson --- src/guide/class-and-style.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/guide/class-and-style.md b/src/guide/class-and-style.md index 0febb18f0f..c393e7c572 100644 --- a/src/guide/class-and-style.md +++ b/src/guide/class-and-style.md @@ -3,6 +3,7 @@ A common need for data binding is manipulating an element's class list and its inline styles. Since they are both attributes, we can use `v-bind` to handle them: we only need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue provides special enhancements when `v-bind` is used with `class` and `style`. In addition to strings, the expressions can also evaluate to objects or arrays. ## Binding HTML Classes +Watch a free video lesson on Vue School ### Object Syntax From a158037491bb3f1be4e0cc6079155a49a53db29d Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Tue, 5 Jan 2021 21:20:17 +0100 Subject: [PATCH 14/18] add link for Components Fundamentals course --- src/guide/component-basics.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/component-basics.md b/src/guide/component-basics.md index cda0c9b5c6..37206bb535 100644 --- a/src/guide/component-basics.md +++ b/src/guide/component-basics.md @@ -1,5 +1,7 @@ # Components Basics +Watch a free video course on Vue School + ## Base Example Here's an example of a Vue component: From 898bebef35b2c65ff06f2b137a607e19c9013ecd Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Tue, 5 Jan 2021 21:20:34 +0100 Subject: [PATCH 15/18] add link for Component Registration lesson --- src/guide/component-registration.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/component-registration.md b/src/guide/component-registration.md index 09a7b50990..8d34f6d807 100644 --- a/src/guide/component-registration.md +++ b/src/guide/component-registration.md @@ -2,6 +2,8 @@ > This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components. +Watch a free video lesson on Vue School + ## Component Names When registering a component, it will always be given a name. For example, in the global registration we've seen so far: From aceafafd504dcafcb8afa09a0b0a7ce50bec0a2a Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Tue, 5 Jan 2021 21:21:05 +0100 Subject: [PATCH 16/18] add link for Event Handling lesson --- src/guide/events.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/events.md b/src/guide/events.md index 7d9e2d5701..a4a6c2b080 100644 --- a/src/guide/events.md +++ b/src/guide/events.md @@ -1,5 +1,7 @@ # Event Handling +Learn how to handle events in a free Vue School lesson + ## Listening to Events We can use the `v-on` directive, which we typically shorten to the `@` symbol, to listen to DOM events and run some JavaScript when they're triggered. The usage would be `v-on:click="methodName"` or with the shortcut, `@click="methodName"` From 58ec60862e2051f47fb70c9701029f36f3961534 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Tue, 5 Jan 2021 21:21:16 +0100 Subject: [PATCH 17/18] add link for Intro to Single File Components lesson --- src/guide/single-file-component.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md index 635df90217..4e7ad252b1 100644 --- a/src/guide/single-file-component.md +++ b/src/guide/single-file-component.md @@ -2,6 +2,8 @@ ## Introduction +Watch a free video lesson on Vue School + In many Vue projects, global components will be defined using `app.component()`, followed by `app.mount('#app')` to target a container element in the body of every page. This can work very well for small to medium-sized projects, where JavaScript is only used to enhance certain views. In more complex projects however, or when your frontend is entirely driven by JavaScript, these disadvantages become apparent: From 0b84ac4ddb4c430f3f76266c13d33106cc8f6dd3 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Wed, 6 Jan 2021 14:30:50 +0100 Subject: [PATCH 18/18] add link for Lifecycle Hooks Lesson --- src/guide/instance.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/instance.md b/src/guide/instance.md index 9d28e131d9..5e324c9396 100644 --- a/src/guide/instance.md +++ b/src/guide/instance.md @@ -87,6 +87,8 @@ Vue also exposes some built-in properties via the component instance, such as `$ ## Lifecycle Hooks +Watch a free lesson on Vue School + Each 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. For example, the [created](../api/options-lifecycle-hooks.html#created) hook can be used to run code after an instance is created: